调整字号

ES6 快速上手:解构赋值

es6-small

这个特性又叫做“destructuring”。其语法的一般形式为:

[ variable1, variable2, ..., variableN ] = array;

这是数组的解构赋值。后文还有对象的解构赋值。

假设有数组 value = [1, 2, 3],要把三个值分别赋给三个变量 a, b, c,在ES5中要这样写:

var a = value[0];
var b = value[1];
var c = value[0];

ES6 中使用解构赋值:

[a, b, c] = value;

如果需要同时声明变量:

let [a, b, c] = value;

当然换成 var, const 也同样可以。结合“rest”使用:

var [head, ...tail] = [1, 2, 3, 4];
console.log(tail); // [2, 3, 4]

也可以嵌套:

var value = [1, 2, [3, 4, 5]];
var [a, b, [c, d]] = value; //a,b,c,d分别为1,2,3,4

在指定位置省略:

var value = [1, 2, 3, 4, 5];
var [a, , c, , e] = value; //1,3,5

如果出现越界访问的情况,值是 undefined

var value = [1];
var [a, b] = value; //1,undefined

这时候可以指定默认值:

var value = [1];
var [a = 100, b = 2] = value; //1,2

注意的是默认值只对 undefined 值起作用:

var value = [null, null];
var [a = 1, b = 2] = value; //a,b还是null

用处:可以用来交换两个变量的值(没有比这更简单的了):

[el1, el2] = [el2, el1];

或者,从正则表达式的结果里取出分组:

var [, firstName, lastName] = "John Doe".match(/^(w+) (w+)$/);

对象的解构赋值:

var personA = { name: "Paul" };
var personB = { name: "Lily" };

var { name: nameA } = personA;
var { name: nameB } = personB;

console.log(nameA); // "Paul"
console.log(nameB); // "Lily"

对象的 name 属性分别赋给了 nameAnameB。如果用下面这种简洁的写法:

var personA = { name: "Paul" };
var { name } = personA;

那么会把 name 属性赋给同名的变量 name

深层嵌套的对象:

var person = {
  name: {
    firstName: "John", 
    lastName: "Doe"
  }
};
var {name: {firstName, lastName}} = person; //得到两个变量firstName,lastName,注意name未定义

对象里嵌套数组:

var person = {
  dateOfBirth: [1, 1, 1980]
};
var {dateOfBirth: [day, month, year]} = person; //得到三个变量day, month, year

发生嵌套时,一般后面跟了冒号的变量都是未定义的,如上例的 dateOfBirth。这点要注意。

如果要解构的属性不存在,得到的是 undefined。对象解构赋值也可以使用默认值:

var {firstName = "John", lastName: userLastName = "Doe"} = {};

默认值对于 null 同样不起作用。

注意对于下面的写法,会抛出错误:

{ blowUp } = { blowUp: 10 }; // SyntaxError 

因为JS中任何以 { 开始的语句都被解析为一个块语句。解决方案是将整个表达式用一对小括号包裹:

({ blowUp } = { blowUp: 10 });

用处:第一,函数参数的解构:

function myFunc(options) {
  if (options.a) ...
  if (options.b) ...
}

这种语句经常出现在我们的代码中。用 ES6 就看上去更简洁:

function myFunc( {a, b} ) {
  if (a) ...
  if (b) ...
}


第二,可以用解构赋值,更方便地设定 option 默认值:

jQuery.ajax = function (url, {
  async = true,
  beforeSend = noop,
  cache = true,
  complete = noop,
  crossDomain = false,
  global = true,
  // 等等
}) {
  //主要逻辑
};

而以前我们得这样写:

jQuery.ajax = function (url, options) {
  var defaults = {
    async = true,
    beforeSend = noop,
    cache = true,
    complete = noop,
    crossDomain = false,
    global = true,
    // 等等
  };
  options = jQuery.extend(options, defaults);

  //主要逻辑
};
还没有评论,沙发空缺中……
flight