ECMAScript 6은 곧 새로운 배열 작업 방법_javascript 기술의 미리보기를 제공할 예정입니다.

이 기사에서는 ECMAScript 6이 가져올 새로운 배열 작업 방법과 이러한 새로운 배열 기능을 기존 브라우저에 적용하는 방법을 소개합니다.

참고: 생성자와 클래스라는 용어를 같은 의미로 사용하겠습니다.

수업방식
Array 자체가 소유한 메서드입니다.

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

Array.from()의 기본 기능은 두 가지 유형의 객체를 배열로 변환하는 것입니다.

배열형 객체

이 유형의 객체에는 길이 및 인덱스 속성이 있습니다. DOM 연산자의 결과는 document.getElementsByClassName()과 같은 이 클래스에 속합니다.

반복 가능한 객체

이 유형의 객체는 값을 가질 때 한 번에 하나의 요소만 가질 수 있습니다. 배열은 ECMAScript, Map 및 Set의 새로운 배열 구조와 마찬가지로 반복 가능합니다.

다음 코드는 배열 유사 객체를 배열로 변환하는 예입니다.

코드 복사 코드는 다음과 같습니다.

let lis = document.querySelectorAll('ul.fancy li');
Array.from(lis).forEach(함수 (li) {
console.log(노드);
});

querySelectorAll()의 결과는 배열이 아니며 forEach() 메서드가 없습니다. 이것이 이 메서드를 사용하기 전에 배열로 변환해야 하는 이유입니다.

Array.from()을 통한 매핑 사용
Array.from()은 제네릭과 함께 map()을 사용하는 대신 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

let 스팬 = 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()를 사용하기 위해 배열 유사 객체를 배열로 변환합니다. 여기서는 일반적인 방법과 Array.from()의 두 매개변수 버전을 사용하여 중간 단계를 제거합니다.

구멍
Array.from()은 배열에서 누락된 요소(구멍)를 무시하고 정의되지 않은 요소로 처리합니다.

코드 복사 코드는 다음과 같습니다.

>Array.from([0,,2])
[ 0, 정의되지 않음, 2 ]

이는 Array.from()을 사용하여 배열을 생성하거나 채울 수 있음을 의미합니다.

코드 복사 코드는 다음과 같습니다.

> Array.from(new Array(5), () => 'a')
[ 'a', 'a', 'a', 'a', 'a' ]
> Array.from(new Array(5), (x,i) => i)
[ 0, 1, 2, 3, 4 ]

고정 값으로 배열을 채우려면 Array.prototype.fill()(아래 참조)이 더 나은 선택이 될 것입니다. 첫 번째는 위 예의 두 가지 방법입니다.

배열 하위 클래스의

from()
Array.from()의 또 다른 사용 사례는 배열 유사 객체 또는 반복 가능 객체를 배열(Array) 하위 클래스의 인스턴스로 변환하는 것입니다. Array 하위 클래스 MyArray를 만들고 해당 객체를 MyArray의 인스턴스로 변환하려는 경우 간단히 MyArray.from()을 사용하면 됩니다. 이것이 사용될 수 있는 이유는 ECMAScript 6에서 생성자가 상속되기 때문입니다(부모 클래스 생성자는 하위 클래스 생성자의 프로토타입입니다).

코드 복사 코드는 다음과 같습니다.

MyArray 클래스는 Array를 확장합니다. {
...
}
letinstanceOfMyArray = MyArray.from(anIterable);

이 기능을 매핑과 결합하여 결과 생성자를 제어하는 ​​위치에서 매핑 작업을 완료할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// from() – 수신자를 통해 결과의 생성자를 결정합니다
// (이 경우 MyArray)
let instanceOfMyArray = MyArray.from([1, 2, 3], x => x * x);
// map(): 결과는 항상 Array
의 인스턴스입니다. let instanceOfArray = [1, 2, 3].map(x => x * x);
Array.of(...항목)

값 집합을 배열로 변환하려면 배열 리터럴을 사용해야 합니다. 특히 값이 하나뿐이고 숫자인 경우 배열 생성자가 실패합니다. 자세한 내용은 이 페이지를 참조하세요.

코드 복사 코드는 다음과 같습니다.

> 새로운 배열(3, 11, 8)
[ 3, 11, 8 ]
> 새로운 배열(3)
[ , , ,]
> 새로운 배열(3.1)
RangeError: 잘못된 배열 길이

값 집합을 숫자 하위 생성자의 인스턴스로 변환하려면 어떻게 해야 하나요? 이는 Array.of()의 값입니다(배열 하위 생성자는 물론 of()를 포함한 모든 배열 메서드를 상속한다는 점을 기억하세요).

코드 복사 코드는 다음과 같습니다.

MyArray 클래스는 Array를 확장합니다. {
...
}
console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true
console.log(MyArray.of(3).length === 1) // true

Array.of()는 Array()와 같은 이상한 처리 방법 없이 배열의 값을 래핑하고 중첩하는 데 매우 편리합니다. 하지만 Array.prototype.map()에도 주의를 기울이세요. 여기에는 함정이 있습니다.

코드 복사 코드는 다음과 같습니다.

> ['a', 'b'].map(Array.of)
[ [ 'a', 0, [ 'a', 'b' ] ],
[ 'b', 1, [ 'a', 'b' ] ] ]
> ['a', 'b'].map(x => Array.of(x)) // 더 좋습니다
[ [ 'a' ], [ 'b' ] ]
> ['a', 'b'].map(x => [x]) // 최고(이 경우)
[ [ 'a' ], [ 'b' ] ]

보시다시피 map()은 세 개의 매개변수를 콜백에 전달합니다. 마지막 두 가지는 종종 간과됩니다(세부 사항).

프로토타입 방법
배열 인스턴스에 대해 많은 새로운 메서드를 사용할 수 있습니다.

배열 반복

다음 방법은 배열에서 반복을 완료하는 데 도움이 됩니다.

코드 복사 코드는 다음과 같습니다.

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' ] ]

Entry()를 ECMAScript 6의 for-of 루프와 결합하여 반복된 객체를 키-값 쌍으로 쉽게 분해할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

참고: 이 코드는 이미 최신 Firefox 브라우저에서 실행될 수 있습니다. t 파이어폭스.

배열 요소 찾기

Array.prototype.find(predicate, thisArg?)는 콜백 함수를 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 정의되지 않음을 반환합니다. 예:

코드 복사 코드는 다음과 같습니다.

> [6, -5, 8].find(x => x < 0)
-5
> [6, 5, 8].find(x => x < 0)
정의되지 않음
Array.prototype.findIndex(predicate, thisArg?)

은 콜백 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족스러운 요소가 발견되지 않으면 -1이 반환됩니다. 예:

코드 복사 코드는 다음과 같습니다.

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

두 find* 메소드 모두 구멍을 무시합니다. 즉, 정의되지 않은 요소에는 주의를 기울이지 않습니다. 콜백의 완성 함수 서명은 다음과 같습니다.

술어(요소, 인덱스, 배열)
findIndex()를 통해 NaN

을 찾습니다.

Array.prototype.indexOf()에는 NaN을 찾을 수 없다는 잘 알려진 제한 사항이 있습니다. 일치하는 요소를 찾기 위해 ID(===)를 사용하기 때문입니다.

코드 복사 코드는 다음과 같습니다.

> [NaN].indexOf(NaN)
-1

findIndex()를 사용하면 Object.is()를 사용할 수 있는데, 이는 이러한 문제를 일으키지 않습니다.

코드 복사 코드는 다음과 같습니다.

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

보다 일반적인 접근 방식을 사용하여 도우미 함수 elemIs()를 만들 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

> function elemIs(x) { return Object.is.bind(Object, x) }
> [NaN].findIndex(elemIs(NaN))
0
Array.prototype.fill(값, 시작?, 끝?)

주어진 값으로 배열 채우기:

코드 복사 코드는 다음과 같습니다.

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

홀은 특별한 대우를 받지 않습니다.

코드 복사 코드는 다음과 같습니다.

> 새로운 배열(3).fill(7)
[ 7, 7, 7 ]

채우기 시작과 끝을 제한할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

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

새로운 배열 방식은 언제 사용할 수 있나요?
일부 방법은 이미 브라우저에서 사용할 수 있습니다.