ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [javascript] 22. 배열 메소드(Array Method) - 자바스크립트 강좌 JS / CSE
      Web/JavaScript 2015. 6. 13. 14:42

      JavaScript Array Methods




      1. Converting Arrays to Strings

       자바스크립트에서, 모든 객체는 valueOf()메소드와 toString()메소드를 가지고 있습니다.

       valueOf()메소드는 배열을 위한 기본적인 행위 메소드 입니다. 

       
      1
      2
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.valueOf();
      		cs

       



       자바스크립트 배열에서, valueOf()와 toString()은 같은 역할을 합니다.


       join() 메소드는 모든 배열의 요소를 결합합니다. 


       toString() 같이 행동하지만, 구분자를 지정해 줘야 합니다:



       

      1
      2
      3
      4
      5
      <p id="demo"></p>
      <script>
      var fruits = ["Banana", "Orange","Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.join(" * ");
      </script>
      		cs




       


      2. Popping and Pushing

       배열의 요소를 쉽게 추가 / 삭제 할 수 있습니다.

       pop() 메소드는 배열의 마지막 요소를 제거 합니다. 


       
      1
      2
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.pop();              // Removes the last element ("Mango") from fruits
      		cs

       



       

       push() 메소드는 배열의 마지막에 새로운 요소를 추가합니다.



       

      1
      2
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits
      		cs



       

      3. Shifting Elements

       Shifting은 pop과 동등하나, 마지막이 아니라 맨 처음 요소로 작업합니다.

       shift() 메소드는 배열의 첫 요소를 제거하고, 배열의 모든 요소를 이동시켜 줍니다.


       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>The shift method removes (shifts) the first element of an array.</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo"></p>
       
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits;
       
      function myFunction() {
      fruits.shift();
      document.getElementById("demo").innerHTML = fruits;
      }
      </script>
       
          </body>
      </html>
       
      		cs

       




       

       





       unshift() 메소드는 배열의 첫 번째 위치에 새로운 요소를 추가합니다. 



      1
      2
      3
      4
       
       
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits
      		cs

       



      4. Changing Elements

       배열의 요소는 인덱스 넘버를 사용하여 접근 할 수 있습니다.

       
      1
      2
      3
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"
       
      		cs

       


       length 속성은 배열에 새로운 요소를 추가시키기 위한 쉬운 방법을 제공합니다.


       

      1
      2
      3
       
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruit
      		cs

       



      5. Deleting Elements

       자바스크립트 배열은 객체이므로, 요소는 자바스크립트 delete 연산자를 통하여 지울 수 있습니다.

       
      1
      2
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      delete fruits[0];           // Changes the first element in fruits to undefined
      		cs

       


       * delete를 사용하면 배열에 undefined 요소가 들어갑니다. 

        => pop() 이나 splice()를 사용하세요.



       

      6. Splicing an Array

       splice() 메소드는 배열에 새로운 아이템을 추가할 때 사용 할 수 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>The splice() method adds new elements to an array.</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo"></p>
       
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits;
      function myFunction() {
      fruits.splice(2, 0, "Lemon", "Kiwi");
      document.getElementById("demo").innerHTML = fruits;
      }
      </script>
       
          </body>
      </html>
       
      		cs











       첫 번째 인자 값(2)는 새로운 요소가 들어갈 위치 값입니다.

       두 번째 인자 값(0)은 얼마나 많은 요소들이 삭제 될 것인가를 나타내는 값입니다.

       나머지 인자 값은 추가될 새로운 요소들에 대한 인자 값입니다.

       

      7. Using splice() to Remove Elements

       splice() 메소드를 이용하여 요소를 삭제 할 수 있습니다.

       
      1
      2
      3
       
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.splice(0,1);        // Removes the first element of fruits
      		cs

       



       첫 번째 인자 값(0)은 새로운 요소가 추가될 위치 입니다.


       두 번째 인자 값(1)은 얼마나 많은 요소가 삭제 될 것인가를 나타내는 값입니다.


       


      8. Sorting an Array

       sort() 메소드는 배열을 알바벳 순으로 정렬합니다.


       

      1
      2
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.sort();            // Sorts the elements of fruits
      		cs

       




      9. Reversing an Array

       reverse() 메소드는 배열의 요소를 반전 시킵니다.


      1
      2
      3
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.sort();            // Sorts the elements of fruits 
      fruits.reverse();         // Reverses the order of the elements
      		cs

       




      10. Numeric Sort

        sort() 함수는 문자열 값을 정렬하는게 기본입니다.


        그러나 숫자를 정렬 할 시, 100 보다 25가 먼저 나오게 됩니다.(2가 1보다 크다는 이유로)


        그러므로 숫자 값을 정렬 시, 틀린 정렬을 하게 됩니다.


        아래 예제를 통하여 해결할 수 있습니다:



       

      1
      2
      var points = [40, 100, 1, 5, 25, 10];
      points.sort(function(a, b){return a-b});
      		cs

       



      11. Find the Highest (or Lowest) Value

       
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>The highest number is <span id="demo"></span></p>
       
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      points.sort(function(a, b){return b-a});
      document.getElementById("demo").innerHTML = points[0];
      </script>
       
          </body>
      </html>
       
       
      		cs





       




      12. Joining Arrays

       concat() 메소드는 두 개의 배열을 연결하여 새로운 배열을 생성합니다.

       
      1
      2
      3
      4
       
      var myGirls = ["Cecilie", "Lone"];
      var myBoys = ["Emil", "Tobias","Linus"];
      var myChildren = myGirls.concat(myBoys);     // Concatenates (joins) myGirls and myBoys
      		cs

       



      13. Slicing an Array

       slice() 메소드는 배열을 분할해 줍니다.

       
      1
      2
      3
       
      var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
      var citrus = fruits.slice(1, 3);
      		cs

       


      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 25. 조건문(conditions) - if, else - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 24. 비교(Comparisons) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 23. 논리연산(Booleans) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 21. 배열(Arrays) - 자바스크립트 강좌  (0) 2015.06.13
      [javascript] 20. 날짜 메소드(Date Methods) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 19. 날짜(Dates) - 자바스크립트 강좌  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바