数组的拓展

ES6对数组新增的方法

Array.of()

:::info Array.of()用于将一组值转换为数组。
该方法主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
返回值：一个新数组 :::

// 无参数
console.log(new Array()); // []
console.log(Array.of()); // []
// 单个参数
console.log(new Array(3)); // [empty × 3]
console.log(Array.of(3)); // [3]

Array.from()

:::info 该方法用于将类数组、数组等部署了iterator接口的数据结构转换为数组
参数1: 要转换的数据
参数2: 遍历时每次执行的方法，方法有两个参数：当前项、当前项下标
参数3: 每次遍历时的上下文对象
返回值：转换后的数组 :::

let dom = document.querySelectorAll("*");
console.log(dom); // NodeList(8) [html, head, meta, meta, meta, title, body, script]
// ES5 的方式
console.log(Array.prototype.slice.call(dom));
// [html, head, meta, meta, meta, title, body, script]
// ES6 的方式
console.log(Array.from(dom));
// [html, head, meta, meta, meta, title, body, script]

let dom = document.querySelectorAll("*");
let result = Array.from(dom, function (el, index, arr) {
    console.log(this); // {a: 10, b: 20}
    return el.tagName;
  }, { a: 10, b: 20 });
console.log(result); //  ['HTML', 'HEAD', 'META', 'META', 'META', 'TITLE', 'BODY', 'SCRIPT']

以下是原型对象上的方法：

arr.fill()

:::info 该方法用于填充（替换）数组中的数据
参数1: 要填充的值
参数2: 开始下标
参数3: 结束下标-1
返回填充后的数组

📌 会更改原数组 ::: 只有一个参数的时候，会把整个数组都进行填充：

let arr = [1, 2, 3, 4, 5];
let res = arr.fill(10);
console.log(res, arr); // [10, 10, 10, 10, 10]

两个参数的时候，会从开始位置填充到数组最后：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, 2);
console.log(arr); // [1, 2, 10, 10, 10]

三个参数的时候：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, 0, 2);
console.log(arr); // [10, 10, 3, 4, 5]

当二、三参数一样的时候不会发生变化：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, 2, 2);
console.log(arr); // [1, 2, 3, 4, 5]

方法也接受负数，负数的时候从数组的末尾往前数，从 -1 开始：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, -3, -2); // [1, 2, 10, 4, 5]
console.log(arr);

第二个参数是NaN的时候会从第 0 位开始：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, NaN, -2); 
console.log(arr); // [10, 10, 10, 4, 5]

当二、三参数都是NaN的时候，不做任何处理：

let arr = [1, 2, 3, 4, 5];
arr.fill(10, NaN, NaN);
console.log(arr); // [1, 2, 3, 4, 5]

也可以指定对象来调用fill方法：

console.log([].fill.call({ length: 3 }, 4)); // {0: 4, 1: 4, 2: 4, length: 3}

arr.keys() / arr.values() / arr.entries()

:::info keys()返回迭代器对象
values()返回迭代器对象
entries()返回迭代器对象

以上三个方法类似Object.keys()、Object.values()、Object.entries()，但是数组的返回的值是「迭代对象」，并不是数组。 :::

let arr = ["a", "b", "c", "d"];
console.log(arr.keys()); // Array Iterator {}
console.log(arr.values()); // Array Iterator {}
let iter = arr.entries();
console.log(iter); // Array Iterator {}
for (const iterator of iter) {
  console.log(iterator);
}
// [0, 'a']
// [1, 'b']
// [2, ‘c']
// [3, 'd']

arr.find() / arr.findIndex()

:::info arr.find()返回第一个满足条件的成员
arr.findIndex()返回第一个满足条件的成员的下标

以上两个方法都是接受如下参数
参数：每次遍历时执行的函数
参数：遍历的项
参数：遍历的下标
参数：执行方法的数组
参数：遍历函数时的上下文对象 :::

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.find(function (el, index, arr) {
console.log(this); // {a: 10, b: 20}
return el > 3;
},{ a: 10, b: 20 });
console.log(res); // 4
// 不满足的时候返回 undefined
let res2 = arr.find((el) => {
  return el > 6;
});
console.log(res2); // undefined

let arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.findIndex(function (el, index, arr) {
    console.log(this); // {a: 10, b: 20}
    return el > 3;
  },{ a: 10, b: 20 });
console.log(res1); // 3
// 不满足的时候返回 -1
let res2 = arr.findIndex((el) => {
  return el > 6;
});
console.log(res2); // -1

:::danger ES5中的indexOf用于查找数组中是否包含某个值，返回这个值的下标，如果没有则返回 -1；
但是indexOf有以下缺点：
1、不够语义化
2、对NaN不能进行判断 :::

let arr = [NaN, undefined, null, 1, 2];
console.log(arr.indexOf(NaN)); // -1
console.log(arr.indexOf(undefined)); // 1
console.log(arr.indexOf(null)); // 2
console.log(arr.findIndex((el) => Object.is(NaN, el))); // 弥补 indexOf 的不足

arr.includes()

:::info 用来判断数组是否包含某个值，返回布尔值
能够对NaN进行准确判断 :::

let arr = [NaN, undefined, null, 1, 2];
console.log(arr.includes(NaN)); // true，解决了 NaN 的问题
console.log(arr.includes(undefined)); // true
console.log(arr.includes(null)); // true
console.log(arr.includes(1)); // true

arr.flat() / arr.flatMap()

:::info arr.flat()用于将嵌套的数组“拉平”，变成一维的数组。
返回：一个新数组，对原数据没有影响。

arr.flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。
函数可以接受三个参数，分别是当前数组成员、当前数组成员下标、原数组。
返回：一个新数组，对原数据没有影响。 :::

[1, 2, [3, 4]].flat()

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

如果不管有多少层嵌套，都要转成一维数组，可以用**Infinity**关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

arr.flatMap()的使用：

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]