ES6—数组新方法（7）

在javascript中，数组是最重要的数据结构，没有之一，由于全部的数据结构均可以使用数组模拟和表达。能够说掌握了数组，就掌握了js与数据操做的大部分核心功能。

ES6给数组添加了一些新特性，而这些新特性到目前为止彻底能够运用到本身的业务层。

可是，开发者初次接触ES6，不少东西都看得云里来雾里，无从下手。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法，让用户可以听得懂，用的起来。

一、新增数组建立方法

1.1 Array.from

Array.from的设计目的是快速便捷把一个相似数组的可迭代对象建立成一个新的数组实例。

通俗的讲，只要一个对象有length，Array.from就能把它变成一个数组，返回新的数组，而不改变原对象。

let likeArr = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(likeArr); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(likeArr); // ['a', 'b', 'c']

常见的相似数组的对象还有 DOM 操做返回的 NodeList 集合，以及函数内部的 arguments 对象。Array.from均可以将它们转为真正的数组。

// NodeList对象
let div = document.querySelectorAll('div');
console.log(div);   //  NodeList(8) [div#cst, div, div.gb_3, …]
console.log(Array.from(div));  //(8) [div#cst, div, div.gb_3, …]

// arguments对象
function foo() {
  var args = Array.from(arguments);
  console.log(args);
}
foo(1,2,34,666,333,663);  // [1, 2, 34, 666, 333, 663]

Array.from 对 String，Set，Map 等拥有迭代器的对象也能够进行转换。

// String
Array.from('abc'); // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'abc'], [2, 'def']])); // [[1, 'abc'], [2, 'def']]

此外，生成一个从0到指定数字的新数组，Array.from能够轻易的作到：

Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]复制代码

Array.from 接收的第二个参数，做用相似于数组的map方法，用来对每一个元素进行处理，处理后的值放入返回的数组：

let arrayLike = [1,3,5];
Array.from(arrayLike, x => x+1);        // [2, 4, 6]
// 等同于
Array.from(arrayLike).map(x => x+1);    // [2, 4, 6]

1.2 Array.of

当参数个数大于1时，Array() 才会返回由参数组成的新数组。当参数个数只有一个时，其实是指定数组的长度。

Array() // []
Array(3) // [, , ,]
Array(3, 4, 5) // [3, 4, 5]

因为参数个数的不一样，会致使 Array() 的行为有差别。

然而 Array.of 弥补了数组构造函数 Array() 的不足，Array.of 将参数依次转化为数组中的一项，而后返回这个新数组，而无论这个参数是数字仍是其它，它的行为很是统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(3, 4, 5) // [3, 4, 5]

Array.of 老是返回参数值组成的数组。若是没有参数，就返回一个空数组。

二、新增数组修改方法

2.1 copyWithin

能够在当前数组内部，将指定位置的数组项复制到其余位置，会覆盖原数组项，而后返回当前数组。使用该方法会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数：

（1）target（必需）：从该位置开始替换数据。若是为负值，表示倒数。

（2）start（可选）：从该位置开始读取数据，默认为 0。若是为负值，表示倒数。

（3）end（可选）：到该位置前中止读取数据，默认等于数组长度。若是为负值，表示倒数。

这三个参数都应该是数值，若是不是，会自动转为数值。

['a','b','c','d','e','f','g'].copyWithin(0, 3)
//  ["d", "e", "f", "g", "e", "f", "g"]

上面代码表示将从 3 号位 直到数组结束的成员（'d','e','f','g'），复制到从 0 号位开始的位置，结果覆盖了原来的 'a' 和 'b' 。

将3号位复制到0号位，能够这么写：

['a','b','c','d','e','f','g'].copyWithin(0, 3, 4)
//  ["d", "b", "c", "d", "e", "f", "g"]

start、end 为负数的状况：

['a','b','c','d','e','f','g'].copyWithin(0, -3, -1)
//  ["e", "f", "c", "d", "e", "f", "g"]

start -3 指的是 'e'，-3 - （-1）=2，就是用 'e' , 'f' 两个元素替换掉从0开头的 'a' , 'b'

2.2 fill

使用给定值，填充一个数组。

[1,2,3,4,5].fill('a');
// ["a", "a", "a", "a", "a"]

new Array(3).fill(12)
// [12, 12, 12]

fill 方法用于空数组的初始化很是方便。数组中已有的元素，会被所有抹去。

fill方法还能够接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

[1,2,3,4,5].fill('a',2,4);
// [1, 2, "a", "a", 5]

fill 方法从 2 号位开始，向原数组填充 'a'，直到 4 号位以前结束。

注意，若是填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

let arr = new Array(3).fill({name: "aaa"});
arr[0].name = "bbb";
console.log(arr)   // [{name: "bbb"}, {name: "bbb"}, {name: "bbb"}]

let arr = new Array(3).fill([]);
arr[0].push("ccc");
console.log(arr) // [["ccc"], ["ccc"], ["ccc"]]

三、新增数组查找遍历方法

3.1 find 和 findIndex

find 返回数组中第一个知足条件的元素（若是有的话）， 若是没有，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 4, -5, 10].find((n) => n < -10)
// undefined

find方法的回调函数能够接受三个参数，依次为当前的值、当前的位置和原数组。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) 
// 10

[1, 5, 10, 15].find(function(value, index, arr) {
  return console.log(value, index, arr)
}) 
 1      0     [1, 5, 10, 15]
 5      1   [1, 5, 10, 15]
 10     2   [1, 5, 10, 15]
 15     3   [1, 5, 10, 15]

数组实例的 findIndex 方法的用法与 find 方法很相似，返回第一个符合条件的数组成员的位置，若是全部成员都不符合条件，则返回 -1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) 
// 2

indexOf 方法没法识别数组的 NaN 成员，可是 findIndex 方法能够借助 Object.is 方法作到。

['a','b',NaN,'c'].indexOf(NaN)
// -1

['a','b',NaN,'c'].findIndex(y => Object.is(NaN, y))
// 2

3.2 includes

方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法相似。

没有该方法以前，咱们一般使用数组的 indexOf 方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
    
}

indexOf 方法有两个缺点：

一是不够语义化，它的含义是找到参数值的第一个出现位置，因此要去比较是否不等于 -1，表达起来不够直观。

二是，它内部使用严格相等运算符（===）进行判断，这会致使对 NaN 的误判。

[NaN].indexOf(NaN)
// -1

includes 使用的是不同的判断算法，就没有这个问题。

[NaN].includes(NaN)
// true

includes 第二个参数表示搜索的起始位置：

['a','b','c','d'].includes('c',2)  //true
['a','b','c','d'].includes('c',3)  //false

若是第二个参数为负数，则表示从倒数第几位向后搜索：

['a','b','c','d'].includes('c',-1)  //false     (-1指的是倒数第一位'd')
['a','b','c','d'].includes('c',-2)    //true     (-2指的是倒数第二位'c')

3.3 entries、keys、values

它们都返回一个遍历器对象，均可以用 for...of 循环进行遍历。

惟一的区别是 keys 是对键名的遍历、 values 是对键值的遍历， entries 是对键值对的遍历。

for (let index of ['a', 'b', 'c'].keys()) {
  console.log(index);
}
// 0
// 1
// 2

for (let elem of ['a', 'b', 'c'].values()) {
  console.log(elem);
}
// 'a'
// 'b'
// 'c'

for (let [index, elem] of ['a', 'b', 'c'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 2 "c"

四、数组降维方法

4.1 flat

说到数组拍平，咱们先看一道阿里面试题：

编写一个 JavaScript 函数，接受一个仅包含数字的 多维数组 ，返回拍平之后的结果。例如传入：[1, [[2], 3, 4], 5]，返回 [1, 2, 3, 4, 5]。

（本题来源：阿里巴巴前端笔试题）

const arr = [1, [[2], 3, 4], 5];

const flatten = arr => {
  return arr.reduce((flat, toFlat) => {
    return flat.concat(Array.isArray(toFlat) ? flatten(toFlat) : toFlat);
  }, []);
};

const res = flatten(arr);

console.log(res);

OK,我知道你以为它太复杂，我这里只是展现一下数组拍平的应用场景，接下来，咱们详细说说关于数组拍平的知识。

flat用于将嵌套的数组“拉平”。该方法返回一个新数组，对原数据没有影响。

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

默认只会“拉平”一层，若是想要“拉平”多层的嵌套数组，能够将flat方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

若是数组嵌套的层数不固定怎么办？把flat里的参数写成1000或者100000？

这样写太死板了，能够联想到 Infinity （无穷大）啊。

无论有多少层嵌套，若是都要转成一维数组，能够用 Infinity 关键字做为参数。

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

4.2 flatMap

方法对原数组的每一个成员执行一个函数（至关于执行 Array.prototype.map），而后对返回值组成的数组执行 flat() 方法。该方法返回一个新数组，不改变原数组。

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

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

五、总结

数组新增的方法，一方面起到了加强型做用，一方面让代码变得更加简洁。

其中 Array.from 和 Array.of 属于构造函数方法。

从是否改变数组自身的角度看：

copyWithin、fill 会改变数组自身，

includes、flat、flatMap不会改变数组自身。

entries、keys、values、find、findeIndex属于数组遍历方法。