对象结构

1.基本赋值

let o = {p: 42, q: true};
let {q, p,z} = o;

console.log(p); // 42
console.log(q); // true
console.log(q);//undefined --解构失败，变量的值等于undefined

2.无声明赋值

//一个变量可以独立于其声明进行解构赋值。--先声明，再赋值
let a, b;
;({ b,a} = {a: 1, b: 2});
/*注意！！
*赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的。
*{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 { b,a} 被认为是一个块
而不是对象字面量。
*然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
*建议 ( ... ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。
*/

3.给新的变量名赋值

//可以从一个对象中提取变量 并赋值给与对象属性名不同的新的变量名。

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true

小结
综上说明，对象解构赋值的内部机制，是先找到同名属性（匹配的模式），然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

//对象的解构赋值下面形式是上面形式的简写
let { p, q} = {p: 42, q: true};  //简写-es6中，当属性名和属性值同名时可以简写
let { p: p, q: q} = {p: 42, q: true};

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
//上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

4.默认值

默认值生效的条件是：对象的属性值严格等于undefined（===）

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5  --默认值生效

//给新的变量名解构赋值时提供默认值
var { bar , message: msg = 'hello' } = {bar:'aaa'};
console.log(bar);// "aaa"
console.log(msg );// "hello"
console.log(message);// error: foo is not defined

5.嵌套结构的解构

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
console.log(line );// 1
console.dir(loc)  // Object {start: Object}
console.log(start ) // Object {line: 1, column: 5}
//有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。
/*注意，最后一次对line属性的解构赋值之中，
只有line是变量，loc和start都是模式，不是变量。*/

//嵌套赋值
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

console.log(obj); // {prop:123}
console.log(arr );// [true]

//注意-如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。
let {foo: {bar}} = {baz: 'baz'}; //报错
//Uncaught TypeError: Cannot read property 'bar' of undefined

6.对象解构中的 Rest

let {a, b, ...ss} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // 10 
console.log(b); // 20 
console.log(ss);// { c: 30, d: 40 }

7.解构对象时会查找原型链

如果属性不在对象自身，将从原型链中查找

var obj = {self: '123'};  // 声明对象 和 自身 self 属性
obj.__proto__.prot = '456';   // 在原型链中定义一个属性 prot

const {self, prot} = obj;  // self "123"  // prot "456"（访问到了原型链）

混合解构 - 解构嵌套对象和数组

let node = {    
      type: "Identifier",   
      name: "foo",  
      loc: {                                              
             start: {                                       
                       line:    1,
                       column:    1
              },
              end: {    
                       line:    1,
                        column: 4   
                      } 
           },
        range:  [0, 3]          
};
let {loc: { start }, range: [ startIndex] } =   node;
console.log(start.line);    // 1 
console.log(start.column);    // 1 
console.log(startIndex); //0

要记住解构模式中的 loc: 与 range:只是对应于 node对象中属性的位置。
混合使用对象与数组解构，node的任何部分都能提取出来。
对于从JOSN配置结构中抽取数据来说，这种方法尤其有用，因为它不需要探索整个结构，便能准确提取其中想要的信息片段。

参数解构

解构有一个特别有用的场景，即在传递函数参数时。
当JS的函数接收大量可选参数时，一个常用模式是创建一个 options对象，其中包含了附加的参数，就像这样：

//es5版： options 表示可选参数 function 
setCookie(name, value,  options)    {
          options   =   options ||  {};
          let   secure = options.secure,    
                path = options.path,    
                domain = options.domain,    
                expires =   options.expires;
    //  设置  cookie  的代码 
}
//第三个参数映射到  options 
setCookie("type", "js", { secure:   true,   expires:    60000 });

//es6结构版--
function setCookie(name, value, {   secure, path, domain, expires }) {
//  设置  cookie  的代码 
}
setCookie("type", "js", {secure:    true,   expires: 60000 });
//解构参数在没有传递值的情况下类似于常规参数，它们会被设为  undefined。

1. 解构的参数是必需的
参数解构有一个怪异点：默认调用函数时未给参数解构传值会抛出错误。

//  出错！
 setCookie("type",  "js");
/*调用时第三个参数缺失了，相当于{  secure, path, domain, expires }=undefined，
解构赋值右侧的值为null或undefined时，解构会抛出错误。*/

若让解构的参数作为必选参数，上述行为并不会令人困扰。但若要求它是可选的，可给解构的参数提供默认值来处理这种行为，就像这样：

function setCookie(name, value, { secure, path, domain, expires } = {}) {
                //  ... 
}
/*第三个参数提供了一个空对象作为其默认值。
给解构的参数提供默认值，也就意味着 若未向setCookie()函数传递第三个参数，
则secure、path、domain 与 expires的 值全都会是undefined，此时不会有错误被抛出。*/

2. 参数解构的默认值

function setCookie(name,value,
    {  secure = false,
       path = "/",
       domain="example.com", 
       expires = new Date(Date.now() + 360000000) } = {}   ) {
        //  ...
 }

代码中参数解构给每个属性都提供了默认值，所以可避免检查指定属性是否已被传入（以便在未传入时使用正确的值）。
而整个解构的参数同样有一个默认值，即一个空对象，令该参数成为可选参数。

小结：

解构使用熟悉的对象字面量与数组字面量语法，可将数据结构分离出并只获取我们感兴趣的信息。
对象解构模式允许从对象（包括数组）中进行提取，而数组模式则只能用于数组。
规则：
数组的元素是按次序排列的，变量的取值由它的位置决定；
对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
对象与数组解构都能在属性或项未定义时为其提供默认值；
在赋值表达式右侧的值为 null 或 undefined 时，两种模式都会抛出错误。
可在深层嵌套的数据结构中使用对象/数组解构，下行到结构的任意深度。
使用var、let 或 const 的解构声明来创建变量，就必须提供初始化器。解构赋值能替代其他赋值，并且允许把值解构到对象属性或已存在的变量上。
参数解构使用解构语法作为函数的参数，让“选项”（options）对象更加透明。实际感兴趣的数据可与具名参数一并列出。解构的参数可以是对象模式、数组模式或混合模式，并能使用它们的所有特性。

小记3 - 2解构赋值：更高效的提取变量 - 解构对象