[Javascript] 배열의 메서드

Da-hye·2020년 12월 22일
0

JavaScript

목록 보기
1/4
post-thumbnail

1. 배열 요소 Method

  • arr.push(..items) : 맨 끝에 요소 추가
  • arr.pop() : 마지막 요소 제거
  • arr.shift() : 첫번째 요소 제거
  • arr.unshift() : 맨 앞에 요소 추가

1) splice

splice( index, numberOfElements, elem1, ..., elemN )

배열의 요소를 삭제하거나 추가한다.
index가 가리키는 요소부터 numberOfElements 개수만큼 삭제하고,elem1, ..., elemN 을 배열에 추가한다.

let str = ["I", "love", "coffee"];
str.splice( 2, 1, "strawberry"); 
// return ["coffee"]
// str = ["I", "love", "strawberry"]

💡 음수 인덱스 사용
: 배열 끝에서부터 요소를 센 위치를 나타낸다.

str.splice( -1, 1, choco, popcorn);
// return ["coffee"]
// str = ["I", "love", "choco", "popcorn")

2) slice

slice( startIndex, endIndex )

배열을 구간 복사하여 새로운 배열을 만든다.
startIndex가 가리키는 요소부터 (endIndex 제외) endIndex 인덱스 까지의 요소를 복사한 새로운 배열을 반환한다.

let arr = ["a", "b", "c"];
let newArr = alphabet.slice(0,1);
// newArr = ["a"]

3) concat

concat( elem1, elem2, ... )

기존 배열에 인수를 추가해 새로운 배열을 만든다.
elem1, elem2 등에 속한 요소는 배열 혹은 값이 올 수 있다.

1. 값을 추가
let array = newArr.concat("b","c","d");
// array = ["a", "b", "c", "d"]

2. 배열을 추가
array = array.concat(str);
// array = ["a", "b", "c", "d", "I", "love", "coffee"]

2. 배열 탐색 Method

1) indexOf, lastIndexOf, includes

  • indexOf(item, index) : index부터 시작해서 item의 위치를 찾아 반환
  • lastIndexOf(item, index) : index부터 역순으로 item의 위치를 찾아 반환

2) find*, findIndex

  • find( function(item, index, array) {} ) : 특정 조건에 부합하는 하나의 객체를 배열 내에서 찾아 반환
  • findIndex : find와 같은 역할. But, 배열의 인덱스를 반환

3) filter*

filter( function(item, index, array) {})

조건을 충족하는 여러 요소들을 배열로 반환한다.

👀 find와 문법이 유사하지만, filter는 요소 전체를 담은 배열을 반환한다.

let users = [
    { id: 1, name: "choco" },
    { id: 2, name: "strawberry" },
    { id: 3, name: "melon"}
];

users.filter( user => user.id < 3 );
// (2) [{…}, {…}]
// 0: {id: 1, name: "choco"}
// 1: {id: 2, name: "strawberry"}

3. 배열 변형 Method

1) map*

map( function(item, index, array) {})

배열의 요소 전체를 대상으로 함수를 호출하고, 결과를 배열로 반환

👀 find, filter와 달리 요소나 인덱스가 아닌, 새로운 값을 반환한다.

let users = [
    { id: 1, name: "choco" },
    { id: 2, name: "strawberry" },
    { id: 3, name: "melon"}
];

users.map( user => user.name.length )
// (3) [5, 10, 5]

2) sort

  • sort() : 요소를 문자열로 취급하여 재 정렬시킨다.
let number = [ 1, 30, 5 ];
number.sort(); // [1, 30, 5]
number.sort( (a,b) => a-b ); // 오름차순 - [1, 5, 30]
number.sort( (a,b) => b-a ); // 내림차순 - [30, 5, 1]

3) reverse

  • reverse() : 배열의 요소를 역순으로 정렬

4) split, join

  • split('') : 문자열을 구분자로 나눠 분리하여 반환
  • join('') : 배열 요소들을 구분자로 합쳐 하나의 문자열을 반환

5) reduce*

reduce( function(accumulator, item, index, array) {}, initial )

배열의 요소 전체를 대상으로 함수를 호출하고, 값 하나를 도출하여 반환
: accumulator 이전 배열 요소에 대한 함수 호출의 결과값을 저장
: initial 함수 최초 호출시 사용되는 초깃값을 저장

let numbers = [1,2,3,4];
numbers.reduce( (sum, number) => sum + number, 0 ); 
// 10

👀 initial은 생략 가능하나, 빈 배열에 대해 reduce를 사용할 때 초기값 initial 을 생략한다면 Error 발생!

profile
🌱 차근차근, 오래 즐겁게!

0개의 댓글