[JS] - Array Method 정리 1탄

 

 

pop	push	unshift	shift	splice	slice
concat	every	some	forEach	map	filter
reduce	reverse	sort	toString	valueOf	join

 

---

 

pop

• 배열 뒷부분의 값을 삭제

    var arr = [ 1, 2, 3, 4 ];

    arr.pop();

    console.log( arr ); // [ 1, 2, 3 ]

   

    arr.pop();

    console.log( arr ); // [ 1, 2 ]

   

    arr.pop();

    console.log( arr ); // [ 1 ]

   

    arr.pop();

    console.log( arr ); // []

   

    arr.pop();

    console.log( arr ); // []

 

 

push

• 배열 뒷부분에 값을 삽입

  var arr = [ 1, 2, 3 ];

  arr.push( 0 );

  console.log( arr ); // [1,2,3,0]

  arr.push( -1, -2, -3 );

  console.log( arr ); // [1,2,3,0,-1,-2,-3]

  arr.push( 'a', 5, 'b' );

  console.log( arr ); // [1,2,3,0,-1,-2,-3,"a",5,"b"]

 

unshift

• 배열 앞부분에 값을 삽입

 

 var arr = [ 1, 2, 3 ];

 arr.unshift( 0 );

 console.log( arr ); // [0,1,2,3]

       

  arr.unshift( -1, -2, -3 );

  console.log( arr ); // [-1,-2,-3,0,1,2,3]

       

  arr.unshift( 'a', 5, 'b' );

  console.log( arr ); // ["a",5,"b",-1,-2,-3,0,1,2,3]

 

shift

• 배열 앞부분의 값을 삭제

 var arr = [ 1, 2, 3, 4 ];

 

 arr.shift();

 console.log( arr ); // [ 2, 3, 4 ]`

 arr.shift();

 console.log( arr ); // [ 3, 4 ]`

 arr.shift();

 console.log( arr ); // [ 4 ]`

 arr.shift();

 console.log( arr ); // []`

 arr.shift();

 console.log( arr ); // []`

 

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)

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

  var arr = [ 1, 2, 3, 4, 5, 6, 7 ];

 

  var newArr1 = arr.slice( 3, 1 );

  var newArr2 = arr.slice( 3, 2 );

  var newArr3 = arr.slice( 3, 3 );

  var newArr4 = arr.slice( 3, 4 );

  var newArr5 = arr.slice( 3, 5 );

  var newArr6 = arr.slice( 3, 6 );

  var newArr7 = arr.slice( 3, 7 );      

  var newArr8 = arr.slice( 3, 8 ); //size over

  var newArr9 = arr.slice( 3, 9 ); 

  var newArr10 = arr.slice( 3, -1 );

  var newArr11 = arr.slice( 3, -2 );

  var newArr12 = arr.slice( 3, -3 );

  var newArr13 = arr.slice( 3, -4 );  //size over

  var newArr14 = arr.slice( 3, -5 ); 

 

  console.log( newArr1 ); // []

  console.log( newArr2 ); // []

  console.log( newArr3 ); // []

  console.log( newArr4 ); // [ 4 ]

  console.log( newArr5 ); // [ 4, 5 ]

  console.log( newArr6 ); // [ 4, 5, 6 ]

  console.log( newArr7 ); // [ 4, 5, 6, 7 ]  

  console.log( newArr8 ); // [ 4, 5, 6, 7 ] size over

  console.log( newArr9 ); //[ 4, 5, 6, 7 ]

  console.log( newArr10 ); // [ 4, 5, 6 ]`

  console.log( newArr11 ); // [ 4, 5 ]

  console.log( newArr12 ); // [ 4 ]

  console.log( newArr13 ); // []                   size over

  console.log( newArr14 ); // []

 

concat

• 다수의 배열을 합치고 병합된 배열의 사본을 반환

   var arr1 = [ 1, 2, 3 ];

   var arr2 = [ 4, 5, 6 ];

   var arr3 = arr1.concat( arr2 );

   var arr4 = arr2.concat( arr1 );

   var arr5 = arr3.concat( arr4 );

   

   console.log( arr1 ); // [1,2,3]

   console.log( arr2 ); // [4,5,6]

   console.log( arr3 ); // [1,2,3,4,5,6]

   console.log( arr4 ); // [ 4, 5, 6, 1, 2, 3 ]

   console.log( arr5 ); //[1,2,3,4,5,6,4,5,6,1,2,3]

 

every

• 배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트
• return 값은 Boolean 
• 하나라도 false이면 false를 return

 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`

    console.log( arr.every( item => item % 2 === 0 ) ); // false

    console.log( arr.every( item => item % 1 === 0 ) ); // true

 

some

• 지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복
• return 값은 Boolean 
• 하나라도 true이면 true를 return

 arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

    var isEven = function( value ) {

      return value % 2 === 0;

    };

    console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return`

    console.log( arr.some( item => item % 2 === 0 ) ); // true

    console.log( arr.some( item => item === 20 ) ); // false

 

forEach

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

    var arr =[ 1, 2, 3 ];

 

    arr.forEach( function( value ) {

      console.log( value );   // 1 2 3 하나하나 출력

    });

   

   

   arr.forEach( item => {

     item = item + 10;  

     console.log( item ); // 11 12 13 하나하나 출력

   });

 

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 ]`

 

  var newArr2  = arr.map(

        item => item % 2 == 0    

    );

      console.log( newArr2  ); // [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 ]`

 

  var newArr2  = arr.filter(

        item => item % 2 == 0    

    );

      console.log( newArr2  ); // [ 2, 4, 6, 8, 10 ]`

 

 

reduce

• 배열의 각 값(좌에서 우로)에 대해 (누산 된) 한 값으로 줄도록 함수를 적용

    var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

    var value = arr.reduce( function( previousValue, currentValue, index ) {

      return previousValue + currentValue;

    });

    console.log( value ); // 55`

   

     var value = arr.reduce( function( previousValue, currentValue, index ) {

      return previousValue - currentValue;

    });

    console.log( value ); // -53`

   

     var value = arr.reduce( function( previousValue, currentValue, index ) {

      return previousValue * currentValue;

    });

    console.log( value ); // 3628800`

   

     var value = arr.reduce( function( previousValue, currentValue, index ) {

      return previousValue / currentValue;

    });

    console.log( value ); // 2.7557319223985894e-7

 

reverse

• 배열의 원소 순서를 거꾸로 바꾼다.

var arr =[ 1, 2, 3, 4 ];

    arr.reverse();

    console.log( arr ); // [ 4, 3, 2, 1 ]`

 

sort

• 배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다.
• 모든 원소를 문자열로 취급해 사전적으로 정렬

 var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];

    arr.sort();

    console.log( arr ); // [ 1, 10, 11, 12, 13, 2, 3, 5 ];

   

    // sort에 함수로 정렬

 var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];

    arr.sort( function( a, b ) {

      return a - b;

    })

    console.log( arr ); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]`

   

 var arr = [ 13, 12, 'a', 10, 'a', 3, 'b', 1 ];

    arr.sort( function( a, b ) {

      return a - b;

    })

    console.log( arr ); // [1,3,10,12,13,"a","a","b"]

 

toString

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

var arr =[ 1, 2, 3, 4, 'a', 'b' ];

    console.log( arr.toString() ); // "1,2,3,4,a,b"

 

valueOf

• toString과 비슷하나 그러나 배열을 반환
• 파라미터는 전달 불가능

var arr =[ 1, 2, 3, 4, 'a', 'b' ];

    console.log( arr.valueOf() ); // [1,2,3,4,"a","b"]

 

join

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

• 파라미터 빈값으로 전달하면 콤마(,)로 연결이 되네
• 마지막 요소 뒤에는 추가가 안되네 ( 4Team 으로 안 나오네 )

var arr =[ 1, 2, 3, 4 ];

    console.log( arr.join() );      // "1,2,3,4"

    console.log( arr.join( '-' ) ); // "1-2-3-4"

    console.log( arr.join( 'Team, ' ) ); // "1Team, 2Team, 3Team, 4"