>웹 프론트엔드 >프런트엔드 Q&A >es6의 새로운 배열 방법은 무엇입니까?

es6의 새로운 배열 방법은 무엇입니까?

青灯夜游
青灯夜游원래의
2023-01-29 14:02:487000검색

ES6 배열 메소드에는 다음이 포함됩니다. 1. 배열과 유사한 객체 또는 탐색 가능한 객체를 실제 배열로 변환하는 데 사용되는 Array.from() 2. 값 집합을 배열로 변환하는 데 사용되는 Array.of() 3. copyWithin(), 지정된 위치의 멤버를 현재 배열 내의 다른 위치로 복사하는 데 사용됩니다. 5. find(); 7. include(); (); 9. 키(); 10. 값().

es6의 새로운 배열 방법은 무엇입니까?

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

전통적인 배열 객체 메소드

  • toSource()는 객체의 소스 코드를 반환합니다.
  • toString() 배열을 문자열로 변환하고 결과를 반환합니다.
  • toLocaleString() 배열을 로컬 배열로 변환하고 결과를 반환합니다.
  • valueof () 배열 객체의 원래 값을 반환합니다. 원래 배열을 원래 배열을 수정하지 않음, pop
concatsortreversesplice복사 Withinfill ㅋㅋㅋ finde, findIndexentries(), 키( ), value() ES6 array methodArray.from()은 두 가지 유형의 객체를 실제 배열로 변환하는 데 사용됩니다. 반복 가능한 객체(ES6의 새로운 데이터 구조 Set 및 Map 포함)
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of()
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
인스턴스 메서드는 원래 배열을 변경합니다
unshift, shift를 수정하지 않습니다. join
slice
indexOf(), lastIndexOf()
forEach
map
filter
Array method
Array.from은 배열의 map 메소드와 유사한 두 번째 매개변수도 허용할 수 있습니다. 이는 각 요소를 처리하고 처리된 값을 반환된 배열에 넣는 데 사용됩니다.
는 값 집합을 배열로 변환하는 데 사용됩니다.
copyWithin()
현재 배열 내에서 지정된 위치의 멤버를 다른 위치로 복사합니다. (원래 멤버는 덮어쓰기), 그런 다음 현재 배열을 반환합니다.

array. copyWithin(target, start = 0, end = this.length);

target(필수): 이 위치부터 데이터 교체를 시작합니다. 음수 값인 경우 역수 값을 나타냅니다.

start(선택 사항): 이 위치에서 데이터 읽기를 시작합니다. 기본값은 0입니다. 음수 값인 경우 역수 값을 나타냅니다. end(선택 사항): 이 위치에 도달하기 전에 데이터 읽기를 중지합니다. 기본값은 배열 길이와 같습니다. 음수 값인 경우 역수 값을 나타냅니다.

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

fill()

배열을 주어진 값으로 채웁니다.

['a', 'b', 'c'].fill(7);   // [7, 7, 7]

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

는 원래 배열을 변경하지 않습니다

find()는 조건을 충족하는 첫 번째 배열 구성원을 찾는 데 사용됩니다. 매개변수는 콜백 함수이고, 배열의 모든 멤버는 반환 값이 true인 첫 번째 멤버를 찾을 때까지 순차적으로 콜백 함수를 실행한 후 해당 멤버를 반환합니다. 일치하는 멤버가 없으면 정의되지 않은 값이 반환됩니다.

find 메소드의 콜백 함수는 현재 값, 현재 위치, 원본 배열의 세 가지 매개변수를 받을 수 있습니다.

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex()
  • findIndex 메소드의 사용법은 find 메소드와 매우 유사하며, 모든 멤버가 기준을 충족하지 않는 경우 첫 번째 배열 멤버의 위치를 ​​반환합니다. -1.
  • [1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) // 2

includes()
  • 배열에 지정된 값이 포함되어 있는지 여부를 나타내는 부울 값을 반환합니다.
[1, 2, 3].includes(2) // true
  • entries(), 키() 및 값()
    • ES6은 배열 순회를 위해 항목(), 키() 및 값()이라는 세 가지 새로운 메서드를 제공합니다. 둘 다 for...of 루프를 사용하여 탐색할 수 있는 순회 개체를 반환합니다. 유일한 차이점은 키()는 배열의 키 이름을 순회하고, 값()은 배열의 키 값을 순회한다는 것입니다. , 그리고entries() 메소드는 값의 키-값 쌍을 순회하는 것입니다.
    • for (let index of [&#39;a&#39;, &#39;b&#39;].keys()) {
        console.log(index);
      }
      // 0
      // 1
      
      for (let elem of [&#39;a&#39;, &#39;b&#39;].values()) {
        console.log(elem);
      }
      // &#39;a&#39;
      // &#39;b&#39;
      
      for (let [index, elem] of [&#39;a&#39;, &#39;b&#39;].entries()) {
        console.log(index, elem);
      }
      // 0 "a"
      // 1 "b"
    for...of 루프를 사용하지 않는 경우 traverse 개체의 next 메서드를 수동으로 호출하여 트래버스할 수 있습니다.

    let letter = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
    let entries = letter.entries();
    console.log(entries.next().value); // [0, &#39;a&#39;]
    console.log(entries.next().value); // [1, &#39;b&#39;]
    console.log(entries.next().value); // [2, &#39;c&#39;]

    【추천 학습:

    javascript 고급 튜토리얼

    위 내용은 es6의 새로운 배열 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

  • 성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.