ECMAScript6 학습 노트(3): 배열의 확장

확장 연산자

...는 ES6에 새로 추가된 확장 연산자입니다.이것은 하나의 그룹을 쉼표로 구분된 매개 변수 서열로 변환할 수 있다.

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

이 특성을 이용하여 우리는 실현된 Iterator의 대상을 수조로 쉽게 바꿀 수 있다.

[...document.getElementsByTagName('div')]
// [div, div, div, ...]

확장 연산자는 함수를 대체하는 apply 방법에도 사용할 수 있습니다.

// ECMAScript5
function fn(x, y, z) {
	console.log(x + y + z); // 6
}
fn.apply(null, [1, 2, 3]);

// ECMAScript6
function fn(x, y, z) {
	console.log(x + y + z); // 6
}
fn(...[1, 2, 3]);

// ...      
Math.max(...[1, 2, 3]); // 3

Math.max([1, 2, 3]); // NaN

Math.max.apply(null, [1, 2, 3]); // 3

기타 실제 운용:
1. 간단한 배열 복제

//       
const array1 = [1, 2, 3];
//     (    )
const [...array2] = array1;
//     (    )
const array2 = [...array1];

... 연산자를 통해 수조를 복사하는 방법은 얕은 복사이기 때문에 깊은 수조를 직접 복사하는 데 사용할 수 없다.
2. 배열 결합

const array1 = [1, 'a'];
const array2 = [2, 'b'];
const array3 = [3, { c: 'c' }]; //         
const array4 = [...array1, ...array2, ...array3];

arra4[5]['c'] === arra3[1]['c']; // true

3. 문자열을 배열로 변환

[...'hello']
// [h, e, l, l, o]

이 방법을 사용하면 4바이트의 유니코드 문자를 정확하게 식별하여 문자 통계에 사용할 수 있습니다.

'x\uD83D\uDE80y'.length // 4

//        
;[...'x\uD83D\uDE80y'].length // 3



function length(str) {
	return [...str].length;
}
length('x\uD83D\uDE80y') // 3

4. Iterator 인터페이스를 임의로 구현한 객체를 배열로 변환
코드를 쓰는 과정에서 우리는 클래스 그룹이 사용할 수 없는 forEach 방법의 문제에 자주 부딪힌다. 예를 들어 NodeList, HTMLCollection 등이다.이전에 우리는 유형 변환을 해서 다음과 같은 용도를 사용했을 것이다.

// ECMAScript5
[].slice.call(HTMLCollection, null);

혹은

// ECMAScript6
Array.from(HTMLCollection);

이제 또 하나의 방법이 생겼다.

[...document.getElementsByTagName('div')]

위의NodeList나HTMLCollection가 확장 연산자를 사용하여 이를 진정한 수조로 바꿀 수 있는 이유는 모두 실현되었기 때문이다Iterator.

Number.prototype[Symbol.iterator] = function*() {
  let i = 0;
  let num = this.valueOf();
  while (i < num) {
    yield i++;
  }
}

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

Array.from()

Array.from() 역시 ECMAScript6에서 유래한 것으로 확장 연산자의 용도와 비슷하지만 크게 다르다.

Array.from()와...의 차이

Array.from: 이 방법은 모든 클래스의 대상을 지원합니다. 이른바 클래스의 대상은 length 속성을 가진 모든 대상입니다.따라서 length 속성이 있는 대상만 Array.from 방법으로 수조로 전환할 수 있다.

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

Array.from 방법은 두 번째 매개 변수를 받아들일 수 있으며 수조와 유사한 map 방법으로 모든 원소를 처리하고 처리된 값을 되돌아오는 수조에 넣는다.

Array.from([1, 2, 3], (x) => x * x);
// [1, 4, 9]
Array.from([1, 2, 3]).map(x => x * x);
// [1, 4, 9]

확장 연산자 (...): 확장 연산자 뒤에 호출된 것은 플러그인 인터페이스 (Symbol.iterator) 입니다. 대상이 이 인터페이스를 배치하지 않으면 전환할 수 없습니다.

Array.of()

Array.of 방법은 한 조의 값을 수조로 바꾸는 데 사용되며 확장 연산자의 역연산이다.그것의 출현은 수조 구조 함수Array()의 부족함을 보완했다.

//             
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

// Array.of        
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array.of(undefined) // [undefined]

ES5에서는 다음 방법으로 시뮬레이션Array.of 방법을 사용할 수 있습니다.

function ArrayOf() {
	return [].slice.call(arguments);
}

find() 및 findIndex()

수조 실례find 방법은 첫 번째 조건에 부합되는 수조 구성원을 찾아내는 데 쓰인다.그것의 매개 변수는 하나의 리셋 함수이다. 이 리셋 함수는 세 개의 매개 변수를 받아들일 수 있으며, 순서대로 현재 값, 현재 인덱스, 원본 그룹을 대표한다.

[0, 1, -2, 3].find((item, index, array) => item < 0);
// -2

findIndex 방법은 find 방법과 비슷하다.다른 점findIndex은 첫 번째 조건에 부합되는 그룹 구성원의 하표를 되돌려주고find 방법은 첫 번째 조건에 부합되는 그룹 구성원 자체를 되돌려준다.
두 번째 매개변수를 수신하여 콜백 함수this의 방향을 지정할 수 있습니다.

[1, 2, 3, 4].find(item => {
	console.log(this); // Window
	return item === 1;
}, window);
// 1

fill()

fill 방법은 주어진 값으로 수조를 채운다.

[].fill(2); // []

[ , , ].fill(2); // [2, 2]

[1, 1, 1].fill(2); // [2, 2, 2]

new Array(3).fill(2); // [2, 2, 2]

fill 메서드의 두 번째 및 세 번째 매개변수는 시작 및 끝 위치를 채우는 것을 나타냅니다.

['a', 'b', 'c'].fill(66, 1, 2);
// ['a', 66, 'c']

entries()、keys()、values()

ES6는 세 가지 새로운 방법인 entries (), 키 (),values () 를 제공합니다. 그룹을 옮겨다니는 데 사용됩니다.그것들은 모두 하나의 플러그인 대상을 되돌려줍니다. for... of 순환으로 플러그인을 할 수 있습니다. 유일한 차이점은 키스 () 는 키 이름에 대한 플러그인이고,values () 는 키 값에 대한 플러그인이며,entries () 는 키 값에 대한 플러그인입니다.

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

//     for..of..  
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

includes()

Array.prototype.includes 방법은 하나의 그룹이 주어진 값을 포함하는지 검사하는 데 사용되며, 되돌아오는 것은 Boolean 유형이다.

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
'hello'.includes('he') // true

이 방법의 두 번째 매개 변수는 검색의 시작 위치를 표시합니다. 기본값은 0입니다.두 번째 매개변수가 음수이면 역수의 위치를 나타내며 두 번째 매개변수가 -4이지만 배열 길이가 3)보다 크면 0부터 재설정됩니다.

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

includes 방법이 없기 전에 우리는 보통 indexOf 방법을 사용하여 수조에 주어진 값이 포함되어 있는지 없는지를 보조적으로 판단한다.그러나 indexOf는 어의화가 부족하고 indexOf 방법으로 NaN의 구성원을 판단할 수 없다.

[1, NaN, 3].indexOf(1) !== -1; // true
[1, NaN, 3].indexOf(NaN) !== -1; // false

flat() 및 flatMap

수조 실례flat 방법은 수조를 겹겹이 펼칠 수 있다. 이것은 매개 변수를 받아들여 몇 층을 펼칠 것인지, 값이 0일 때 펼치지 않을 것인지를 나타낸다.

[1, [2, 3, [4], 5], 6].flat(); // [1, 2, 3, [4], 5, 6]
[1, [2, 3, [4], 5], 6].flat(0); // [1, [2, 3, [4], 5], 6]
[1, [2, 3, [4], 5], 6].flat(1); // [1, 2, 3, [4], 5, 6]
[1, [2, 3, [4], 5], 6].flat(2); // [1, 2, 3, 4, 5, 6]

flatMap 방법은 map 방법과 flat 방법의 조합에 해당한다

//     [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

배열의 빈자리

new Array(3); // [,,,]

[1, 1, 1, 1]와[ , , , ] 모두 세 가지가 있지만'전자의 길이는 4, 후자의 길이는 3이니 당연하게 추측하지 마세요.
빈자리는 아무것도 없다는 것을 의미하며 undefined와 같지 않다.

0 in [undefined]; // true
0 in [,]; // false