이 기사는 ECMAScript 6을 소개하면 새로운 배열 작동 방법과 기존 브라우저에 이러한 새로운 배열 기능을 적용하는 방법을 소개합니다.
참고 : 제작자와 클래스라는 용어를 교대로 사용합니다.
수업 방법
배열 자체가 가지고있는 방법.
array.from (배열, mapfunc?, thisarg?)
array.from ()의 기본 함수는 두 가지 유형의 객체를 배열로 변환하는 것입니다.
어레이와 같은 객체
이 클래스의 객체에는 길이와 색인의 특성이 있습니다. DOM 연산자의 결과는 Document.GetElementsByClassName ()과 같은이 클래스에 속합니다.
반복 가능한 물체
값을 취할 때 한 번에 하나의 요소 만 가져갈 수 있습니다. 새로운 배열 구조,지도 (맵) 및 세트 (세트)와 같이 배열은 반복 가능합니다.
다음 코드는 배열 객체를 배열로 변환하는 예입니다.
코드 사본은 다음과 같습니다.
LIS = Document.querySelectorall ( 'Ul.Fancy Li');
array.from (lis) .foreach (function (li) {
Console.log (노드);
});
QuerySelectorALL ()의 결과는 배열이 아니며 each () 방법이 없습니다. 그렇기 때문에이 방법을 사용하기 전에이 방법을 배열로 변환해야합니다.
array.from ()을 통한 매핑 사용
Array.from ()은 또한 map ()를 사용하는 제네릭의 대안입니다.
코드 사본은 다음과 같습니다.
spans = document.querySelectorall ( 'span.name');
// 일반적으로 map () :
let names1 = array.prototype.map.call (spans, s => s.textContent);
// array.from () :
let names2 = array.from (spans, s => s.textContent);
두 가지 방법의 두 번째 매개 변수는 화살표 함수입니다.
이 예에서는 document.querySelectorALL ()의 결과는 배열이 아닌 다른 클래스 배열 객체입니다. 이것이 우리가 Map ()를 직접 호출 할 수없는 이유입니다. 첫 번째 예에서는 foreach ()를 사용하기 위해 클래스 배열 객체를 배열로 변환합니다. 여기서 우리는 일반적인 방법과 배열의 2 파라미터 버전을 통해 중간 단계를 생략합니다.
구멍
Array.from ()은 누락 된 요소를 무시합니다 - 배열의 구멍은 정의되지 않은 요소로 취급됩니다.
코드 사본은 다음과 같습니다.
> array.from ([0,, 2])
[0, 정의되지 않은, 2]
즉, Array.from ()을 사용하여 배열을 작성하거나 채울 수 있습니다.
코드 사본은 다음과 같습니다.
> array.from (새 배열 (5), () => 'a')
[ 'a', 'a', 'a', 'a', 'a', 'a']]]]
> array.from (새 배열 (5), (x, i) => i)
[0, 1, 2, 3, 4]
고정 값으로 배열을 채우려면 array.prototype.fill () (아래 참조)이 더 나은 선택이됩니다. 첫 번째는 위의 예의 두 가지 방법입니다.
배열 (배열) 서브 클래스에서 ()에서
Array.from ()에 대한 또 다른 사용 시나리오는 배열 개체 또는 반복 가능한 개체의 인스턴스를 배열 서브 클래스로 변환하는 것입니다. 배열 서브 클래스 MyArray를 생성 하고이 유형의 객체를 MyArray 인스턴스로 변환하려면 myArray.from ()을 간단히 사용할 수 있습니다. 이것이 사용될 수있는 이유는 ECMAScript에서 6 생성자가 상속되기 때문입니다 (부모 클래스 생성자는 서브 클래스 생성자의 프로토 타입입니다).
코드 사본은 다음과 같습니다.
클래스 myArray 확장 배열 {
...
}
instanceofmyArray = myArray.from (aniterable);
이 기능을 맵핑과 결합하여 결과 생성자를 제어하는 맵 작동을 완료 할 수 있습니다.
코드 사본은 다음과 같습니다.
// ()에서 수신기를 통해 결과의 생성자를 결정합니다
// (이 경우, myArray)
instanceofmyArray = myArray.from ([1, 2, 3], x => x * x);
// map () : 결과는 항상 배열 인스턴스입니다.
instanceofarray = [1, 2, 3] .map (x => x * x);
Array.of (... 아이템)
값 세트를 배열로 변환하려면 배열 소스 텍스트 (Array Literal)를 사용해야합니다. 특히 값이 하나만 있고 숫자 일 때 배열의 생성자는 스트라이크가 진행됩니다. 자세한 내용은 참조하십시오.
코드 사본은 다음과 같습니다.
> 새로운 배열 (3, 11, 8)
[3, 11, 8]
> 새로운 배열 (3)
[,,]
> 새로운 배열 (3.1)
RangeError : 잘못된 배열 길이
따라서 값 세트를 하위 구성자인 인스턴스로 변환하려면 어떻게해야합니까? 이것은 ()의 array.of ()의 값입니다 (배열 하위 구성자는 물론 ()를 포함하여 모든 배열 메소드를 상속합니다).
코드 사본은 다음과 같습니다.
클래스 myArray 확장 배열 {
...
}
Console.log (MyArray.of (3, 11, 8) MyArray의 인스턴스); // 진실
console.log (myarray.of (3) .length === 1); // 진실
Array.of ()는 Array ()를 처리하는 이상한 방법없이 배열에서 값을 랩핑하는 데 매우 편리합니다. 또한 Array.prototype.map ()에주의를 기울이면 여기에는 구덩이가 있습니다.
코드 사본은 다음과 같습니다.
> [ 'a', 'b'].지도 (Array.of)
[[ 'a', 0, [ 'a', 'b'],
[ 'b', 1, [ 'a', 'b']]]]]
> [ 'a', 'b']. map (x => array.of (x)) //
[[ 'a'], [ 'b']]]
> [ 'a', 'b']. map (x => [x]) // best (이 경우)
[[ 'a'], [ 'b']]]
보시다시피 Map ()는 콜백에 세 가지 매개 변수를 전달합니다. 마지막 두 가지는 종종 간과됩니다 (세부 사항).
프로토 타입 방법
배열 인스턴스에 사용할 수있는 많은 새로운 방법이 있습니다.
배열을 반복합니다
다음 방법은 배열에서 반복을 완료하는 데 도움이됩니다.
코드 사본은 다음과 같습니다.
Array.prototype.entries ()
Array.prototype.keys ()
Array.prototype.values ()
위의 각 방법은 일련의 값을 반환하지만 배열로 리턴되지 않습니다. 그들은 반복자를 통해 하나씩 하나씩 표시됩니다. 예제를 살펴 보겠습니다 (iterator의 내용을 배열을 사용하여 배열에 넣습니다.
코드 사본은 다음과 같습니다.
> array.from ([ 'a', 'b'] .keys ())
[0, 1]
> array.from ([ 'a', 'b'] .Values ())
[ 'a', 'b']
> array.from ([ 'a', 'b'] .entries ())
[[0, 'a'],
[1, 'b']]
ECMAScript 6의 entries () 및 for-of 루프를 결합하여 반복 객체를 키 값 쌍으로 쉽게 분해 할 수 있습니다.
코드 사본은 다음과 같습니다.
for ([index, elem]의 [ 'a', 'b']. entries ()) {
Console.log (색인, elem);
}
참고 :이 코드는 이미 최신 Firefox 브라우저에서 실행할 수 있습니다. T Firefox.
배열 요소를 찾으십시오
Array.prototype.Find (Presctice, Thisarg?)는 콜백 함수를 만족시키는 첫 번째 요소를 반환합니다. 요소가 조건을 만족시키지 않으면 정의되지 않은 반환됩니다. 예를 들어:
코드 사본은 다음과 같습니다.
> [6, -5, 8] .find (x => x <0)
-5
> [6, 5, 8] .find (x => x <0)
한정되지 않은
Array.prototype.findindex (Presctice, Thisarg?)
콜백 함수를 만족시키는 첫 번째 요소의 인덱스를 반환합니다. 만족스러운 요소가 없으면 -1이 반환됩니다. 예를 들어:
코드 사본은 다음과 같습니다.
> [6, -5, 8] .findindex (x => x <0)
1
> [6, 5, 8] .findindex (x => x <0)
-1
두 가지 찾기 방법은 구멍을 무시합니다. 즉, 정의되지 않은 요소에주의를 기울이지 않습니다. 콜백의 완료 함수 서명은 다음과 같습니다.
술어 (요소, 인덱스, 배열)
findIndex ()를 통해 NAN 찾기
Array.prototype.indexof ()는 잘 알려진 한계가 있습니다. 즉, NAN을 찾을 수 없습니다. 일치하는 요소를 찾기 위해 정체성 (===)을 사용하기 때문에 :
코드 사본은 다음과 같습니다.
> [NAN] .Indexof (Nan)
-1
findIndex ()를 사용하면 Object.is ()를 사용할 수 있습니다.이 문제는 다음과 같습니다.
코드 사본은 다음과 같습니다.
> [nan] .findIndex (y => object.is (nan, y))
0
보다 일반적인 방법을 사용하여 헬퍼 함수 Elemis ()를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
> 함수 elemis (x) {return object.is.bind (object, x)}}
> [NAN] .FindIndex (Elemis (NAN))
0
array.prototype.fill (값, 시작?, 끝?)
주어진 값을 사용하여 배열을 채우십시오.
코드 사본은 다음과 같습니다.
> [ 'a', 'b', 'c']. 채우기 (7)
[7, 7, 7]
구멍은 특별한 치료로 치료되지 않습니다.
코드 사본은 다음과 같습니다.
> 새 배열 (3) .fill (7)
[7, 7, 7]
필의 시작과 끝을 제한 할 수도 있습니다.
코드 사본은 다음과 같습니다.
> [ 'a', 'b', 'c']. 채우기 (7, 1, 2)
[ 'a', 7, 'c']
새 배열 방법은 언제 사용할 수 있습니까?
브라우저에는 사용할 수있는 몇 가지 방법이 있습니다.