JavaScript ES6의 Array.from 사용법

ES6에서는 다른 객체를 배열로 변환하기 위해 from 함수를 Array에 추가합니다.

물론 다른 개체에도 요구 사항이 있으며 모든 개체를 배열로 변환할 수는 없습니다.

1. Set, Map, Array와 같은 Iterator 인터페이스를 사용하여 객체를 배포합니다.

2. 배열 유사 객체란 무엇입니까? 이는 객체에 길이 속성이 있어야 함을 의미하며 결과는 빈 배열입니다.

​

Map 변환

Map 객체의 키-값 쌍을 1차원 배열로 변환합니다.

실제로 변환된 배열 요소의 순서는 key1, value1, key2, value2, key3, value3입니다....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

결과:

k1,1,k2,2,k3,3

Convert set

Set 개체의 요소를 변환합니다. 배열로.

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

Result

1,2,3

Convert string

ASCII 문자열을 데이터로 분해할 수 있고, 유니코드 문자열을 배열로 정확하게 분해할 수도 있습니다.

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

결과:

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

Array-like object

배열 유사 객체는 길이를 가져야 하며 해당 요소 속성 이름은 숫자 값 또는 숫자 값으로 변환할 수 있는 문자여야 합니다.

참고: 속성 이름은 배열의 인덱스 번호를 나타냅니다. 해당 인덱스 번호가 없으면 전송된 배열의 해당 요소가 비어 있게 됩니다.

console.log('%s', Array.from({  0: '0',  1: '1',  3: '3',
  length:4}))

결과:

0,1,,3

객체에 길이 속성이 없으면 빈 배열로 변환됩니다.

console.log('%s', Array.from({  0: 0,  1: 1}))

결과는 빈 배열입니다.

객체의 속성 이름을 인덱스 번호로 변환할 수 없는 경우.

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2}))

결과도 빈 배열입니다

Array.from은 세 개의 매개변수를 받을 수 있습니다

정의를 살펴보겠습니다.

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike: 변환된 객체.

mapFn: 지도 기능.

thisArg: 지도 함수에서 this가 가리키는 객체입니다.

두 번째 매개변수인 맵 함수

는 변환 시 각 요소를 처리하는 데 사용되며, 처리된 결과는 결과 배열의 요소 값으로 사용됩니다.

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

결과:

위의 지도 함수는 실제로 배열의 각 값에 1을 더합니다.

2,3,4,5,6

세 번째 매개변수는 맵 함수에서 이 매개변수가 가리키는 객체

이 매개변수는 처리된 데이터와 처리 객체를 분리하고, 데이터를 처리하는 다양한 방법을 캡슐화할 수 있어 매우 유용합니다. , 처리 방법은 동일한 이름을 사용합니다.

Array.from을 호출하여 데이터 객체를 변환할 때 실제 상황에 따라 다양한 처리 객체를 주입하여 다양한 결과를 얻을 수 있으며 이는 디커플링에 적합합니다.

이 접근 방식은 템플릿 디자인 패턴을 적용한 것으로 의존성 주입과 다소 유사합니다.

let diObj = n + 2'%s'1, 2, 3, 4, 5

결과:

3,4,5,6,7

위 내용은 JavaScript ES6의 Array.from 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!