变量的结构赋值

1. 数组的解构赋值

• 基本用法

let [ a ,b ,c ] = [ 1, 2 , 3 ];
let [a , [ b ,c ] ] = [1, [ 2 ,3 ]];
let [  ,  b , c  ] = [1,  2 , 3 ]; //c = 3; b=2
//const 
const [ a ,b ,c ] = [ 1, 2 , 3 ];
//var 
var  [ a ,b ,c ] = [ 1, 2 , 3 ];

• 数组解构遵循‘匹配模式’，从数组中提取值，按照位置的对应关系对变量赋值。
• 解构模式不但适用于var命令，也适用于let和const命令。

• 解构默认值

var [x=1] =  [ ];
 x  // 1
var [x=1] =  [ null ];
x //null

• 赋值undefined

x //1
[x ,y ='a' ] = [ 'c' ]  // x = 'c' , y = 'a'
[x ,y ='a' ] = [ 'c' ，undefined ]  // x = 'c' , y = 'a'

• 默认值不存在

var [ a = f() ] = [ 1 ];
a //1

• es6内部使用 ‘===’运算符，判断一个位置是否有值，如果结构数组位置成员 ‘=== undefined’，默认值就会生效。
• 默认值不存在的时候，默认值不会生效。
• 默认值和赋值都不存在报错。

---

2. 对象的解构赋值

对象的结构赋值必须遵守变量和赋值对象的属性同名，才能取到值。

• 位置次序不影响对象赋值。

var { foo, bar }  = { bar: 1, foo: 2 };
foo //2 
bar //1

• 没有对应值，导致取不到。

var { baz }  = { bar: 1, foo: 2 };
baz // undefined

• 变量和属性名不一致，但能成功赋值。注意赋值的是baz不是foo,foo是模式，不是变量！

var { foo: baz }  = { bar: 1, foo: 2 };
baz //2 
foo//   error: foo is not defined

• 实际上的对象解构赋值是以下形式的简写

var {foo: foo, bar: bar }  = { foo: 1, bar: 2 };

var obj = { bar: { bar: 1, foo: 2 }, foo: 2 };
var {bar, foo} = obj;
bar === obj.bar // true

• 解构嵌套结构的对象

var arr = [];
var obj = {};
({ bar: obj.prop, foo:arr[0] } = {bar: 123,foo: true });
 arr  // [ true ]
 obj // { prop: 123 } 

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

• 对象解构默认值，

var {x = 3} = {}
x//3
var { x  = 5, y}{x:null, y: 2 }
x// null
y// 2

• 对象和数组的解构赋值都遵循“严格等于undefined，默认值生效”

• 已声明的变量参与解构赋值要非常小心。

var x ;
{x }:{ x:2 }
// error 

• 原型上的属性也是可以解构赋值的

var a = {b: 1 }
a.__proto__.c = 2 ;
var {b, c } = a ;
b//1
c//2 

---

3. 字符串的解构赋值

• 字符串的解构时，字符串被转换成了一个类似数组的对象。

var [a, b, c, d, e ] = "hello";
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'

• 类似数组的对象都有length属性，因此还可以对这个属性解构赋值。

let { length: len } = 'hello';
len // 5