-
[javascript] 22. 배열 메소드(Array Method) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 14:42
JavaScript Array Methods
1. Converting Arrays to Strings
자바스크립트에서, 모든 객체는 valueOf()메소드와 toString()메소드를 가지고 있습니다.valueOf()메소드는 배열을 위한 기본적인 행위 메소드 입니다.12var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.valueOf();cs 자바스크립트 배열에서, valueOf()와 toString()은 같은 역할을 합니다.
join() 메소드는 모든 배열의 요소를 결합합니다.
toString() 같이 행동하지만, 구분자를 지정해 줘야 합니다:
12345<p id="demo"></p><script>var fruits = ["Banana", "Orange","Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.join(" * ");</script>cs 2. Popping and Pushing
배열의 요소를 쉽게 추가 / 삭제 할 수 있습니다.pop() 메소드는 배열의 마지막 요소를 제거 합니다.12var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.pop(); // Removes the last element ("Mango") from fruitscs push() 메소드는 배열의 마지막에 새로운 요소를 추가합니다.
12var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruitscs 3. Shifting Elements
Shifting은 pop과 동등하나, 마지막이 아니라 맨 처음 요소로 작업합니다.shift() 메소드는 배열의 첫 요소를 제거하고, 배열의 모든 요소를 이동시켜 줍니다.1234567891011121314151617181920212223<!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() 메소드는 배열의 첫 번째 위치에 새로운 요소를 추가합니다.
1234var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruitscs 4. Changing Elements
배열의 요소는 인덱스 넘버를 사용하여 접근 할 수 있습니다.123var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[0] = "Kiwi"; // Changes the first element of fruits to "Kiwi"cs length 속성은 배열에 새로운 요소를 추가시키기 위한 쉬운 방법을 제공합니다.
123var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruitcs 5. Deleting Elements
자바스크립트 배열은 객체이므로, 요소는 자바스크립트 delete 연산자를 통하여 지울 수 있습니다.12var fruits = ["Banana", "Orange", "Apple", "Mango"];delete fruits[0]; // Changes the first element in fruits to undefinedcs * delete를 사용하면 배열에 undefined 요소가 들어갑니다.
=> pop() 이나 splice()를 사용하세요.
6. Splicing an Array
splice() 메소드는 배열에 새로운 아이템을 추가할 때 사용 할 수 있습니다.12345678910111213141516171819202122<!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() 메소드를 이용하여 요소를 삭제 할 수 있습니다.123var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(0,1); // Removes the first element of fruitscs 첫 번째 인자 값(0)은 새로운 요소가 추가될 위치 입니다.
두 번째 인자 값(1)은 얼마나 많은 요소가 삭제 될 것인가를 나타내는 값입니다.
8. Sorting an Array
sort() 메소드는 배열을 알바벳 순으로 정렬합니다.
12var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort(); // Sorts the elements of fruitscs 9. Reversing an Array
reverse() 메소드는 배열의 요소를 반전 시킵니다.123var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort(); // Sorts the elements of fruitsfruits.reverse(); // Reverses the order of the elementscs 10. Numeric Sort
sort() 함수는 문자열 값을 정렬하는게 기본입니다.
그러나 숫자를 정렬 할 시, 100 보다 25가 먼저 나오게 됩니다.(2가 1보다 크다는 이유로)
그러므로 숫자 값을 정렬 시, 틀린 정렬을 하게 됩니다.
아래 예제를 통하여 해결할 수 있습니다:
12var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a-b});cs 11. Find the Highest (or Lowest) Value
12345678910111213141516<!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() 메소드는 두 개의 배열을 연결하여 새로운 배열을 생성합니다.1234var myGirls = ["Cecilie", "Lone"];var myBoys = ["Emil", "Tobias","Linus"];var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoyscs 13. Slicing an Array
slice() 메소드는 배열을 분할해 줍니다.'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
