ECMAScript6's new array methods
ECMAScript6’s new array 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이다.
만약 당신이 원하면 돌아오길 몇가지 값들이 배열의, 당신은 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.1 Iterating over arrays
Array.prototype.entries()
앞서 언급한 메소드의 각 결과는 값의 연속이다, 그러나 그들은 배열만큼 되돌아 오지 않는다; 그들은 하나에 의해 하나가 드러난다, 연산자를 통해. 예제를 보자(나는 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을 찾을 수 없는 것이다. 때문에 그것은 ‘===’를 통해 엘리먼트를 위해 찾는다.
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 ]
> 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 가질수 있다.
1.Subclassing builtins in ECMAScript 6
2.Iterators and generators in ECMAScript 6
3.“Holes in Arrays” (Speaking JavaScript)
4.Stricter equality in JavaScript
‘http://www.2ality.com/2014/05/es6-array-methods.html‘
