ES6 解构赋值

　　解构赋值，就是怎么快速地从对象和数组中获取到你想要的数据，先来看对象的解构赋值。

let person = {
    name: 'sam',
    age: '28'
};

let {name, age} = person; //  解构赋值
console.log(name, age) // 'sam' 28

　　对象字面量的方式声明了两个变量name 和age, let {name, age} 放到了等号的左边， 右边就是我们要想从中获取数据的对象。赋值的依据就是对象的属性，变量名和对象的属性名一致。对象的解构赋值就是对对象进行分解，从对象中找出和声明的变量名一致的属性名，然后把属性值赋值给对应的变量。这时，也会出现一个问题，当声明的变量名，在对象中没有对应的属性名呢？很简单，这个变量取值undefined. 

let {job } = person; 
console.log(job) // undefined

　　但变量取值undefined, 对以后的计算或操作不太友好，最好给它一个默认值。默认值的赋值方式，也很简单，使用= 进行赋值。

let {job = 'web' } = person; 
console.log(job) // web

　　以上这种解构赋值的方式，还有一个限制，就是声明的变量名必须和对象的属性名一致。如果我们已经声明了一个和对象同名变量，那就不能再声明这个相同的变量了， 那是不是就不能使用解构赋值了？也不是，就是语法稍微复杂了一点

let {name: localName } = person; 
console.log(localName) // sam

　　语法为{对象的属性名： 声明变量名}， 意思是获取到对象中name 属性对应的值，然后把它赋值给 localName变量，所以，在这种情况下，就不能访问name了，否则会报错。当然在这种赋值方式下，也可以提供默认值，因为我们始终是从对象中获取属性值，很容易取到对象中没有的属性

let {job: localJob = 'web' } = person; 
console.log(localJob) // web

　　取person 对象中的job 属性的值，赋值给localJob 变量，很明显，赋值的是undefined, 因为person 中没有job 属性，localJob 变量也就取值undefined, 有必要给它提供一个默认值。

　　以上都是声明变量，使用解构赋值，其实单纯的赋值也可以是使用解构赋值。变量之前就已经声明了，我们只想给已声明的变量赋值，那就直接把变量放到大括号里面，放到等号的左边，右边放要解构的对象

let person = {
    name: 'sam',
    age: '28'
};

let age = 10;
({age} = person) // 只是赋值，注意要把解构表达式放到小括号里面

　　要注意一点，使用解构的方式，只进行赋值操作时，要把整个表达式用小括号括起来。如果不用括号括起来，{age} = person,  第一个{ 会被js 解析为块级作用域的开始，你不能给一个作用域赋值，所以就会报错。像{age} = person 这样的解构赋值表达式，赋值完之后，整个表达式的值仍然是=后面的对象，说起来可能有点不太理解，举个例子就简单了

let age = 10;
let obj;
obj = {age} = person;

console.log(age, obj) // 28 { name: 'sam', age: '28' }

　　看一下obj =｛age｝ = person;  赋值操作都是从右边开始计算， 先｛age｝= person，  person 对象进行解构赋值，然后再赋值给obj. 正如刚才所说，解构赋值表达式最终的结果是=后边的对象， {age} = person 解构赋值完成以后得到的值是person 对象，然后把person 对象赋值给了obj, 现在obj === person 为true. 如果这样的话，person的解构赋值也就可以 这样写

({age} = {name} = person);

　　嵌套对象也可以进行解构，只不过语法看起来有点别扭。

let person = {
    address: {
        province: '广东',
        city: '深圳'
    }
}

let {address: {province}} = person;
console.log(province)

　　person 对象嵌套了address 对象，那怎么找到address 对象中的属性呢？肯定是先找address 属性，只有找到它，才能找到它下面的属性。address 属性的解构就和普通解构没有什么区别，let {address} = person.  现在就是向下一步，解析address. 解析address， 无非就是把address 赋值给另外一个解构对象， let {province} = address. address 怎么赋值给别的对象呢？ 在解构中使用的是冒号  let {address: anotherAddress} = person.  我们把anotherAddress 换成{province} 又可以了。 let {address: {province}} = person, 没有问题了。嵌套解构，相当于找到了一个address 属性， 把它赋值给一个匿名的变量（：右侧是要赋值给的目标），正好，这个匿名的变量是一个对象，又可以按照解构的方式取对象里面的属性值{province} 就产生了。

 　　对象的解构赋值差不多，再说一下数组的解构赋值。数组是使用数组字面量的方式来解构赋值，也就是说，声明变量的时候，把变量放在数组字面量中。

let colors = ['red', 'green'];
let [firstColor, secondColor] = colors;

console.log(firstColor, secondColor); // 'red' 'green'

　　那数组是怎么实现解构赋值的？ 用的是位置或索引，因为数组中，元素的排列都是有顺序的，第一个元素就是在数组的第一个位置上，所以声明变量的时候，第一个变量就对应数组中的第一个位置的元素，第二个变量对应数组中第二位置的元素， firstColor 就对应数组中的第一个值 'red', secondColor 就对应数组中的第二个值'green'.  那如果只想获取第二个值呢？ 第一个变量就不用声明了，直接写一个逗号，

let colors = ['red', 'green'];
let [, secondColor] = colors;

console.log( secondColor); // green'

　　一个逗号代表的就是一个位置。数组的解构赋值就是位置的一一对应，我们想要数组中哪个元素的值，声明的变量就要放到哪个位置上，如果这个位置是中间位置，而前面的元素你有不想要，那就用逗号隔开，比如你想要第六位置的元素的值，前面就是5个逗号。

let colors = ['red', 'green'];
let [,,,,, sixColor] = colors;

　　当然对于这个例子来说，没有太大的意义，因为colors 数组只有两个元素， 第六位置上肯定没有值。 sixColor 如果没有获取到值，肯定是undefined， 这时也可以给它一个默认值。

let [,,,,, sixColor = 'black'] = colors;

　　和对象的解构赋值一样，除了声明时的解构赋值外，直接给变量赋值也是没问题的 。

let colors = [ "red", "green", "blue" ];
let firstColor = "black";
let secondColor = "purple";

[ firstColor, secondColor ] = colors;
console.log(firstColor, secondColor); // "red" "green"

　　这种解构赋值的方式有一个巨大的作用，我们可以很轻松的交换两个变量的值。

let x = 1, y = 2;

[y, x] = [x, y];

console.log(x, y); // 2 1

　　再来简单的看一下嵌套数组的解构赋值，一个例子就很明显了。

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];

let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor, secondColor); // "red" "green"

　　数组解构赋值的时候，可以看做把colors 的第二项赋值给一个匿名变量，这个变量正好也是一个数组，顺便就再进行一次解构赋值。可以看到嵌套数组的解构赋值，就相当于比着葫芦画瓢， 要解构的数组长什么样，声明变量的时候所用到的数组格式就长什么样，只不过它里面放到都是变量，变量和数组元素的一一对应。

　　除了和对象的解构赋值相同点之外，数组解构还可以使用... 操作符， 用法和函数的参数使用方法一样，把剩余的元素收集起来。

let colors = [ "red", "green", "lightgreen" , "blue" ];

let [ firstColor, ...restColor ] = colors;
console.log(firstColor); // "red" 
console.log(restColor); // [ 'green', 'lightgreen', 'blue' ]

　　解构赋值的另外一个作用是函数参数的定义，解构赋值的核心就是赋值，只要是赋值的地方，我们都可以用解构赋值表达式。函数的参数正好也是赋值，函数调用的时候就是把实参的值赋值给形参，那么形参的定义，就可以使用解构赋值的声明变量的方式，原来，我们的形参直接定义一个options , 现在就可以定义成options 要接受的内容。{method, time}

function getRequest(url, {method,time}) {
    
}

　　这样函数的使用就会更加的方便，一看函数声明就知道传递什么参数，还可给它赋值一个默认的参数，这样函数的运行就更加不会出错。

function getRequest(url, {method = "get",time = "2000"} = {}) {

}

 　　解构和重构，这是you don't kown js 中的提到的一个相对高级的用法， 有一个默认的default 配置，就是一个default 的变量。

const defaults = {
  options: {
    remove: true,
    enable: false,
    instance: {}
  },
  log: {
    warn: true,
    error: true
  }
}

　　现在有一个配置，就是一个config 变量，它也必须有和default 一样的格式和属性，如果config配置中的属性有值，就使用config 中的值，如果config 属性中没有值，就要使用default 中的值进行赋默认值，假设现在config 变量如下：

let config = {
  options: {
    remove: false,
    instance: null
  }
};

　　那怎么才能把default 中的值放合并到config 中？ 它的做法如下，先对config 进行解构，然后再重建config， 代码如下

// 最外面的括号声明的是一个块级作用域
{
  let {  // 解构赋值
      options: {
      remove = defaults.options.remove,
      enable = defaults.options.enable,
      instance = defaults.options.enable
    } = {},
  
    log: {
      warn = defaults.log.warn,
      error = defaults.log.error
    } = {}
  } = config;

  // restructure 重建
  config = {
    options: { remove, enable, instance },
    log: { warn, error }
  };
}

　　稍微解释一下，先对config 进行解构， let {options: {} = {},  log: {} ={}} = config,  把config中的options 和log 解构出来，为了防止config中没有options和 log，它用空对象进行了默认值的赋值操作，注意，这个语法不对， 只是为了解释。然后再对options 和log 又进行了一个解构，options: {remove = defaults.options.remove}, options 中的remove 取出值，如果没有值，就使用默认值defaults中的值。这时就是声明了一个remove 变量，它的值先是config 中的remove 属性值，如果config 中没有remove属性，它就使用defaults 中的remove值。其它的enable, instance,  warn, error 也是同样的道理，它们就是变量。有了变量后，重新组装了config