홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

es6에서 객체를 배열로 변환하는 방법

저자：Eve Cole 업데이트 시간：2022-08-02 09:31:19

es6에서는 Array 객체의 from() 메소드를 사용하여 객체를 배열로 변환할 수 있습니다. 이 메소드는 배열과 유사한 객체나 탐색 가능한 객체를 실제 배열로 변환할 수 있습니다. 구문은 "Array.from(object; )".

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

es6에서는 Array 객체의 from() 메서드를 사용하여 객체를 배열로 변환할 수 있습니다.

Array.from() 메소드는 배열형 객체나 탐색 가능한 객체를 실제 배열로 변환합니다.

그렇다면 배열형 객체란 무엇일까요? 소위 배열형 객체에 대한 가장 기본적인 요구 사항은 길이 속성을 가진 객체입니다.

1. 유사 배열 객체를 실제 배열로 변환:

let arrayLike = {
    0: '톰',  
    1: '65',
    2: '남성',
    3: ['제인','존','메리'],
    '길이': 4
}
arr = Array.from(arrayLike) 하자
console.log(arr) // ['tom','65','M',['jane','john','Mary']]

그렇다면 위 코드에서 길이 속성을 제거하면 어떻게 될까요? 연습을 통해 답은 길이가 0인 빈 배열이 될 것이라는 것이 입증되었습니다.

코드를 다시 변경해 보겠습니다. 즉, length 속성을 가지지만 객체의 속성 이름은 더 이상 숫자 유형이 아니고 다른 문자열 유형입니다

.
    '이름': '톰',  
    '나이': '65',
    '성별': '남성',
    '친구': ['제인','존','메리'],
    길이: 4
}
arr = Array.from(arrayLike) 하자
console.log(arr) // [ undefine, undefine, undefined, undefine ]

결과는 길이가 4인 배열이고 모든 요소가 정의되지 않았음을 알 수 있습니다

. 실제 배열의 경우 다음 조건이 있어야 합니다.

  • 이 유형의 배열 객체에는 배열의 길이를 지정하는 데 사용되는 길이 속성이 있어야 합니다. 길이 속성이 없으면 변환된 배열은 빈 배열입니다.

  • 이 유형의 배열 객체의 속성 이름은 숫자 또는 문자열 숫자여야 합니다

. ps: 이 유형의 배열 객체의 속성 이름은 인용되거나 인용되지 않을 수 있습니다.

2. Set 구조의 데이터를 실제 배열로 변환합니다:

let arr = [12,45,97,9797,564,134,45642]
세트하자 = 새로운 세트(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from 배열의 map 메소드처럼 작동하고 사용되는 두 번째 매개변수도 허용할 수 있습니다. 매핑하려면 각 요소가 처리되고 처리된 값이 반환된 배열에 배치됩니다. 다음과 같이:

arr = [12,45,97,9797,564,134,45642]로 설정합니다.
세트하자 = 새로운 세트(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

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은 동일한 새 배열을 반환합니다.
관련 기사