扩展运算符 spread
spread好比rest的逆运算,将一个数组转化为用逗号分隔的参数序列
该运算符主要用于函数调用
function add(x,y){
console.log(x+y);
}
var numbers = [4,28];
add(...numbers); // 32
替代数组的apply方法:由于扩展运算符可以展开数组,所以不需要apply方法将数组转化为函数参数了
扩展运算符的应用
1. 合并数组,代替concat方法
var arr1 = [1,3];
var arr2 = [2];
var arr3 = [4,5];
console.log(arr1.concat(arr2,arr3)); // [1, 3, 2, 4, 5]
console.log([...arr1,...arr2,...arr3]); // [1, 3, 2, 4, 5]
2. 与解构赋值结合
const [first,...rest] = [1,2,3,4,5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]
const [a,...b] = [];
console.log(a); // undefined
console.log(b); // []
const[c,...d] = ['foo'];
console.log(c); // foo
console.log(d); // []
注意:扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错
const [...a, c] = [1,2,3];
console.log(a); // 报错
console.log(c);
字符串
扩展运算符可以将字符串转化为真正的数组
- 传入一个数组,参数是字符串,利用扩展运算符就可以将字符串转化成单个字母组成的数组
console.log([...'hello']); // ["h", "e", "l", "l", "o"]
这样写的好处:可以正确识别32位Unicode字符,因为涉及到32位Unicode字符都有识别问题,所以最好都用扩展运算符改写
function length(str){
return [...str].length;
}
类数组对象都可以用扩展运算符转化为真正的数组
[...obj] // 其中的obj是类数组对象
Map Set结构 Generator函数
扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构
let map = new Map([
[1,'one'],
[2,'two'],
[3,'three'],
]);
let arr = [...map.keys()];
console.log(arr); // [1,2,3]
let arr1 = [...map.values()];
console.log(arr1); // ["one", "two", "three"]
var go = function* (){
yield 1;
yield 2;
yield 3;
};
console.log([...go()]); // [1, 2, 3]
对于没有iterator接口的对象,使用扩展运算符会报错