ES6에서 의사 배열을 배열로 변환하는 방법

青灯夜游
풀어 주다: 2022-05-05 14:04:20
원래의
1896명이 탐색했습니다.

ES6에서는 배열 유형의 from() 메소드를 사용하여 유사 배열을 배열로 변환할 수 있습니다. 이 메소드는 배열 유사 객체 또는 탐색 가능한 객체를 실제 배열로 변환할 수 있습니다. (의사 배열 객체).forEache(item=>console.log(item))".

ES6에서 의사 배열을 배열로 변환하는 방법

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

ECMAScript6의 새로운 기능 - 의사 배열

의사 배열이란 무엇입니까? 객체의 모든 키가 양의 정수 또는 0이고 길이 속성을 갖는 경우 객체는 배열과 같으며 의사 배열이라고 합니다.

일반적인 의사 배열: 인수 객체, 대부분의 DOM 요소 세트 및 문자열.

Example

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}
로그인 후 복사

위의 arrayLike 객체와 마찬가지로 length 속성을 가지며 키도 순서가 있는 시퀀스입니다.

따라서 길이를 탐색하고 쿼리할 수 있습니다. 하지만 배열 메서드를 호출할 수는 없습니다. 푸시, 팝 및 기타 방법 등.

ES6 이전에는 또 다른 일반적인 의사 배열인 인수가 있었습니다.

인수도 배열처럼 보이지만 배열 메서드가 없습니다.

예를 들어,args.push(1)은 확실히 오류를 보고합니다.

ES6에서 의사 배열을 배열로 변환하는 방법

ES6에서는 Array 유형의 from 메소드를 사용하여 의사 배열을 배열로 변환할 수 있습니다.

Array.from() 메소드는 두 가지 유형의 객체를 실제 배열로 변환하는 데 사용됩니다.

1. 배열과 유사한 객체는 "의사 배열"로 이해될 수 있습니다.

2 탐색 가능한 객체(예: 문자열)

  <button name="button">测试1</button>
    <br/>
    <button name="button">测试2</button>
    <br/>
    <button name="button">测试3</button>
    <br/>
<script>
//声明变量let变量,const常量
let btns=document.getElementsByName("button");
console.log("btns",btns);//得到一个伪数组
//此处出现异常:Uncaught TypeError:btns.forEach is not a function 
btns.forEach(item=>console.log(item))
</script>
<script>
Array.from(btns).forEache(item=>console.log(item))//将伪数组转换为数组
</script>
로그인 후 복사

Array.from의 주요 기능은 의사 배열과 탐색 가능한 객체를 배열로 변환하는 것입니다.

"주 함수"라고 말하는 이유는 Array.from도 전달할 매개변수 2개를 제공하기 때문입니다. 이는 다양한 종류의 소규모 게임플레이를 확장할 수 있습니다.

  • Array.from의 두 번째 매개변수는 지도 탐색 방법과 유사한 함수입니다. 횡단하는 데 사용됩니다.

  • Array.from의 세 번째 매개변수는 this 포인터를 변경하는 데 사용되는 this 개체를 허용합니다.

세 번째 매개변수 사용법(일반적으로 사용되지 않음)

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4
로그인 후 복사

확장 지식: 문자열을 배열로 변환

let msg = &#39;hello&#39;;
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]
로그인 후 복사

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

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

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