ES6学习——扩展运算符

扩展运算符 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接口的对象,使用扩展运算符会报错

你可能感兴趣的:(ES6学习——扩展运算符)