Deep Dive 27장 배열(1) 메서드

A. 배열 생성 메서드

1. Array.of ES6

전달된 인수를 가지는 배열을 생성한다.

Array.of(1); // [1]

Array.of(1,'',2,'3'); // [1, '', 2, '3']

Array.of("hello","world"); // ["hello", "world"]

2. Array.from ES6

유사 배열, 이터러블 객체를 인수로 받아 배열로 변환 후 반환한다.

const ex1 = {length:2, 0:'a',1:'b'};
const ex2 = {length:2};
const ex3 = 'hello world';

Array.from(ex1); // ['a', 'b']
// 아무 객체나 가능한것이 아닌 유사 배열 객체만 가능하다.

Array.from(ex2); // [undefined, undefined]
// length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다.

Array.from(ex2, (_,i)=>i); // [0, 1]
// Array.from 의 두번째 인수로 콜백함수를 전달하면 콜백함수의 반환값으로 구성된 배열을 만든다.

Array.from(ex3); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
// 이터러블 객체를 변환하여 배열을 생성한다.

B. 배열 메서드

1. Array.isArray

인수가 배열이면 true 아니면 false를 반환한다.

//true
Array.isArray([]);
Array.isArray([1,2,3]);
Array.isArray(Array.from({length:2}));
Array.isArray(new Array());

2. Array.prototpye.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다. 매칭이 안되면 -1을 반환한다.

const arr = ['h','e','l','l','o'];

arr.indexOf('h') // 0

arr.indexOf('l') // 2

arr.indexOf('z') // -1

arr.indexOf('l', 3) // 3
// 두번째 인수에 인덱스 번호를 넣어 탐색 시작 위치를 지정할 수 있다. (default : 0) 생략가능

3. Array.prototpye.includes ES7

원본 배열에서 인수로 전달된 요소를 검색하여 존재하면 true, 존재하지 않으면 false를 반환한다. 두번째 인수에 몇번 인덱스부터 찾을지 지정할 수 있다.

const arr = ['h','e','l','l','o'];

arr.includes('a'); // false

arr.includes('l'); //true
arr.includes('l', 3); //true

4. Array.prototpye.push

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환한다. !!원본배열을 직접 변경!!

const arr = ['h','e','l','l','o'];

const leng = arr.push(1,2); // 7

console.log(arr); //['h','e','l','l','o', 1, 2]

5. Array.prototpye.pop

배열의 마지막 요소를 제거하고 제거한 요소를 반환한다. !!원본배열을 직접 변경!!

const arr = ['h','e','l','l','o'];

const pop_ = arr.pop(); // 'o'

console.log(arr) // ['h','e','l','l'];

6. Array.prototpye.unshift

인수로 전달받은 모든 값을 원본 배열의 앞부분에 추가하고 변경된 length 값을 반환한다. !!원본배열을 직접 변경!!

const arr = ['h','e','l','l','o'];
const unsh = arr.unshift('h','i',' ',); // 8

console.log(arr) //['h', 'i', ' ', 'h', 'e', 'l', 'l', 'o']

7. Array.prototpye.shift

배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 빈 배열이면 undefined 를 반환한다. !!원본배열을 직접 변경!!

const arr = ['h','e','l','l','o'];

const shi = arr.shift(); // 'h'

console.log(arr); // ['e','l','l','o'];

8. Array.prototpye.concat

인수로 전달된 값을 원본배열 복사본의 뒤로 추가한다. 인수가 배열인 경우 배열을 해체하여 추가한다. 원본배열은 변경되지 않는다.

const arr1 = ['h','e'];
const arr2 = ['l','l'];

const result = arr1.concat(arr2,'o'); // ['h', 'e', 'l', 'l', 'o']

console.log(arr1); // ['h','e'];

9. Array.prototpye.splice

arr.splice[start-index, delete-count, items]

start-index 부터 delete-count 개의 요소를 제거하고 그 자리에 item를 삽입한다. 제거된 요소를 반환한다. !!원본배열을 직접 변경!!

const arr = [1,2,3,4,5]
const result = arr.splice(0,2,2,1); // [1,2]
// 0번 인덱스부터 2개를 삭제하고 그 자리에 2, 1 을 넣는다. 삭제한 요소를 반환한다.

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

10. Array.prototpye.slice

인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본배열은 변경되지 않는다.

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

console.log(arr.slice()) // [1,2,3,4,5]
console.log(arr.slice(0, 5)) //[1,2,3,4,5]
// 0부터 5번인덱스 이전까지 반환
console.log(arr.slice(0, 6)) //[1,2,3,4,5]
// length가 넘어가면 있는 만큼 만 반환된다.
console.log(arr.slice(1))//[2,3,4,5]
// 인데스 1 부터 끝까지 반환
console.log(arr.slice(-1)) // [5]
console.log(arr.slice(-2)) // [4,5]
// 배열의 뒤에서부터 반환
console.log(arr.slice(0,-1)) // [1, 2, 3, 4]
// 0번인덱스부터 마지막 인덱스 전까지 반환

11. Array.prototpye.join

원본 배열의 모든 요소를 구분자로 연결한 문자열로 변환시켜 반환한다. 인수로 구분자를 받으며 default 는 ',' 이다.

const arr = [1,2,'a',4,'b']
console.log(arr.join()); // 1,2,a,4,b
console.log(arr.join(':')); // 1:2:a:4:b
console.log(arr.join('')); // 12a4b

12. Array.prototpye.reverse

원본 배열의 순서를 반대로 뒤집는다. 뒤집힌 배열이 반환된다. !!원본배열을 직접 변경!!

const arr = [1,2,3,4,5];
const result = arr.reverse();

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

13. Array.prototpye.fill ES6

인수로 전달받은 값으로 배열을 채운다. fill을 이용하면 요소를 같은 값으로 채울수 밖에 없다는 단점이 있다. !!원본배열을 직접 변경!!

// case 1
const arr = [1,2,3,4,5];

arr.fill(0); // 배열을 모두 0으로 채운다.

console.log(arr) // [0,0,0,0,0]

// case 2
const arr = [1,2,3,4,5];

arr.fill(0, 2); // 2번 인데스 부터 0으로 채운다.

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

// case 3
const arr = [1,2,3,4,5];

arr.fill(0, 2, 4); // 2번 인데스 부터 4번인덱스 전 까지 0으로 채운다.

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

14. Array.prototpye.fill ES10

중첩 배열을 평탄화 시킨다. 인수의 default 는 1 이며 infinity를 주면 모두 평탄화 시킨다. (재귀적 방법 이용) 원본배열은 변경되지 않는다.

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

console.log(arr); //[1, Array(2)]
console.log(arr.flat()); // [1, 2, Array(2)]
console.log(arr.flat(1)); // [1, 2, Array(2)]
console.log(arr.flat(2)); // [1, 2, 3, Array(2)]
console.log(arr.flat().flat()); // [1, 2, 3, Array(2)]
console.log(arr.flat(3)); // [1, 2, 3, 4, Array(1)]
console.log(arr.flat(4)); // [1, 2, 3, 4, 5]
console.log(arr.flat(5)); // [1, 2, 3, 4, 5]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]