【ES6】ES6学习八：数组的扩展

一、扩展运算符:是三个点（...）

扩展运算符：将一个数组转为用逗号分隔的参数序列。

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

 

二、 替代函数的apply方法

由于扩展运算符可以展开数组，所以不再需要 apply 方法，将数组转为函数的参数了。

例子1：Math.max方法

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

例子2：push函数

// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

 

三、扩展运算符的应用

1、复制数组

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;//此时修改a2，会直接导致a1的变化
a1 // [2, 2]

扩展运算符提供了复制数组的简便写法：

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

2、合并数组：代替concat方法

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]// [ 'a', 'b', 'c', 'd', 'e' ]

3、将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

 

四、Array.from()方法：转为真正的数组

任何有length属性的对象，都可以通过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']

Array.from({ length: 3 });// [ undefined, undefined, undefined ]

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

 

 五、Array.of()方法：替代Array()或new Array()

将参数值转成数组。

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

该方法用于弥补数组构造函数Array()的不足。

Array() // []
Array(3) // [, , ,]//参数个数只有一个时，实际上是指定数组的长度
Array(3, 11, 8) // [3, 11, 8]//当参数个数不少于2个时，Array()才会返回由参数组成的新数组

 

 五、fill()方法：填充一个数组

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

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

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

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

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

 

六、entries()、keys() 、values()方法：用于遍历数组

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

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

 

七、includes()方法：代替indexOf()方法

表示某个数组是否包含给定的值，与字符串的includes方法类似。

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置。

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

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

indexOf方法有两个缺点：一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

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

 

八、 flat()、flatMap()方法

1、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]

 2、flatMap()方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。它只能展开一层数组。

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