ECMAScript6 入门 数组的扩展

 

数组的扩展

1：扩展运算符...

...：好比rest参数的逆运算，将一个数组转换为用逗号分隔的参数序列

主要应用于函数调用，将一个数组，变为参数序列
如果扩展运算符后面是一个空的数组，不会产生任何效果；
当然也可以跟一个表达式，但是表达式的返回值是一个数组；

只有函数调用的时候，扩展运算符才可以放到圆括号当中
(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

2：替代函数的apply方法

他可以展开数组，所以不再需要apply方法，将数组转换为函数的参数

3：应用场景

复制数组
const a1 = [1,2]
const a2 = [...a1]
const [...a2] = a1

合并数组
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' ]

与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果用于数组的结构赋值，只能放在最后一位
const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

将字符串转化为数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]

实现 Iterator 接口的对象
任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组

4：新的数组API

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.of() ==> Array.of基本上可以用来替代Array()或new Array()
将一组值，转换为对象
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.copyWithin() ==> 接受三个参数，替换的起始位置 读取数据的开始位置 读取数据的结束位置
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
在当前数组内部，将制定位置的成员复制到其他位置(会覆盖原有的成员),会修改原数组

Array.find()
用于找到第一个符合条件的数组成员
直到找到第一个返回值为true的成员，然后返回该成员
否则返回undefined

Array.findIndex()
返回第一个符合条件的数组成员的位置

Array.fill()
使用给定的值填充一个数组

Array.flat()
将一个嵌套的数组，拉平成一个一维数组