JS的解构赋值详解

小熙在学习前端特性的时候，恰好碰到一篇详细的结构赋值详解，特此转载以供分享

解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

语法

var a, b, rest;[a, b]=[10,20];
console.log(a);// 10
console.log(b);// 20[a, b,...rest]=[10,20,30,40,50];
console.log(a);// 10
console.log(b);// 20
console.log(rest);// [30, 40, 50]({ a, b}={ a:10, b:20});
console.log(a);// 10
console.log(b);// 20// Stage 3 proposal({a, b,...rest}={a:10, b:20, c:30, d:40});
console.log(a);// 10
console.log(b);// 20
console.log(rest);//{c: 30, d: 40}

描述

对象字面量和数组字面量提供了一种简单的定义一个特定的数据组的方法。

let x=[1,2,3,4,5];

解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。

var x=[1,2,3,4,5];var[y, z]= x;
console.log(y);// 1
console.log(z);// 2

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

解构数组

变量声明并赋值时的解构

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

默认值

为了防止从数组中取出一个值为undefined的对象，可以为这个对象设置默认值。

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

交换变量

在一个解构表达式中可以交换两个变量的值。

没有解构赋值的情况下，交换两个变量需要一个临时变量（或者用低级语言中的XOR-swap技巧）。

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

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

从一个函数返回一个数组是十分常见的情况.。解构使得处理返回值为数组时更加方便。

在下面例子中，[1, 2] 作为函数的f() 的输出值，可以使用解构用一句话完成解析。

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

忽略某些返回值

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

functionf(){return[1,2,3];}var[a,, b]=f();
console.log(a);// 1
console.log(b);// 3

你也可以忽略全部返回值。例如：

[,,]=f();

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

当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

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

注意：如果剩余元素右侧有一个逗号，会抛出SyntaxError，因为剩余元素必须是数组的最后一个元素。

var[a,...b,]=[1,2,3];// SyntaxError: rest element may not have a trailing comma

用正则表达式匹配提取值

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

var url="https://developer.mozilla.org/en-US/Web/JavaScript";var parsedURL=/^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL);// ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]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 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);// 3
console.log(b);// 5

给新的变量命名并提供默认值

一个属性可以是1）从一个对象解构，并分配给一个不同名称的变量，2）分配一个默认值，以防未解构的值是undefined。

var{a:aa=10, b:bb=5}={a:3};

console.log(aa);// 3
console.log(bb);// 5

函数参数默认值

ES5版本

functiondrawES5Chart(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});

ES2015版本

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

解构嵌套对象和数组

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"

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

functionuserId({id}){return id;}functionwhois({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"

对象解构中的Rest

Rest/Spread Properties for ECMAScript 提案（阶段3）将rest语法添加到解构中。Rest 属性收集尚未被解构模式拾取的剩余可枚举属性键。

let{a, b,...rest}={a:10, b:20, c:30, d:40}
a;// 10
b;// 20
rest;// { c: 30, d: 40 }

无效的 JavaScript 标识符作为属性名称

通过提供有效的替代标识符，解构可以与不是有效的JavaScript标识符的属性名称一起使用。

const foo={'fizz-buzz':true};const{'fizz-buzz': fizzBuzz}= foo;

console.log(fizzBuzz);// "true"

规范

浏览器兼容