ES6快速入门第七章------数组的扩展（可私信解惑）

Array.from方法

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

 var arr= {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES6的写法
var  arr2 = Array.from(arr);     // ['a', 'b', 'c']

只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组，如字符串。

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

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

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

Array.from([1, 2, 3], (x) => x * x)        // [1, 4, 9]        =>是箭头函数

Array.of方法

 Array.of方法用于将一组值，转换为数组。如果没有参数，就返回一个空数组。

Array.of(7, 8, 9)     // [7,8,9]
Array.of(13)         // [13]
Array.of()     // []
Array.of(13).length     // 1

Array.of基本上可以用来替代Array()或new Array()，并且Array.of不会因为参数不同而导致重载。

如果使用Array()方法，当参数只有一个时，实际上是指定数组的长度，代码如下。

var num = Array(2);        // 使用Array 方法
var num2 = Array.of(2);    // 使用Array.of 方法
num.length          //  2
num2.length        //  1

 

数组实例copyWithin()方法

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

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

其中有三个参数（应该是数值类型，不是的话会自动转为数值）：

• target（必须）：从该位置开始替换数据。
• start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
• end（可选）： 到该位置前停止读取数据，没取到这个数，默认等于数组长度。如果为负值，表示倒着数。

 [1, 2, 3, 4, 5].copyWithin(0, 3)
//   替换后的结果 [4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。

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

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

//从下标为2开始替换（也就是数值9），后两个参数没写，替换的内容默认从下标为0开始（数值8，5，9）
[8,5,9,4,3].copyWithin(2)    //  [ 8, 5, 8, 5, 9 ]    

 

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

数组实例的find方法，用于找出第一个符合条件的数组成员。

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。

如果没有符合条件的成员，则返回undefined。

// 查找数组中小于0的数
[1, 2, -3, 4].find(  (n) => n < 0  )        // -3       => 是箭头函数，等于 function(n) {  return n<0; }

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

[1, 2, 3, 4].find(function(value, index, arr) {  return value > 2; }）     // 返回值为3

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

[1, 2, 3, 4].findIndex(function(value, index, arr) {
    return value > 2;        // 返回值为2 
}

 

其他数组实例的方法

fill

fill方法使用给定值，填充一个数组。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

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

上面代码表示，fill方法从1号位开始，向原数组填充7，到2号位之前结束。

entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。它们的区别如下所示：

console.log("----------keys方法---------")
for (let index of ['hello', 'world'].keys()) {

    console.log("输出结果：", index);
}

输出结果： 0 
输出结果： 1


console.log("----------values方法发---------")
for (let elem of ['hello', 'world'].values()) {

    console.log("输出结果：",elem);
}

输出结果： hello 
输出结果： world


console.log("----------entries方法发---------")
for (let [index, elem] of ['hello', 'world'].entries()) {

    console.log("输出结果：",index, elem);
}

输出结果： 0 hello 
输出结果： 1 world