解构赋值笔记

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

简单的理解解构赋值就是：使用相同的语法结构，进行赋值，原理上就是将用来解构的表达式的属性转换成变量，并且将被结构的数值赋值给它。

比如： 

let obj = {
  a: 1,
    b: {
      c: {
        d: 12
      }
   }
}

let j = {
  a,
  b: {
    c: {
       d
     }
  }
} = obj

console.log(a, d); // 1, 12

// 或者
var q = {
  a: as,
  b: {
    c: {
      d: dd,
    }
  }
} = obj
console.log(as, dd); // 1, 12

或者： 

// 数组解构
let [ a , b , c ] = [ 10 , 20 , 30 ];
console.log(a,b,c); // 10 , 20 , 30

// - 剩余运算只能给变量解构的最后一个变量使用; 
let [ a , b , ...c ]  = [ 1,2,3,4,5,5,6,7];
console.log(a, b, c);

// - 可以进行伪数组真数组转换; 
let [...lis] = document.querySelectorAll("li");

console.log( lis );

// - 变量换位; 
let [ a , b ]  = [ 20 , 30 ];
// 解构赋值换位很方便; 
[ a, b ]  = [ b , a ];
console.log( a , b );

// 以上解构赋值语法都可以直接在函数的参数上使用; 

let foo = (a, b, ...arg) => {
      console.log(a, b, arg);
}
foo(1, 2, 3, 4, 5, 6, 7, 8, 9);


对象赋值 :
let obj = { a : 10 }

let { a } = obj;
// 相当于ES5 ： 
var a; 
a = obj.a;
console.log( a );  // 10
// 注意 : ES6对象结构之中，左侧对象之中的变量既相当于变量名又相当于在对象之中取出的属性名; 
console.log( a );


let obj = { a : 10 , default : "hello default"}
// 如果对象之中的属性需要更名，那么我们就使用 : 语法更名; 
// 在对象之中取出的属性名 : 更新后的变量名 
let { default : _default } = obj;
console.log( _default );

// 对象结构有大用! 
// - 我们可以方便的在对象之中取出某些工具来进行使用; 

// - 以后我们开发的工具大多都是以对象的形式承载数据的，我们使用的时候，可以把这个工具进行取出更名再去使用; 
let { PI : p , random : r } = Math; 
console.log( p , r() );
// 并不是所有的API都支持这样的取出; 

// 有一些工具是依赖内置对象的其他方法的所以this指向还是内置对象; 
// 我们取出之后直接使用this会指向window对象，导致很多的API失效;

// let { setItem }  = localStorage;
// setItem( "key" , "value")