ES6中对数组的扩展

---

一、Array.from

Array.from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

1、转换类似数组的对象

所谓类似数组的对象，本质特征只有一点，即必须有 length 属性。 因此，任何有 length 属性的对象，都可以通过 Array.from 方法转为数组

Array.from({
      length: 3 }); // [ undefined, undefined, undefined ]
// 返回了一个具有三个成员的数组，每个位置的值都是 undefined

下面是一个类似数组的对象，Array.from 将它转为真正的数组。

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

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

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

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象。Array.from 都可以将它们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll('p');
// querySelectorAll 方法返回的是一个类似数组的对象，可以将这个对象转为真正的数组，再使用 filter 方法。
Array.from(ps).filter(p => {
     
  return p.textContent.length > 10;
});

// arguments对象
function foo() {
     
  var args = Array.from(arguments);
  // ...
}

2、转换可遍历（iterable）的对象

只要是部署了 Iterator 接口的数据结构，Array.from 都能将其转为数组。 例如字符串和 Set 结构都具有 Iterator 接口，因此可以被 Array.from转为真正的数组。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

如果参数是一个真正的数组，Array.from 会返回一个一模一样的新数组。

Array.from([1, 2, 3]) // [1, 2, 3]

注意：扩展运算符（ ... ）也可以将某些数据结构转为数组。

// arguments对象
function foo() {
     
  const args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

扩展运算符背后调用的是遍历器接口（ Symbol.iterator ），如果一个对象没有部署这个接口，就无法转换。

有关扩展运算符的更多内容，请查看这篇博客：JS中的扩展运算符（…）和剩余运算符（…）

3、Array.from 的其它参数

Array.from 的第二个参数是一个函数，可选，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);

// 等同于
Array.from(arrayLike).map(x => x * x);

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

案例1：取出一组 DOM 节点的文本内容。

let spans = document.querySelectorAll('span');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

案例2：将数组中布尔值为 false 的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

案例3：下边例子中定义的函数可以返回各种参数的数据类型。

function typesOf() {
     
  return Array.from(arguments, arg => typeof arg);
}

console.log(typesOf(1, 'hello', [], NaN)); // ["number", "string", "object", "number"]

如果第二个参数函数里面用到了 this 关键字，还可以传入 Array.from 的第三个参数，用来绑定 this。

二、Array.of()

1、基本用法

Array.of 方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.of 基本上可以用来替代 Array() 或 new Array() 来创建数组，并且不存在由于参数不同而导致的重载。它的行为非常统一。 Array.of 总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1.5) // [1.5]
Array.of(1.5, 2) // [1.5, 2]

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

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

2、对比 new Array() 的方式

Array 是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

var arr = new Array(2);
arr.length // 2
arr // [ empty x 2 ]

上面代码中，Array() 构造函数的参数 2，表示生成一个两个成员的数组，每个位置都是空值。

如果没有使用 new 关键字，运行结果也是一样的。考虑到语义性，以及与其他构造函数用户保持一致，建议总是加上 new。

var arr = new Array(2);

// 等同于
var arr = Array(2);

使用 Array() 构造函数时，不同的参数会导致行为不一致。

// 无参数时，返回一个空数组
new Array() // []

// 单个正整数参数，表示返回的新数组的长度
new Array(1) // [ empty ]
new Array(2) // [ empty x 2 ]

// 非正整数的数值作为参数，会报错
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length

// 单个非数值（比如字符串、布尔值、对象等）作为参数，
// 则该参数是返回的新数组的成员
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]

// 多参数时，所有参数都是返回的新数组的成员
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

注意，如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回 undefined，但实际上该位置没有任何值。虽然这时可以读取到 length 属性，但是取不到键名。

var a = new Array(3);
var b = [undefined, undefined, undefined];

a.length // 3
b.length // 3

a[0] // undefined
b[0] // undefined

0 in a // false
0 in b // true

a是Array()生成的一个长度为3的空数组，b是一个三个成员都是undefined的数组，这两个数组是不一样的。读取键值的时候，a和b都返回undefined，但是a的键名（成员的序号）都是空的，b的键名是有值的。

---

三、数组实例的 find() 和 findIndex()

1、find()

数组实例的 find 方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为 true 的成员，然后返回该成员。如果没有符合条件的成员，则返回 undefined。

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

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

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

2、findIndex()

数组实例的 findIndex 方法的用法与 find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

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

数组实例的 find() 和 findIndex() 两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v){
     
  return v > this.age;
}

let person = {
     name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

四、数组实例的 fill()

fill 方法使用给定值，填充一个数组。fill 方法用于空数组的初始化非常方便。 数组中已有的元素，会被全部抹去。

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

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

fill 方法还可以接受第二个和第三个参数，用于指定填充的起始位置（包括）和结束位置（不包括）。

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

五、数组实例的 entries()，keys() 和 values()

ES6 提供三个新的方法—— entries()，keys() 和 values() ——用于遍历数组。它们都返回一个遍历器对象。可以用 for...of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。

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

for (let item of arr.values()) {
     
  console.log(item); // a b c
}

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

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

有关对 Iterator 的介绍，请查看这篇文章 ES6中的 Iterator（遍历器）和 for of 循环

六、数组实例的 includes()

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

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

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

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

没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。

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

indexOf 方法它的含义是找到参数值的第一个出现位置，如果找不到，会返回 -1 ，所以如果要检查是否包含某个值，要去比较是否不等于-1，表达起来不够直观。

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

七、数组实例的 flat()，flatMap()

1、flat()

数组的成员有时还是数组，Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

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

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]

如果原数组有空位，flat() 方法会跳过空位。

2、flatMap()

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()

八、参考资料

本博客介绍的内容有限，可通过下方链接继续学习。

数组的扩展 - ECMAScript 6

Array 对象 - JavaScript 教程 - 网道