变量的解构赋值

解构赋值语法是一种 JavaScript 表达式。通过解构赋值，可以将属性值从对象/数组中取出，赋值给其他变量。

// 解构数组
var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); //'one'
console.log(two); //'two'
console.log(three); // 'three'

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

// 默认值

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

// 交换变量

var a = 1;
var b = 3;

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

// 解析一个从函数返回的数组

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

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

// 忽略某些值

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

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

// 将剩余数组赋值给一个变量

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

// 用正则表达式匹配提取值

function parseProtocol(url) {
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return fullhost;
}

console.log(
  parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"); // "https"
);

// 解构对象

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

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

// 无声明赋值

var a,b;
({a,b} = {a : 1,b : 2})

// 给新的变量名赋值

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

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

// 默认值

var {a = 10,b = 5} = {a : 3};
console.log(a);
console.log(b);

// 解构嵌套对象和数组

const 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'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = 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"

---

以上是我对下列视频及文章的归纳和总结。
ES6 免费视频教程

参考资料:
MDN 解构赋值
ECMAScript 6 入门-变量解构赋值

相关代码仓库:
ES6