js中的解构赋值

解构赋值

通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

• 数组按照顺序解构赋值

 // 变量先声明后赋值时的结构
  var a, b, rest;
  [a, b] = [10, 20]; // a 10; b 20
  
  // 变量声明并赋值时的结构
  var [a, b] = [10, 20, 30, 40, 50]; // a 10; b 20
  
  // 默认值
  var [a = 12,b] = [,3]; // a 12; b 3
  
   // 将剩余数组赋值给一个变量
  var [a, b, ...rest] = [10, 20, 30, 40, 50]; // a 10; b 20; rest [30, 40, 50]
  // 注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。
  var[a,...b,]=[12,23,34,45];
  // Uncaught SyntaxError: Rest element must be last element
  
   // 忽略某些返回值
  var[a,,b]=[12,23,34,45]; // a 12;b 34

• 对象按照属性解构赋值

// 变量先声明后赋值时的结构
var a, b, rest;
({a, b} = {a:10, b: 20}); // a 10; b 20
      
/** 备注：赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的。
      {a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。
      然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
      你的 ( ... ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。
 */
      
// 变量声明并赋值时的结构
var {a, b} = {a:10, b: 20}; // a 10; b 20
      
// 给新的变量名赋值
var {a:q, b} = {a:10, b: 20}; // q 10; b 20; a is not defined
      
// 默认值
var {a = 12, b} = {a:undefined, b: 20}; // a 12; b 3
      
// 将剩余数组赋值给一个变量
var {a = 10, b, ...rest} = {a:undefined, b: 20, c: 30, d: 40}; // a 10; b 20; rest {c: 30, d: 40}
// 注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。
var{a = 10, b, ...rest,} = {a:undefined, b: 20, c: 30, d: 40};
 // Uncaught SyntaxError: Rest element must be last element
      
// 对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" }; // foo 'bar';z is not defined
      
// 解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）

• 字符串结构

// 当作数组结构
var [q,w] = '12'; // q 1; w 2
      
// 当作对象结构
var { length}= '12';// length 2

• 共同点

1. undefined是不能被赋值的

    let [a = 12] = [undefined]; // a 12
    let [a = 23] = [null]; // a null

2. 都是层层结构

    let [a,[[b]]] = [12,[13]]; // 报错，13不能被结构
    let [a,[b],c] = [12,[13]]; // b 13

• 不同点

数组：数组按照顺序解构赋值

对象：对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

参考：Destructuring assignment