ES6 배열 확장

ECMAScript6는 배열 Array 구조 함수에from(), of() 등 정적 방법을 추가하고 배열 인스턴스에find(),findIndex() 등의 방법을 추가한 배열을 확장했다.다음은 이 방법들의 용법을 함께 살펴보자.

Array.from()

Array.from () 은 클래스 그룹 (array-like) 대상과 옮겨다니는 대상을 그룹으로 바꾸어 되돌려줍니다.예를 들어dom 노드의 집합을 그룹으로 바꾸면 이전에 우리는 이렇게 썼을 수도 있다.

var divs = document.querySelectAll("div");

[].slice.call(divs).forEach(function (node) {

   console.log(node);         

})

이제 우리는 이렇게 쓸 수 있다.

var divs = document.querySelectAll("div");

Array.from(divs).forEach(function (node) {

   console.log(node);         

})

위의 두 가지 작법은 기본적으로 같다.
Array.from()도 ES6에 새로 추가된 Set, Map 등의 구조를 배열로 변환할 수 있습니다.

//  Set 

Array.from(new Set([1, 2, 3, 4])); // [1, 2, 3, 4]



// Map 

Array.from(new Map(["name", "zlw"])); // ["name", "zlw"]

문자열은 클래스 그룹이자 범람할 수 있기 때문에 Array입니다.from()도 문자열을 배열로 변환할 수 있습니다.

Array.from("zlw"); // ["z", "l", "w"]

Array.from()에는 다음과 같은 두 가지 옵션 매개변수가 있습니다.

Array.from(obj, mapFn, thisArg)

mapFn은 사실 그룹의 맵 방법으로 그룹의 모든 요소를 처리합니다.thisArg은 실행 환경의 컨텍스트입니다.  Array.from(obj, mapFn, thisArg)은 Array와 같습니다.from(obj).map(mapFn, thisArg).

Array.of()

Array.of () 매개 변수를 그룹으로 바꿉니다.예:

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

우리는 Array 구조 함수로도 같은 기능을 할 수 있다는 것을 알고 있다.

Array(1, 2, 3) // [1, 2, 3]

이들의 차이점은 다음과 같습니다.

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



Array(3) // [undefined, undefined, undefined] 

매개 변수를 입력할 때, Array.of () 는 원소가 하나뿐인 그룹을 되돌려주고, Array () 는 들어오는 파라미터이고 원소가undefined인 그룹을 되돌려줍니다.

Array.prototype.fill()

fill() 방법은 배열의 시작과 끝 위치 사이의 모든 값을 하나의 값으로 채웁니다. 구문은 다음과 같습니다.

fill(value, start, end)

매개 변수 start,end는 start 위치를 포함하지만,end 위치는 포함하지 않습니다.생략하면 start 기본값은 0,end 기본값은 그룹 길이입니다.만약 두 개의 선택할 수 있는 매개 변수 중 하나가 음수라면, 수조의 길이에 이 수를 더해서 상응하는 위치를 확정한다.예:

[1, 2, 3].fill(4) // [4, 4, 4]

[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]

[1, 2, 3].fill(4, -3, -2) // [4, 2, 3] 

Array.prototype.find() 및 Array.prototype.findIndex()

find () 방법은 수조에서 조건에 맞는 첫 번째 요소를 되돌려줍니다. 그렇지 않으면undefind를 되돌려줍니다.구문은 다음과 같습니다.

array.find(callback, context);

매개 변수는 리셋 함수와 선택할 수 있는 매개 변수(실행 환경 상하문)를 포함한다.조건에 맞는 원소를 찾을 때까지find () 방법으로 원소를 되돌려줍니다.예:

[1, 2, 3, 4].find(function(el, index, arr) {

   return el > 2; 

}) // 3

[1, 2, 3, 4].find(function(el, index, arr) { 
　　return el > 4; 
}) // undefined

findIndex () 방법은find () 방법과 유사하며, 조건에 맞는 첫 번째 요소의 인덱스를 되돌려줍니다. 없으면 -1을 되돌려줍니다.예:

[1, 2, 3, 4].findIndex(function(el, index, arr) {

   return el > 2; 

}) // 2

[1, 2, 3, 4].findIndex(function(el, index, arr) { 
　　return el > 4; 
}) // -1

Array.prototype.entries()、Array.prototype.keys와 Array.prototype.values()

entries (), 키스,values는 모두 하나의 그룹 교체기 대상을 되돌려줍니다.예:

var entries = [1, 2, 3].entries();

console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3]

var keys = [1, 2, 3].keys(); console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2

var valuess = [1, 2, 3].values(); console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); // 3

교체기의next() 방법은value 속성과done 속성을 포함하는 대상을 되돌려줍니다.value 속성은 현재 스트리밍 위치의 값입니다.done 속성은 브리 값으로 스트리밍이 끝났는지 여부를 나타냅니다.
우리도 포...of 반복자:

for (let i of entries) {

  console.log(i)

} // [0, 1]、[1, 2]、[2, 3]

for (let [index, value] of entries) { console.log(index, value) } // 0 1、1 2、2 3

for (let key of keys) { console.log(key) } // 0, 1, 2

for (let value of values) { console.log(value) } // 1, 2, 3

Array.prototype.copyWithin()

copyWithin() 메소드 구문은 다음과 같습니다.

arr.copyWithin(target, start, end = this.length)

마지막 매개 변수는 선택할 수 있는 매개 변수이고, 생략하면 그룹 길이입니다.이 방법은 start (start 포함) 위치에서 end (end 포함하지 않음) 위치로 그룹 요소를 복사해서 target을 시작하는 위치로 덮어씁니다.예:

[1, 2, 3, 4].copyWithin(0, 1) // [2, 3, 4, 4]



[1, 2, 3, 4].copyWithin(0, 1, 2) // [2, 2, 3, 4]

start, end 매개 변수가 음수이면 배열 길이와 해당 매개 변수를 사용하여 적절한 위치를 결정합니다.

[1, 2, 3, 4].copyWithin(0, -2, -1) // [3, 2, 3, 4]

copyWithin () 은 배열 자체를 변경하고 원래 배열의 복사본을 되돌려 주는 것이 아니라 변경된 배열을 되돌려 줍니다.

배열 유도(array comprehensions)

수조 추측은 for를 이용하는 것이다.of 순환은 기존의 그룹을 바탕으로 새로운 그룹을 생성합니다.예:

[for (i of [1, 2, 3]) i * i]  // [1, 4, 9]

배열 유도에서는 if문을 사용할 수 있습니다.

//  if 

[for (i of [1, 2, 3]) if (i < 3) i] // [1, 2]



// if 

[for (i of [1, 2, 3]) if (i < 3) if (i > 1) i] // [2]

주의해야 할 것은 포...of는 항상 맨 앞에 쓴다.
그룹 유도도 다중 for 사용을 허용합니다.of 주기:

[for (i of [1, 2, 3]) for (j of [4, 5, 6]) i * j] // [4, 5, 6, 8, 10, 12, 12, 15, 18]

배열 유도에는 다음과 같은 배열 유도도 포함될 수 있습니다.

[for (i of [1, 2, 3]) [for (j of [4, 5, 6]) i * j]] // [[4, 5, 6], [8, 10, 12], [12, 15, 18]]

 
ES6에 대한 다양한 브라우저의 지원은 4kangax.github.io/es5-compat-table/es6/