解构赋值

解构赋值（destructuring assignment）语法是一个Javascript表达式，它使得从数组或者对象中提取数据赋值给不同的变量成为可能。

语法

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

var [a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a); // 1
console.log(b); // 2
console.log(rest); //[3,4,5]

var {a, b} = {a:1, b:2};
console.log(a); // 1
console.log(b); // 2

{a, b, ...rest} = {a:1, b:2, c:3, d:4}  
//ES7 -not implemented in Firefox 47a01

简述

对象字面量和数组字面量提供了一种简单的定义一个特定的数据组的方法。一旦你创建了这类数据组，你可以用任意的方法使用这些数据组，甚至从函数中返回它们。

解构赋值的一个特别有用的功能是：你可以用一个表达式读取整个结构。你可以从后面的例子中了解到很多它的其他的有趣应用。

解构赋值的作用类似于Perl和Python语言中的相似特性。

解构数组

简单例子

var foo = ["one", "two", "three"];

// 没有解构赋值
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 解构赋值
var [one, two, three] = foo;

交换变量

执行这段代码后，b是1、a是3。没有解构赋值的情况下，交换两个变量需要一个临时变量 (或者用低级语言中的XOR-swap技巧）。

var a = 1;
var b = 3;

[a, b] = [b, a];

返回多值

感谢解构赋值，函数现在可以返回多个值了。尽管函数一直都可以返回一个数组，但现在这样做有更多的灵活性。

function f() {
  return [1, 2];
}

如你所见，两个返回值被括号括起来，用类似数组表示法的方式被返回。你可用这种方法返回任意量的变量。这个方法中，f()返回[1, 2]。

var a, b;
[a, b] = f();
console.log("A is " + a + " B is " + b);

[a, b] = f() 把函数的返回值按顺序赋值给括号中的变量：a赋值为1、b赋值为2。

你也可以把返回值当做数组对待：

var a = f();
console.log("A is " + a);

这样a就是一个包含1和2两个值的数组。

忽略某些返回值

你也可以忽略你不感兴趣的返回值：

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log("A is " + a + " B is " + b);

运行这段代码后，a是1、b是3。2这个值被忽略了，你可以忽略任意（或全部）返回值。例如：

[,,] = f();

用正则表达式匹配提取值

用正则表达式方法exec()匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。

var url = "https://developer.mozilla.org/en-US/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // 输出"https:"

解构对象

简单示例

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

// 用新变量名赋值
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true  

函数参数默认值

ES5版本

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

ES6版本

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

加载模块

解构赋值可以帮助加载一个模块的特定子集，像Add-on SDK中:

const { Loader, main } = require('toolkit/loader');

解构嵌套对象和数组

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

For of 迭代和解构

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

从作为函数实参的对象中提取数据

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

这段代码从user对象中提取并输出id、displayName和firstName。

对象属性计算名和解构

计算属性名，如object literals，可以被解构。

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

规范

浏览器兼容性

[1] 需要在`about:flags`下开启 "Enable experimental Javascript features" 

Firefox特别注意事项

• Firefox为JS1.7提供了解构的非标准的语言扩展。这个扩展在Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37)中被移除。参见bug 1083498。
• 自 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38)版本开始，出于遵守ES6规范的考虑, 圆括号内的解构赋值,比如 ([a, b]) = [1, 2] 或者 ({a, b}) = { a: 1, b: 2 },现在被视为 invalid 并且会抛出 SyntaxError. 点击 Jeff Walden's blog post 和 bug 1146136 来获得更多信息。

相关链接

• 赋值操作符
• "ES6 in Depth: Destructuring" on hacks.mozilla.org