chapter08 数组的扩展
8.1 扩展运算符
8.1.1 扩展运算符的含义
...
如同rest运算符的逆运算，将一个数组转换为用逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 1, 2, 3
// 用于函数调用
function add (x, y) {
return x + y;
}
add(...[1, 2]); // 3
8.1.2 代替数组的apply方法
apply方法可以将数组转为函数的参数
// ES5的写法
function f (x, y ,z) {
// todo
}
let args = [1, 2, 3];
f.apply(null, args);
// ES6的写法
function f (x, y ,z) {
// todo
}
let args = [1, 2, 3];
f(...args);
8.1.3 扩展运算符的应用
-
合并数组
// ES5
[1, 2].concat(more);
// ES6
[1, 2, ...more] -
与解构赋值相结合
// ES5
a = list[0]
rest = list.slice(1);
// ES6
[a, ...rest] = list; const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4 ,5]注意：如果扩展运算符用于解构赋值，只能将其放置在参数的最后一位
-
处理函数的返回值
函数返回了一个可枚举的数据类型，则可以对其使用扩展运算符处理。
-
字符串
[...'hello'] // ['h', 'e', 'l', 'l', 'o']这种写法的好处是可以正确识别32位的Unicode
function length (str) {
return ...str.length;
}以上函数可以正确返回字符串的长度
-
Iterator接口
扩展运算符可以作用在任何实现了Iterator接口的数据类型上（Map, Set, Generator等）。
8.2 Array.from()
Array.from()用于将两类对象转换为真正的数组：类似数组的对象和可遍历的对象（包括ES6新增的Set和Map）。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike);
常见的类数组对象：DOM操作返回的NodeList对象和arguments对象。
所谓类数组，本质特征只有一点：必须具有length属性。任何有有length属性的对象，都可以通过Array.from方法转为数组。
...扩展运算符也可以将某些数据结构转换成数组，但是其原理是通过Iterator接口转换。
Array.from({ length: 2});
// [undefined, undefined]
Array.from()还可以接受第二个参数，作用类似于数组的map方法，用于对每一个数组元素进行处理，并且将处理后的值放入返回的数组。
如果map函数里面用到了this，还可以指定第三个参数用来绑定this。
Array.from({ length: 2 }, () => 'jack');
// ['jack', 'jack']
function countSymbol (string) {
return Array.from(string).length;
}
8.3 Array.of()
将一组值转换为一个数组，主要是用来解决Array构造函数的怪异。
8.4 数组实例.copyWithin()
在数组内部进行复制，参数（target, start, end）
- target （可选）开始进行复制的下标
- start （可选）开始被复制的下标
- end （可选）要被复制的范围，不包括
8.5 Array.find() & Array.findIndex()
作用就和名称一致。
参数：
-
fn (value, index, arr) {}
筛选函数，最多接受三个参数
-
this
筛选函数的this对象
8.6 Array.fill()
填充数组
扩展版本：Array.fill(str2Fill, start, end)
指定填充的区间 [ start, end )
8.7 数组实例的enties() keys() values()
分别返回三种迭代器，可以使用 for/of 或者 next() 方法进行迭代。
8.8 数组实例的includes() 方法
见名知义
includes()和find()方法可以找到NaN
8.9 数组的空位
ES6将空位视为undefined
空位处理的规则并不统一，所以建议尽量不要出现空位。