Javascript 자주쓰는 문법 모음 #배열

Javascript
by 모모87 2021. 1. 3. 20:56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript 100</title>
</head>
<body>
    


    <script>
        //01 변수
        {
            var x = 100;
            var y = 200;
            var z = "javacsript";
            document.write("*** 01 변수 *** <br>");
            document.write(x, "<br>");
            document.write(y, "<br>");   
            document.write(x, "<br><br>");
            //결과값
        }
        
        //02 배열
        {
            let arr1 = new Array();
            arr1[0] = 100;
            arr1[1] = 200;
            arr1[2] = "javascript";

            document.write("*** 02 배열 *** <br>");
            document.write(arr1[0], "<br>" );
            document.write(arr1[1], "<br>" );
            document.write(arr1[2], "<br><br><br>" );
            //결과값
        }

        //03 배열
        {
            const arr2 =[];
            arr2[0] =100;
            arr2[1] = 200;
            arr2[2] ="javascript";
            document.write('*** 03 배열 *** <br>');
            document.write(arr2[0],"<br>");
            document.write(arr2[1],"<br>");
            document.write(arr2[2],"<br><br><br>");
            //결과값
        }
        //04 배열
        {
            const arr3 = new Array(100,200,"javascript");
            document.write('*** 04 배열 *** <br>');
            document.write(arr3[0],"<br>");
            document.write(arr3[1],"<br>");
            document.write(arr3[2],"<br><br><br>");
            //결과값
        }
        //05 배열
        {
          const arr4 = [100,200,"javascript"];
          document.write("*** 05 배열 *** <br>");
          document.write(arr4[0],"<br>");
          document.write(arr4[1],"<br>");
          document.write(arr4[2],"<br><br><br>");
            //결과값
        }
        //06 2차 배열
        {
            const arr5 = [100,200,["javascript","jquery"]];
            document.write("*** 05 배열 *** <br>");
            document.write(arr5[0],"<br>");
            document.write(arr5[2][0],"<br>");
            document.write(arr5[2][1],"<br><br><br>");
            //결과값
        }

        //07 배열 갯수
        {
            const arr6 =[100,200,"javascript"];
            document.write('*** 07 배열 갯수 ***');
            document.write(arr6.length,"<br><br><br>");
            //결과값
        }

        //08 배열 불러오기(for문)
        {
            const arr7 =[100,200,"javascript"];

            document.write("*** 08 배열 불러오기(for문) ***'")
            for( let i=0; i<arr7.length; i++ ){
                document.write(arr7[i],"<br>");
            }
            document.write("<br><br><br>");
        }

        //09 배열 불러오기(forEach)
        { 
            const arr8 =[100,200,"javascript"];
            document.write("*** 09 배열 불러오기(forEach) ***<br>'")
            //arr8.forEach(function(){});
            arr8.forEach((elem)=>{
                document.write(elem,"<br>");
            });  
            arr8.forEach((element, index, array) =>{
                document.write(element,"<br>");
                document.write(index,"<br>");
                document.write(array,"<br>");
            });
            document.write("<br><br><br>");
        }
        //10 배열 불러오기(map)//foreach와 같다.
        {
            const arr9 = [100,200,"javascript"];
            document.write("*** 10 배열 불러오기(map) ***<br>'");
            //arr9.map(function(){});
            arr9.map((elem)=>{
                document.write(elem,"<br>")
            });
            document.write("<br>");
            arr9.forEach((element, index, array) =>{
                document.write(element,"<br>");
                document.write(index,"<br>");
                document.write(array,"<br>");
            });
            document.write("<br><br><br>");
        }
        
        //11 배열 불러오기(for in문)
        {
            const arr10 = [100,200,"javascript"];
            document.write("*** 11 배열 불러오기(for in문) ***<br>'");
            for(let i in arr10){
                document.write(arr10[i]);
            }
            document.write("<br><br><br>");
        }
        
        //12 배열 불러오기(for of문)
        {
            const arr11 =[100,200,"javascript"];
            document.write("*** 12 배열 불러오기(for of문)) ***<br>'");
            for(let i of arr11){
                document.write(i);
            }
            document.write("<br><br><br>");

        }
        //13 배열 조회하기
        {
            const arr12 = [100,200,"javascript"];
            let search = "javascript";
            document.write("*** 13 배열 조회하기 ***<br>");
            for( let i=0; i<arr12.length; i++){
                if( search == arr12[i]){
                    document.write(search + "를 찾았습니다.")
                }
            }
            document.write("<br><br><br>");

            //14 배열 펼침 연산자(Spread Syntax);
            {
            const arr13 = [100,200,"javascript"];
            document.write("*** 14 배열 펼침 연산자(Spread Syntax) ***<br>");
            document.write(arr13,"<br>");
            document.write(...arr13,"<br><br><br>");
            }
          
            //15 배열 최댓값 구하기
            {
                const arr14 = [100,200,300,400,500];
                let max;
                for( let i=0; i<arr14.length; i++){
                    if(arr14[i]> arr14[0]){
                        max = arr14[i];
                    }
                }
            document.write("*** 15 배열 최댓값 구하기 ***<br>");
            document.write(max,"<br><br><br>")
            }

            //16 배열 Math로 최댓값 구하기
            {
                const arr15 =[100,200,300,400,500];
                let max2 = Math.max(...arr15); //펼침어레이
                document.write("*** 16 배열 Math로 최댓값 구하기 ***<br>");
                document.write(max2,"<br><br><br>")
            }

            //17 배열 매서드
            {
                const arr16 =[100,200,300,400,500];
                document.write("*** 17 배열 매서드 join ***<br>");
                document.write(arr16.join('*'),"<br><br>");

                document.write("*** 18 배열 매서드 reverse ***<br>");
                document.write(arr16.reverse(''),"<br><br>");

                document.write("*** 19 배열 매서드 sort ***<br>");
                document.write(arr16.sort(),"<br><br>");
                document.write(arr16.sort(function(a,b){return b-a}),"<br><br>");
                document.write(arr16.sort(function(a,b){return a-b}),"<br><br>");

                document.write("*** 20 배열 매서드 slice ***<br>");
                document.write(arr16.slice(1,3),"<br><br>");

                const arr17 =[600,700,800,900,1000];

                //텐서플로우 .js 동물얼굴

                document.write("*** 21 배열 매서드 concat ***<br>");
                document.write(arr16.concat(arr17),"<br><br>");

                document.write("*** 22 배열 shift *** <br>");
                document.write(arr16.shift(),"<br><br>"); //100을 뺴줌
                document.write(arr16,"<br><br>"); //200,300,400,500

                document.write("*** 23 배열 unshift *** <br>");
                document.write(arr16.unshift(100),"<br><br>"); //5 100추가 후 갯수출력
                document.write(arr16,"<br><br>"); //100,200,300,400,500

                document.write("*** 24 배열 매서드 pop ***<br>");
                document.write(arr16.pop(),"<br><br>"); //500을 빼줌
                document.write(arr16,"<br><br>");

                document.write("*** 25 배열 매서드 push ***<br>");
                document.write(arr16.push(500),"<br><br>"); //500을 넣음
                document.write(arr16,"<br><br>"); //100,200,300,400,500
            }

            //변수 : 데이터 저장하는 곳(한개)
            //배열 : 데이터 저장하는 곳(두개 이상)
            //객체 : 데이터 자장하는 곳(두개이상, "키,값")

            

            //26 객체
            {
                const obj1 = new Object();
                obj1[0] =100;
                obj1[1] =200;
                obj1[2] ="javascript";

                document.write("*** 26 객체***<br><br>");
                document.write(obj1[0],"<br>");
                document.write(obj1[2],"<br>");
                document.write(obj1[3],"<br><br><br>");
            }
            //27 객체
            {
                const obj2 = new Object();
                obj2.a = 100;
                obj2.b = 200;
                obj2.c = "javascript";
                document.write("*** 27 객체***<br><br>");
                document.write(obj2.a,"<br>");
                document.write(obj2.b,"<br>");
                document.write(obj2.c,"<br><br><br>");
            }   
            //28 객체
            {
                const obj3 = {};
                obj3.a = 100;
                obj3.b = 200;
                obj3.c = "javascript";
                document.write("*** 28 객체***<br><br>");
                document.write(obj3.a,"<br>");
                document.write(obj3.b,"<br>");
                document.write(obj3.c,"<br><br><br>");
            }   
            //29 객체
            {
                const obj4 ={
                    a:100,
                    b:200,
                    c:"javascript"
                }
                document.write("*** 29 객체***<br><br>");
                document.write(obj4.a,"<br>");
                document.write(obj4.b,"<br>");
                document.write(obj4.c,"<br><br><br>");

            }
            //30 객체 (배열속 객체)
            {
             const obj5 =[
                 {
                     a:100,
                     b:200
                 },
                 {
                     c:300,
                     d:400
                 }
             ];
             document.write("*** 30 객체***<br><br>");
             document.write(obj5[0].a,"<br>");
             document.write(obj5[0].b,"<br>");
             document.write(obj5[1].c,"<br>");
             document.write(obj5[1].d,"<br><br><br>");
            }

            //31 객체(객체 속에 배열)
            {
                const obj6 = {
                   a:100,
                   b:[200,300],
                   c:"javascript"
                }
                document.write("*** 31 객체***<br><br>");
                document.write(obj6.a,"<br>");
                document.write(obj6.b[0],"<br>");
                document.write(obj6.b[1],"<br>");
                document.write(obj6.c,"<br><br><br>");
            }
            // 32 객체(객체 속에 함수)
            {
                const obj7 = {
                   a:100,
                   b:[200,300],
                   c:"javascript",
                   d:function(){
                       document.write("자바스크립트가 실행되었습니다.<br>");
                   },
                   e:function(){
                       document.write(this.c + "가 실행되었습니다.<br>");
                   }
                   
                }
                document.write("*** 32 객체***<br><br>");
                document.write(obj7.a,"<br>");
                document.write(obj7.b[0],"<br>");
                document.write(obj7.b[1],"<br>");
                document.write(obj7.c,"<br>");
                obj7.d();
                obj7.e();
                document.write("<br><br>");
            }
        //33 객체  생성자 함수
        function obj8(a,b){
            this.a = a;
            this.b = b;
            this.c = function(){
                document.write(this.a + this.b);
            }
        }
        const result1 = new obj8(100,200);
        const result2 = new obj8("javascript","react");

        document.write("*** 33 객체 생성사 함수***<br><br>");
        document.write(result1.a,"<br>");
        document.write(result1.b,"<br>");
        document.write(result2.a,"<br>");
        document.write(result2.b,"<br>");
        result1.c();
        result2.c();
        document.write("<br><br><br>");
        }

        //34객체 리터럴
        {
            const name1 ="array";
            const name2 ="object";
            //변수
            // const arr = ["array","object"];
            //배열
            const obj9 = {
               //name1 : name1,
               //name2 : name2,
               name1,
               name2,
            }//객체
            document.write("*** 34 객체 리터럴 함수***<br>");
            document.write(obj9.name1,"<br>");
            document.write(obj9.name2,"<br><br><br>");
        }
        //35 객체 리터럴 (초기화 34와 같음)
        {
            const obj10 ={
                name1: "array",
                name2: "object",
            }
            const name1 = obj10.name1;
            const name2 = obj10.name2;

            document.write("*** 35 객체 리터럴 함수***<br>");
            document.write(name1,"<br>");
            document.write(name2,"<br><br><br>");
        }

        //36 객체 구조 분해 할당
        {
            const obj11 = {
                name1: "array",
                name2: "object",
            }
            const { name1, name2 } = obj11;
            //핫하게 쓰고 있음
            document.write("*** 36 객체 구조 분해 할당***<br>");
            document.write(name1,"<br>");
            document.write(name2,"<br><br><br>");

        }

      //37 배열 구조 분해 할당
      {
          const arr18 = ["array","object"]
          const [ name1, name2 ] = arr18;
            //핫하게 쓰고 있음
            document.write("*** 37 배열 구조 분해 할당***<br>");
            document.write(name1,"<br>");
            document.write(name2,"<br><br><br>");
      }

      //38 객체 펼침 연상자
      {
          const spread1 = {
              nameA: 'array',
              nameB: 'object',
          }
          const newSpread1 = { ...spread1 };

          document.write("*** 38 배열 구조 분해 할당***<br>");
          document.write(newSpread1.nameA, "<br>");
          document.write(newSpread1.nameB, "<br><br><br>");
      }  
      
      //39 객체 펼침 연산자
      {
        const spread = {
              nameA: 'array',
              nameB: 'object',
          }
          const newSpread = { ...spread, nameC: 'react' };

          document.write("*** 39 객체 펼침 연산자 ***<br>");
          document.write(newSpread.nameA, "<br>");
          document.write(newSpread.nameB, "<br>");
          document.write(newSpread.nameC, "<br><br><br>");
      }
      //40 배열 펼침 연산자(복사)
      {
        const spread = ['array','object'];
          const newSpread = [ ...spread ];

          document.write("*** 40 배열 펼침 연산자(복사) ***<br>");
          document.write(newSpread, "<br><br><br>");
      }
      //41 배열 펼침 연산자(결합)
      {
          const spread1 = ['array','object'];
          const spread2 = ['react','vue'];
          const newSpread = [ ...spread1, ...spread2 ];
     
          document.write("*** 41 배열 펼침 연산자(복사) *** <br> ");
          document.write(newSpread, "<br><br><br>");
      }
      //변수
      //배열
      //객체
      //함수
      
      //42 선언적 함수
      {
          function func1(){
              document.write("*** 42 선언적 함수 *** <br>  ");
              document.write("fuc1이 실행되었습니다.<br><br><br>");
          }
          func1();
      }
      // 43 익명 함수
      {
          const func2 = function () { 
              document.write("*** 43 익명 함수 *** <br>  ");
              document.write("fuc2이 실행되었습니다.<br><br><br>");
           }
          func2();
      }
      //44 매개 변수가 있는 함수
      {
          function func3(name){
              document.write("*** 44 매개변수가 있는 함수 *** <br>  ")
              document.write(name);
          }
          func3("fuc3이 실행되었습니다.<br><br><br>");
      }
      //45 리턴 값이 있는 함수
      {
        function func4(){
             const str = "fuc4이 실행되었습니다.<br><br>";
             return str;
          }
          //func4(); 작동이 안됨
          document.write("*** 45 매개변수가 있는 함수 *** <br> ");
          document.write(func4(),"<br><br>");
      }
      //46 함수를 여러번 시키고 싶음? 정식문법 아님 (함수를 여러번 실행시캄)
      //46 재귀함수: 함수 정의 문 내에서 다시 함수를 호출 시켜줌
      {
        function func5(){
            document.write("*** 46 재귀함수 *** <br> ");
            func5();
          }
        function func5(num){
            if(num == 0){
                document.write("func5이 실행되었습니다.<br>");
            }else{
                document.write("func5이 실행되었습니다.<br>");
                func5(num - 1);
            }
        }  
        document.write("*** 46 재귀함수 *** <br> ");
        func5(9);          
        document.write("<br><br><br>");
      }
      //47 콜백 함수
      //47 콜밸함수: 함수를 실행시키고 난 뒤 또 함수를 시키고 싶을 때 (비동기방식떄)
      {
        function callback(num){
            for( let i=1; i<=10; i++){
                num(i);
            }
        }
        const func6 = function(i){
            document.write("func6이 실행되었습니다.<br>");
        }

        document.write("*** 47 콜백 함수 *** <br> ");
        callback(func6);
        document.write("<br><br>");
      }

      //48 콜백 함수
      {  
          //동기
        //  function a() { 
        //      console.log("a");
        //   }
        //   function b() {
        //     console.log("b");
        //   }
        //   a();
        //   b();

           //비동기
        //  function a() { 
        //     setTimeout(() => {
        //         console.log("a");
        //     }, 1000);
        //   }
        //   function b() {
        //     console.log("b");
        //   }
        //   a();
        //   b();
        //콜백함수는 순서 대로 부르게됨
        //콜백지옥?
        // function a(callback) { 
        //     setTimeout(() => {
        //         console.log("a");
        //         callback();
        //     }, 1000);
        //   }
        //   function b() {
        //     console.log("b");
        //   }
        //   a(function(){
        //       b();
        //   });

        //콜백지옥
        function a(callback) {
            setTimeout(() => {
                console.log("a");
                callback();
            }, 1000);
        }
        function b(callback) {
        setTimeout(() => {
                console.log("b");
                callback();
             }, 1000);   
        }
        function c(callback) {
        setTimeout(() => {
                console.log("c");
                callback();
             }, 1000);   
        }

        a(function(){
            b(function({
                c();
              })
        });
    });


      }

 

    </script>
</body>


</html>
'Javascript' 카테고리의 다른 글

05_키보드 드럼 (0)	2021.03.13
04_출석체크 (0)	2021.03.13
03_로또랜덤뽑기 (0)	2021.03.13
02_점심랜덤룰렛 (0)	2021.03.13
01_투두리스트 (0)	2021.03.13