[Javascript] 배열 메소드 정리

오늘은 배열에 관한 메소드 들을 정리 해봤다.

pop()

• 배열 뒷부분의 값을 삭제하는 메서드

var arr=[1,2,3,4];
arr.pop();
console.log(arr); // [1,2,3]

push()

• 배열 뒷부분에 값을 삽입하는 메서드

var arr=[1,2,3,4];
arr.push(5);
console.log(arr); // [1,2,3,4,5] 

unshift()

• 배열 앞부분에 값을 삽입

var arr=[1,2,3,4];
arr.unshift(0);
console.log(arr); // [0,1,2,3,4] 

shift()

• 배열 앞부분에 값을 삭제

var arr=[1,2,3,4];
arr.shift();
console.log(arr); // [2,3,4] 

splice()

• 배열 특정위치에 요소를 추가하거나 삭제
• splice( index , 제거할 요소 갯수 , 배열에 추가될 요소 )

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ]   3번째 인덱스에서부터 2개 제거


var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");
console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ] 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가

slice()

• 배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
var newArr = arr.slice( 3, 6 );
console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

concat()

• 다수의 배열을 합치고 합친 새로운 배열을 반환

var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr1.concat( arr2 );
console.log( arr3 ); // [ 1, 2, 3, 4, 5, 6 ]

every()

• 배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false  모든 요소가 true이면 true를 return 하고 그렇지 않으면 false

some()

• 지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return

forEach()

• 배열의 각 원소별로 지정된 함수를 실행한다.

var arr =[ 1, 2, 3 ];
arr.forEach( function( value ) {
  console.log( value );   // 1 2 3
});

map()

• 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.map( isEven );
console.log( newArr ); // [ false, true, false, true, false, true, false, true, false, true ]

filter()

• 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reverse()

• 배열의 원소 순서를 반대로 바꾼다.

var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]

toString()

• 배열을 문자열로 바꾸어 반환한다

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4

valueOf()

• toString과 비슷하지만 배열을 반환 (toString 은 문자열을 반환)

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4

join()

• 배열 원소 전부를 하나의 문자열로 합친다.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() );      // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4

sort()

• 배열을 정렬하기 위해 사용하는 함수

//오름차순 정렬
const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

//내림차순 정렬
const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return b - a;
});
document.writeln(arr + '<br>'); // [10, 3, 2, 1]

//객체 정렬
const arr = [
  {name: 'banana', price: 3000}, 
  {name: 'apple', price: 1000},
  {name: 'orange', price: 500}
];

arr.sort(function(a, b) {
  return a.price - b.price;
});

document.writeln(JSON.stringify(arr[0]) + '<br>');
document.writeln(JSON.stringify(arr[1]) + '<br>');
document.writeln(JSON.stringify(arr[2]) + '<br>');