> 웹 프론트엔드 > JS 튜토리얼 > es6에서 객체를 배열로 변환하는 방법

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

青灯夜游
풀어 주다: 2022-10-18 17:24:55
원래의
8317명이 탐색했습니다.

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

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

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

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

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

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

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']]
로그인 후 복사

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

여기에서 코드를 다시 변경하세요. 즉, 길이 속성을 가지지만 개체의 속성 이름은 더 이상 숫자 유형이 아니고 다른 문자열 유형입니다.

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이고 요소는 모두 정의되지 않은 배열입니다.

배열 유사 객체를 실제 배열로 변환하려면 다음 조건이 충족되어야 함을 알 수 있습니다.

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

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

ps: 이 유형의 배열 객체의 속성 이름은 따옴표로 묶을 수도 있고 안 될 수도 있습니다.

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 ]
로그인 후 복사

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

【 관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드

위 내용은 es6에서 객체를 배열로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿