ES6 解构赋值

Posted 2021-10-30 samweb

　　解构赋值，就是怎么快速地从对象和数组中获取到你想要的数据。对象的结构赋值和数组的解构赋值用法差不多，只不过解构赋值的方式不同，一个是依据的是属性，一个依据的是数组的索引。先来看对象的解构赋值。看一个实例就知道怎么使用了，语法很简单

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.