#array.from

Array.from simplifies array conversion by providing one simple interface to turn objects that can be iterated through to arrays. Normally, separate operations are required for different types:

const str = 'test'; const strArray = str.split(''); const printArguments = function() { console.log([].slice.call(arguments)); } console.log(strArray); // [ 't', 'e', 's', 't' ] printArguments('test1', 'test2', 'test3'); // [ 'test1', 'test2', 'test3' ]

This is simplified with Array.from:

const strArray2 = Array.from(str); const printArguments2 = function() { console.log(Array.from(arguments)); } console.log(strArray); // [ 't', 'e', 's', 't' ] printArguments('test1', 'test2', 'test3'); // [ 'test1', 'test2', 'test3' ]

It is also useful for new ES6 Objects like Set and Map:

const map1 = new Map([['property1', 'value1'], ['property2', 'value2']]); const set1 = new Set(['test1', 'test2', 'test1', 'test3']); const map1Str = Array.from(map1); const set1Str = Array.from(set1); console.log(map1Str); // [ [ 'property1', 'value1' ], [ 'property2', 'value2' ] ] console.log(set1Str); // [ 'test1', 'test2', 'test3' ]

Browser support is good other than there is no IE support, only MS Edge. MDN has a polyfill that can help in that case.

The simplist way to make an array unique, is to transform it into a Set since all values in Sets are unique:

const arr = [1, 4, 10, 4, 4, 7, 8, 10]; const uniqueValues = Array.from(new Set(arr)); console.info(uniqueValues); // [ 1, 4, 10, 7, 8 ]

I found this technique from this Stack Overflow answer. Although this technique is inefficient, it is a quick way to get unique values of small arrays (e.g. less than 100 items). It also does not deal with objects like Date or custom objects when they are directly added to an array since Set only compares object references and not values for equality:

const objects = [ { property1: 'value1' }, { property2: 'value2' }, { property3: 'value3' }, { property1: 'value1' }, ]; const uniqueObjects = Array.from(new Set(objects)); console.info(uniqueObjects); // [ { property1: 'value1' }, // { property2: 'value2' }, // { property3: 'value3' }, // { property1: 'value1' } ]

Instead the objects need to be added by reference into an Array:

const obj1 = { property1: 'value1' }, obj2 = { property2: 'value2' }, obj3 = { property3: 'value3' }; const objects2 = [obj1, obj2, obj1, obj3]; const uniqueObjects2 = Array.from(new Set(objects2)); console.info(uniqueObjects2); // [ { property1: 'value1' }, // { property2: 'value2' }, // { property3: 'value3' } ]

In terms of a more efficient solution, it is better to rely on libraries. Lodash has a uniqBy function for this: https://lodash.com/docs/4.17.10#uniqBy

ECMAScript6’s new array methods

1. Class methods

배열은 그 자진의 메소드를 얻는 상태이다.

1.1 Array.from(arrayLike, mapFunc?, thisArg?)

Array.from()의 기본 함수형 이다 바꾼다 두개의 객체의 종류 배열에서 :

Array-like obejcts는 아마도 length와 elements의 인덱스를 가지고 있다. 예를 들어 불러온다 DOM 연산자의 결과를 각각 document.getElementsByClassName()는

Iterable object의 컨텐츠는 검색되어 올 수 있다 하나의 element에서 정시에. Arrays는 iterable이다, ECMAScript’s의 새로운 데이터 구조 Map과 Set.

다음의 코드는 예제이다 바꾸는 array-like 객체의 배열에서:

let lis = document.querySelectorAll('ul.fancy li'); Array.from(lis).forEach(function (li) { console.log(node); });

querySelectorAll()의 결과는 배열이 아니고, 가지고 있지 않다 forEach()메소드를, 그것의 이다 왜 우리가 필요한지 바꾸기 위해 그것을 배열에서 전에 우리는 저 메소드를 사용할 수 있다.

Array.from은 허락한다. 당신이 조절 하기를 생성자 그것을 그것의 결과를 위해 사용하는. 예를 들어 만약에 당신이 만들고 서브클래스 배열의 자신 배열 그리고 원하면 바꾸길 몇가지 array-like 또는 iterable을 그것을 대신해서, 당신은 단순하게 Myarray.from()를 사용한다. 이유는 저것은 일한다 생성자를 상속 각각 다른 곳에서 ECMAScript6(수퍼생성자는 서브 생성자의 프로토타입이다.)

class MyArray extends Array { ... } let instanceOfMyArray = MyArray.from(anIterable);

지금 우리는 볼 수 있다 왜 mapFunc의 파라미터는 효율적이다: 그것은 Array.from()을 만들고 Array.prototype.map()의 변종 결과를 생산하고 그것의 생성자는 당신은 명시할수 있다(생성자를 통해 from()의 불러오다):

let instanceOfMyArray = MyArray.from([1, 2, 3], x => x * x); let instanceOfArray = [1, 2, 3].map(x => x * x);

두 메소드의 파라미터(마지막) arrow function이다.

1.2 Array.of(…items)

만약 당신이 원하면 돌아오길 몇가지 값들이 배열의, 당신은 array literal을 항상 사용한다, 특히 array constructor을 까지 아마 일하지 않는다 만약에 거기에 싱글 값이 숫자이다 ( 더 많은 정보는 별나다 )

> new Array(3, 11, 8) [ 3, 11, 8 ] > new Array(3) [ , , ,] > new Array(3.1) RangeError: Invalid array length

그러나 어떻게 지원되어질까 당신은 되돌아 오는 배열의 sub-constructor를 대신한 값들? 이것은 이다/Array.of()의 도움(기억하자 배열 메소드의 모든 상속의 배열 sub-constructor는 including of()).

class MyArray extends Array { ... } console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true console.log(MyArray.of(3).length === 1); // true

Array.of()는 또한 유용하다 함수만큼 가지고 가지고 있지 않다 배열의 변덕은 배열에서 포장 값과 관련있다. 그러나, Array.prototype.map()의 대한 호기심은 당신을 여기서 실수 할 수 있다.

> ['a', 'b'].map(Array.of) [ [ 'a', 0, [ 'a', 'b' ] ], [ 'b', 1, [ 'a', 'b' ] ] ] > ['a', 'b'].map(x => Array.of(x)) // better [ [ 'a' ], [ 'b' ] ] > ['a', 'b'].map(x => [x]) // best (in this case) [ [ 'a' ], [ 'b' ] ]

당신이 위를 본다면, map()은 그것의 callback의 3가지 파라미터들을 통과시켰다, 마지막 두개는 단순히 종종 무시된다

2. Prototype methods

몇개의 새로운 메소드는 배열의 인스턴스들이 가능하다.

2.1 Iterating over arrays

다음 메소드들은 배열들의 반복에서 돕니다.

Array.prototype.entries()

Array.prototype.keys()

Array.prototype.values()

앞서 언급한 메소드의 각 결과는 값의 연속이다, 그러나 그들은 배열만큼 되돌아 오지 않는다; 그들은 하나에 의해 하나가 드러난다, 연산자를 통해. 예제를 보자(나는 Array.from()을 사용중이다. (배열에서 연산자의 컨텐츠를 넣기위해)

> Array.from([ 'a', 'b' ].keys()) [ 0, 1 ] > Array.from([ 'a', 'b' ].values()) [ 'a', 'b' ] > Array.from([ 'a', 'b' ].entries()) [ [ 0, 'a' ],[ 1, 'b' ] ]

당신은 entries()와 ECMAScrip6의 for-of loop에서 결합 할 수 있고 (index, element) 한 쌍으로 편리한 연산을 파헤칠 수 있다.

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

이 코드는 현재 파이어폴스에는 벌써 적용됐다.

2.2 Searching for array elements

Array.prototype.find(predicate, thisArg?)는 되돌아 온다 첫번째 배열 엘리먼트가 위한 callback predicate의 true 되돌린다. 만약에 거기에 각 엘리먼트가 없다면 그것은 undefined를 되돌릴 것이다. 예제:

> [6, -5, 8].find(x => x < 0) -5 > [6, 5, 8].find(x => x < 0) undefined

Array.prototype.findIndex(predicate, thisArg?)는 돌아온다 첫번째 엘리먼트의 인덱스가 callback predicate는 true를 리턴한다. 만약 거기에 엘리먼트가 없다면, 그것은 -1을 리턴한다. 예제:

> [6, -5, 8].findIndex(x => x < 0) 1 > [6, 5, 8].findIndex(x => x < 0) -1

두개의 find* 메소드는 holes를 무시한다. 전체 콜백 predicate의 시그니처이다.

predicate(element, index, array)

findIndex()를 통해 NaN을 찾는 중이다.

잘 안다 Array.prototype.indexOf의 리미테이션은 NaN을 찾을 수 없는 것이다. 때문에 그것은 ‘===’를 통해 엘리먼트를 위해 찾는다.

[NaN].indexOf(NaN) -1

findIndex()와 같이, 당신은 Object.is()[4]를 사용하고 각 문제가 없을 것이다.

> [NaN].findIndex(y => Object.is(NaN, y)) 0

당신은 또한 쓸수 있다 더 일반적인 접근으로, 함수 elemIs()의 도운자를 만듬에 의해:

> function elemIs(x) { return Object.is.bind(Object, x) } > [NaN].findIndex(elemIs(NaN)) 0

2.3 Array.prototype.fill(value, start?, end?)

주어진 값으로 배열을 채우자고요

> ['a', 'b', 'c'].fill(7) [ 7, 7, 7 ]

3번째는 특별히 치료를 받을 수 없다.

> new Array(3).fill(7) [ 7, 7, 7 ]

자율적으로, 당신은 제한 할 수 있다 시작과 끝을 포만하다

> ['a', 'b', 'c'].fill(7, 1, 2) [ 'a', 7, 'c' ]

언제 할 수있다 나는 새로운 배열을 사용할 수 있나요?

그들의 몇가지 것들은 브라우저에서 벌써 가능하고. 흔하게도 kangax의 ECMAScript 6 compatibillty table’ 체크하자 [es6-shiml] [http://kangax.github.io/compat-table/es6/]

Paul Miller의 es6-shim library ECMAScript5에서 그것을 backport 가질수 있다.

References

1.Subclassing builtins in ECMAScript 6

2.Iterators and generators in ECMAScript 6

3.“Holes in Arrays” (Speaking JavaScript)

4.Stricter equality in JavaScript

번역전 블로그