ES6 입문 튜 토리 얼 의 Array.from()방법

머리말
ES6 는 Array 에 from 함 수 를 추가 하여 다른 대상 을 배열 로 변환 합 니 다.
물론 다른 대상 도 요구 가 있 고 모든 것 이 아니 라 두 대상 을 배열 로 바 꿀 수 있다.
1.Iterator 인터페이스의 대상 을 배치 했다.예 를 들 어 Set,Map,Array.
2.클래스 배열 대상,클래스 배열 대상 이 라 니 요?한 대상 은 length 속성 이 있어 야 합 니 다.length 가 없 으 면 빈 배열 로 전 환 됩 니 다.
Array.from()방법 은 하나의 배열 대상 이나 옮 겨 다 닐 수 있 는 대상 을 진정한 배열 로 바 꾸 는 것 이다.
그렇다면 클래스 배열 대상 은 무엇 일 까?클래스 배열 대상 이란 가장 기본 적 인 요 구 는 length 속성 을 가 진 대상 이다.
1.클래스 배열 대상 을 실제 배열 로 변환 합 니 다.

let arrayLike = {
 0: 'tom', 
 1: '65',
 2: ' ',
 3: ['jane','john','Mary'],
 'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65',' ',['jane','john','Mary']]

그렇다면 위의 코드 에서 length 속성 을 제거 하면?정 답 은 길이 가 0 인 빈 배열 임 을 증명 한다.
여기 서 코드 를 다시 바 꾸 면 length 속성 이 있 지만 대상 의 속성 명 은 더 이상 숫자 형식 이 아니 라 다른 문자열 형 입 니 다.코드 는 다음 과 같 습 니 다.

let arrayLike = {
 'name': 'tom', 
 'age': '65',
 'sex': ' ',
 'friends': ['jane','john','Mary'],
 length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]

결 과 는 길이 가 4 이 고 요소 가 모두 undefined 인 배열 임 을 발견 할 수 있 습 니 다.
이 를 통 해 알 수 있 듯 이 하나의 배열 대상 을 진정한 배열 로 바 꾸 려 면 다음 과 같은 조건 을 가 져 야 한다.
1.이 배열 의 대상 은 length 속성 을 가지 고 배열 의 길 이 를 지정 해 야 합 니 다.length 속성 이 없 으 면 변환 한 배열 은 빈 배열 입 니 다.
2.이러한 배열 대상 의 속성 명 은 수치 형 이나 문자열 형의 숫자 여야 합 니 다.
이러한 배열 대상 의 속성 명 은 따옴표 를 추가 할 수도 있 고 따옴표 를 추가 하지 않 을 수도 있다.
2.Set 구조의 데 이 터 를 진정한 배열 로 변환 합 니 다.

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from 은 두 번 째 인 자 를 받 아들 일 수 있 습 니 다.배열 과 유사 한 map 방법 으로 모든 요 소 를 처리 하고 처리 한 값 을 되 돌아 오 는 배열 에 넣 을 수 있 습 니 다.
다음 과 같다.

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

1~20 개의 배열 을 빠르게 만 듭 니 다.

Array.from({length:20},(t,i)=>i+1)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

아 날로 그 생 성 1 만 개 데이터

//      1    ，    Array.from        
const originNews = Array.from(
 { length: 10000 },
 (v, k) => ({ content: `  ${k}` })
)

3.문자열 을 배열 로 변환 합 니 다:

let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

4.Array.from 인 자 는 진정한 배열 입 니 다.

console.log(Array.from([12,45,47,56,213,4654,154]))

이 경우 Array.from 은 똑 같은 새 배열 로 돌아 갑 니 다.
배열 을 지정 한 크기 로 나 누 면 페이지,데이터 절단,비동기 작업 데이터 에 사용 할 수 있 습 니 다.

const chunk = (arr, size) =>
 Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
 arr.slice(i * size, i * size + size)
 );

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.