[JS] 배열에서 사용하는 메서드 (1)

1) Array.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환

• 원본 배열에 인수로 전달한 요소와 중복되는 요소가 있으면 첫 번째로 검색된 요소의 인덱스 반환
• 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1 반환

const arr = [1,2,2,3]

arr.indexOf(2) // 1 반환

arr.indexOf(4) // -1 반환

arr.indexOf(2, 2)// 두번째 인수는 검색을 시작할 인덱스, 그러므로 2 반환

 

2) Array.push

인수로 전달받은 값을 원본 배열의 마지막 요소로 추가

const arr = [1,2,3,4,5]

arr.push(6) // [1,2,3,4,5,6]

※ push 메서드는 원본 배열을 직접 변경한다. 원본배열을 변경하고 싶지 않다면 spread 문법을 사용하자

const arr = [1,2]

const newArr = [...arr, 3] // [1,2,3]

3) Array.pop

원본 배열의 마지막 요소 제거

const arr = [1,2,3,4,5]

arr.pop() // [1,2,3,4]

4) Array.unshift

인수로 전달받은 값을 원본 배열의 맨 앞 요소로 추가

const arr = [1,2,3,4,5]

arr.unshift(6) // [6,1,2,3,4,5]

※ unshift 메서드는 원본 배열을 직접 변경한다. 원본배열을 변경하고 싶지 않다면 spread 문법을 사용하자

const arr = [1,2]

const newArr = [3, ...arr] // [3,1,2]

5) Array.shift

원본 배열의 맨 앞 요소 제거

const arr = [1,2,3,4,5]

arr.shift() // [2,3,4,5]

6) Array.splice

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거할 때 사용

3개의 매개변수가 있다.

• start : 원본 배열의 요소를 제거하기 시작할 인덱스, start만 지정할 시 원본 배열의 start부터 모든 요소 제거 음수인 경우 배열의 끝에서의 인덱스를 나타냄,(-1이면 마지막 요소, -n이면 마지막에서 n번째 요소)
• deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수
• items : 제거한 위치에 삽입할 요소들의 목록

const arr = [1,2,3,4]

// splice(start) : start부터 모두 지움
arr.splice(1) // [1]
// splice(start, deleteCount) : start부터 deleteCount수 만큼 지움
arr.splice(2, 1) // [1,2,4]
// splice(start, deleteCount, items) : start부터 deleteCount개의 요소를 제거하고
// 그 자리에 새로운 items 요소를 삽입
arr.splice(1,2,20,30) // [1,20,30,4]
arr.splice(1,0,100) //[1,100,2,3,4]

 

7) Array.slice

인수로 전달된 범위의 요소들을 복사하여 배열로 반환 (원본 배열 변경 X)

2개의 매개변수를 갖는다

• start : 복사를 시작할 인덱스(음수면 배열의 끝에서의 인덱스)
• end : 복사를 종료할 인덱스, 이 인덱스에 해당하는 요소는 복사안됨, 생략가능, 생략시 기본값을 length 프로퍼티 값

const arr = [1,2,3]

arr.slice(0,1) //[1]

arr.slice(1,2) // [2]

arr.slice(1) // [2,3]

arr.slice(-1) // [3]

arr.slice(-2) // [2,3]

8) Array.join

원본 배열의 모든 요소를 문자열로 변환 후, 인수로 전달받은 구분자로 연결한 문자열 반환

const arr = ['a','b','c','d']

arr.join() // a,b,c,d

arr.join('') // abcd

arr.join(':') // a:b:c:d

9) Array.reverse

원본 배열의 순서를 반대로 뒤집는다. (원본 배열 변경됨)

const arr = [1,2,3]

arr.reverse() // [3,2,1]

10) Array.fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다(원본 배열 변경됨)

const arr = [1,2,3]

arr.fill(0) // [0,0,0]

arr.fill(0,1) // [1,0,0]

11) Array.includes

배열내에 특정 요소가 포함되어 있는지 확인하여 true or false 로 반환

 

const arr = [1,2,3]

arr.includes(2) // true

arr.includes(100) // false

 

 

 

Reference

모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고