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) // sam

　　取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.

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

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"} = {}) {

}

 

转载于:https://www.cnblogs.com/SamWeb/p/10781117.html