Array method

배열의 기초

배열은 값을 순차적으로 저장하는 용도로 사용

var arr = [1, 2, 3];

// 배열 요소에 접근하기
arr[0];  // 1
arr[2];  // 3

// 배열 요소의 개수 확인하기
arr.length  // 3

// 마지막 요소에 접근
arr[arr.length - 1]; //=> 3

Array Method

배열 수정(삭제, 추가) 메서드

let arr = [1,2,3];

// 배열의 마지막 요소 제거, 제거된 요소 리턴
arr.pop();  // 3

// 배열 마지막에 요소 추가, 배열의 크기 리턴
arr.push("new");  // 3
console.log(arr);  //-> [ 1, 2, 'new' ]

// 배열의 첫번째 요소 제거, 제거된 요소 리턴
arr.shift();  // 1

// 배열의 처음에 요소 추가, 배열의 크기 리턴
arr.unshift("good");  // 3
console.log(arr);  //-> [ 'good', 2, 'new' ]

• push 메서드 : 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• pop 메서드 : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환
• unshift 메서드 : 배열의 첫 번째 자리에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• shift 메서드 : 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환

splice 메서드

배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용

리턴값은 삭제한 배열 요소이며 삭제한 요소가 없더라도 빈 배열을 반환

/* 배열 임의의 위치에 요소 추가 제거 */
// start - 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소 개수, 제거하지 않을 경우 0
// el - 배열에 추가될 요소
arr.splice(start, deleteCount, el);

let arr = [1, 5, 7];
arr.splice(1, 0, 2, 3, 4);  // [], arr: [1, 2, 3, 4, 5, 7]
arr.splice(1, 2);           // [2, 3], arr: [1, 4, 5, 7]

let arr1 = [1,2,3,4,5]
arr1.splice(0,1);
console.log(arr1); //[2, 3, 4, 5]

reverse 메서드 - 배열 요소 순서 반전

배열 요소의 순서를 반전

// 요소 순서를 반전 시킴
var arr = [1, 3, 5, 7];
arr.reverse();  // [7, 5, 3, 1]

sort 메서드 - 배열 요소 정렬

• 결과값이 0보다 작으면(음수-) a가 낮은 색인으로 정렬됩니다.
• 결과값이 0이면 a와 b의 순서를 바꾸지 않습니다.
• 결과값이 0보다 크면(양수+) b가 낮은 색인으로 정렬됩니다.

배열의 순서를 정렬(숫자)

let num = [1, 5, 3, 4, 7, 9, 11, 22, 32, 44 , 55, 23, 36];
  num.sort(function(a, b) {
    return a - b;
  });
  console.log(num);

//정순으로 정렬
//[1, 3, 4, 5, 7, 9, 11, 22, 23, 32, 36, 44, 55]

let num = [1, 5, 3, 4, 7, 9, 11, 22, 32, 44 , 55, 23, 36];
  num.sort(function(a, b) {
    return a - b;
  });
  console.log(num);

//역순으로 정렬
//[55, 44, 36, 32, 23, 22, 11, 9, 7, 5, 4, 3, 1]

배열의 순서를 정렬(문자)

let fruit = ["바나나", "딸기", "포도", "사과", "귤", "석류", "키위", "망고"];
  fruit.sort((a, b)=> {
    return a > b ? 1: -1;
  });
  console.log(fruit);

//정순으로 정렬
//['귤', '딸기', '망고', '바나나', '사과', '석류', '키위', '포도']

let animals = [
    {name : 'monkey'},
    {name : 'cat'},
    {name : 'lion'},
    {name : 'mouse'},
    {name : '코끼리'},
    {name : 'dog'}
  ]

  animals.sort((a, b)=> {
    console.log('a:'+a.name+', b:'+b.name);
    return a.name > b.name ? 1: -1;
  });

//결과 아래 이미지 참조

• 삼항 연산자를 이용해 확인이 가능하다.

 

 

양수가 나왔을때는 계속 반복이 된다.

하지만 음수가 나오면 다시 거슬러 올라가서 찾아보는것을 확인할 수 있다.

참고 사이트

 

[JavaScript] array의 splice 함수 정리 – GIS Developer

 

JS Array 이해, push(), pop(), sort(), splice()