扩展运算符的用法

2018-04-28 19:53:47

总字数 801

预计阅读时间 3 分钟

ES6标准新加入的扩展运算符(Spread Operator) , 可以使JS代码变得更加简洁 , 编写起来更加灵活

不使用apply去调用函数

如果现在有一个数组 , 需要将它当中的每个元素逐个对应到一个函数的参数进行传入的话 , 在以往需要这样写

function func(a,b,c) {
  console.log(a+b+c);
}
var args = [10,2,60];
func.apply(null, args);

如果使用扩展运算符 , 只需按照如下方式调用即可

1	func(...args);

合并数组

以往合并数组的方式通常是使用concat方法
或者也可以遍历数组 , 逐个push或者unshift到另一个数组当中
现在有了扩展运算符 , 就可以运用更加灵活简洁的方式了

var arr1 = [10,30,"ab"];
var arr2 = [true,"pp"];

arr1.unshift(...arr2);
arr1.push(...arr2);

或者也可以在数组内部进行合并

1 2	var arr1 = [10,20]; var arr2 = [1, ...arr1, 100];

语法更简洁了 , 而且可以灵活控制位置

复制数组

其实与上面的数组内合并是类似的

1 2	var arr1 = [1,2,3]; var arr2 = [...arr1];

将类数组转化为数组

在以前我们需要用Array.prototype.slice来讲类数组( 比如arguments )来转化为真正的数组对象
现在可以直接使用扩展运算符了

var divArr = [...document.querySelectorAll("div")];

function func(...args) {
//等同于[...arguments]
  console.log(args);
}

解构赋值

所谓解构 , 其实就是分解数组或对象的结构 , 将其中的元素直接赋值给变量

数组解构

比如通过不定参数来获取数组后面的尾随元素

1
2
3

let [a,...b] = ['a2','b2','c2','d2'];
console.log(a); //a2
console.log(b); //['b2','c2','d2']

也可以在某些位置留空 , 跳过数组当中对应位置的元素

1
2
3

let [a,,b] = [1,2,3];
console.log(a);// 1
console.log(b);// 3

对于多维数组 , 也是同样适用的

1	var [one,[[two],three]] = [1, [[2],3]];

数组结构同样可以适用于生成器

function* fibs() {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
var [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth);
// 5

对象解构

1
2
3

var obj = {name:"Sookie", age:18};
var {name : nameA} = obj;
console.log(nameA); //Sookie

当属性名与变量名一致的时候 , 也可以简写如下

1	var {name} = obj;

与数组类似 , 多层嵌套的对象结构同样可以使用类似的结构分别赋值给对应的变量

var complicatedObj = {
      arrayProp: [
        "Zapp",
        { second: "Brannigan" }
      ]
    };
    var { arrayProp: [first, { second }] } = complicatedObj;

当解构对象时 , 如果没有变量声明的标识符 ( var const let ) , 直接这样写会报错
{a} = {a:10}
因为JS解析器会把 { 开始的语句解析为一个块语句
({a} = {a:10})这样写就是正确的

我们可以给解构的结果添加一个默认值
如果解构的目标数组或者对象当中没有获取到对应的值 , 那么将使用这个默认值
( 不指定默认值将得到undefined )

1 2	var [missing=true] = []; var {msg="success"} = {};