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

새로운 배열 메소드: 1. 배열 유사 객체 또는 반복 가능한 객체를 실제 배열로 변환할 수 있는 from() 2. 일련의 값을 배열을 보완하는 배열로 변환할 수 있는 of() constructor Array() 부족; 3. find() 및 findIndex(), 조건을 충족하는 첫 번째 배열 요소를 반환합니다. 4. fill() 등.

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

es6 새로운 배열 메서드

1. Array.from()

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

• Array와 유사한 개체(배열 - 객체와 유사)

• Iterable 객체(ES6의 새로운 데이터 구조 Set 및 Map 포함)

는 Iterator 인터페이스의 데이터 구조가 배포되는 한 Array.from이 이를 변환할 수 있음을 의미합니다. 배열로 변환

In 실제 개발에서는 일반적으로 DOM 연산에서 반환된 NodeList 컬렉션과 함수 내부의 인수 객체를 변환하는 데 사용할 수 있습니다

매개변수 전달 시 클래스 배열을 실제 배열로 변환하는 데 사용됩니다

• Array를 Re
  

const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...也可实现相同的效果
console.log([...new Set(arr)]) //[1,2,3,5]

이 메소드를 배포하지 않는 브라우저의 경우 대신 Array.prototype.slice 메소드를 사용할 수 있습니다

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

두 번째 매개변수를 수신할 수도 있습니다. 이 매개변수는 유사한 맵 메소드를 구현하기 위해 함수에 전달됩니다. 효과를 얻으려면 각 요소를 처리하고 처리된 배열을 반환

Array.from([1,2,3] , item => item *2)    //[2,4,6]

• 문자열의 길이를 반환

을 사용하면 문자열을 배열로 변환한 다음 문자열의 길이를 반환할 수 있습니다. 올바르게 처리 다양한 유니코드 문자를 사용하여 /uFFFF보다 큰 유니코드 문자를 2자로 계산하는 JS 자체 버그를 방지합니다. , 배열로 변환합니다. 배열 생성자 Array()의 단점을 보완합니다. 매개변수 개수가 다르기 때문에 Array()의 동작이 달라집니다

function countLength(string) {
    return Array.from(string).length
}

3. 배열 인스턴스의 Find() 및 findIndex()

find()

조건을 충족하는 배열 멤버, 해당 매개변수는 콜백 함수, 모든 배열 멤버는 조건을 충족하는 첫 번째 멤버를 찾을 때까지 이 함수를 순서대로 실행한 다음 해당 멤버를 반환합니다. 조건을 충족하는 멤버가 없으면 undefine을 반환합니다이 메서드 콜백 함수는 현재 값, 현재 위치, 원래 배열의 세 가지 매개 변수를 받습니다

예제 1

//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]

// Array.of方法可以用下面的代码模拟实现。

function ArrayOf() {
  return [].slice.call(arguments);
}

예제 2

[1,12,4,0,5].find(（item,index , arr） => return item < 1)   // 0

findIndex()

작성 및 사용법은 기본적으로 find와 동일합니다. () 메서드, 첫 번째 조건을 충족하는 배열 멤버의 위치, 조건이 없으면 -1이 반환됨, 배열 채우기

fill 메서드는 지정하는 데 사용되는 두 번째 및 세 번째 매개 변수도 허용할 수 있습니다. 채우기의 시작 위치와 끝 위치

// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支持这种复杂的查找
var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.find(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }

두 방법 모두 배열에서 NaN을 찾을 수 있지만 ES5에서는 indexOf()가 NaN을 찾을 수 없습니다

5. ()

배열 인스턴스는 모두 배열을 순회하는 데 사용되며 모두 사용할 수 있는 순회 객체를 반환합니다. for...of 루프 순회

의 차이점은 다음과 같습니다.

keys()는 다음과 같습니다. 키 이름 순회용

• values()는 키 값 순회용입니다. ​

entries()는 키-값 쌍용입니다. Traverse

[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10)   //3

6.

이 메서드는 배열에 주어진 값

var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.findIndex(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
  return point.x % 6 == 0 && point.y % 7 == 0;
}); //1

• 이 포함되어 있는지 여부를 나타내는 부울 값을 반환하고 검색 시작 위치를 나타내는 두 번째 매개변수도 받을 수 있습니다. 기본값은 0입니다. 두 번째 매개변수가 음수이면 숫자의 위치를 ​​나타냅니다. 두 번째 매개변수가 배열의 길이보다 크면 아래 첨자 0부터 시작합니다
  include 메서드는 의미가 충분하지 않고 NaN을 잘못 판단하는 indexOf 메서드의 단점을 보완합니다

// fill方法使用给定值， 填充一个数组。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
let arr = new Array(3).fill({
  name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

• 호환 메서드:

  for (let index of ["a", "b"].keys()) {
    console.log(index);
  }
  // 0 1
  for (let elem of ["a", "b"].values()) {
    console.log(elem);
  }
  // a b
  for (let [index, elem] of ["a", "b"].entries()) {
    console.log(index, elem);
  }
  // 0 "a"
  // 1 "b"
  var a = [1, 2, 3];
  [...a.values()]; // [1,2,3]
  [...a.keys()]; // [0,1,2]
  [...a.entries()]; // [ [0,1], [1,2], [2,3] ]

• 7. 배열 인스턴스 flat(), flatMap()

flat()은 중첩 배열을 1차원 배열로 "평면화"하는 데 사용됩니다. 이 메서드는 새 배열을 반환하며 원본 데이터에는 영향을 주지 않습니다. 전달된 매개변수는 병합할 레이어 수를 나타냅니다. 기본값은 하나의 레이어입니다. flatMap()은 배열의 한 레이어만 확장할 수 있습니다. 이 메서드는 원본 배열의 각 멤버에 대해 함수를 실행한 다음(Array.prototype.map() 실행과 동일) 반환 값으로 구성된 배열에서 flat() 메서드를 실행합니다. 이 메서드는 원래 배열을 변경하지 않고 새 배열을 반환합니다

[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false

8. 배열 인스턴스

의 copywithin()은 지정된 위치의 멤버를 현재 배열 내의 다른 위치에 복사한 다음 변경될 현재 배열 원본 배열

은 세 개의 매개변수

1, 대상(필수)을 받습니다. 이 위치에서 데이터 바꾸기

2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数

3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数

三个参数都应该是数字，如果不是，会自动转为数值

[1,2,3,4,5].copywithin(0,3);  //[4,5,3,4,5]  表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2

【相关推荐：javascript视频教程、web前端】

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