1. 使用解构从对象中获取值
首先,我们定义一个对象,传统上,我们将使用点 ( . ) 表示法或下标 ( [ ] ) 表示法从对象中检索值。
const user = { userName: '明天也要努力',city: '南京'}; const userName = user.userName; const city = user['city']; console.log(userName,city); // 明天也要努力 南京
当然这两种方式在当前情况下是没有问题的,但是当 user 的属性多了,我们就要不停的复制粘贴,产生很多重复的代码。
通过解构赋值,可以快速的来获取值。
如:使用对象的键名来创建变量,并将对象的值分配给相同的键。这样无论有多少属性,只要赋值属性名即可,同样的也减少了很多重复代码。
const user = { name: '明天也要努力',city: '南京'}; const {name, city} = user; console.log(name,city); // 明天也要努力 南京 // 上面的赋值代码变成了这样:在对象解构的写法中,等号左边的写法就类似于一个对象,不过属性名对应的不是值,而是将要赋值的变量名。 const {name:newName, city:newCity } = { name: '明天也要努力',city: '南京'}; console.log(newName,newCity);
null 和 undefined 不能被解构
根据 ToObject() 的定义,null 和 undefined 不能被解构,否则会抛出错误:
const { _ } = null; // TypeError const { _ } = undefined; // TypeError
这里的 _ 只是用于测试而已,实际上对象里面并没有 _ 这个属性。因为在尝试解构 null 的时候就已经报错了,不管前面解构的属性名是什么都是同样的结果。
给事先声明的变量赋值
解构并不要求变量必须在解构表达式中声明。不过,如果是事先声明的变量赋值,则赋值表达式必须包含在一对括号中:
let newName, newCity; const user = { name: '明天也要努力',city: '南京'}; ({name:newName, city:newCity} = user); console.log(newName,newCity); // 明天也要努力 南京
2. 使用解构从嵌套对象中获取值
在上面的例子中,user 只是一个简单的单层对象,我们在日常的开发中也会遇到嵌套的对象,那么使用结构赋值该如何检索嵌套对象中的值。
const user = { name: '明天也要努力', city: '南京', job:{ post:'前端' } }; const {name, job:{post}} = user; console.log(name,post); // 明天也要努力 前端
3. 使用对象解构定义新变量以及默认值
默认值
可能被解构的对象中没有被引用的属性,可通过下面这种方法来定义默认值,也就是如果对象中没有对应属性,就使用默认值:
const user = { name: '明天也要努力', city: '南京', job:{ post:'前端' } }; const { name = 'test', age = 25, sex, job:{ post, level = '初级' } } = user; console.log(name,age,sex,post,level); // 明天也要努力 25 undefined 前端 初级
新变量
创建一个全新的变量并分配一个使用对象属性值计算的值
const user = { name: '明天也要努力', city: '南京', job:{ post:'前端' } }; const { name = 'test', age = 25, job:{ post, }, detail=`${name}今年${age},岗位:${post}` } = user; console.log(detail); // 明天也要努力今年25,岗位:前端
4. For of 迭代和解构
let list = [ { name: '小明', age: 20, info: { city: '南京', job: '开发', }, },{ name: '小刚', age: 25, info: { city: '重庆', job: '产品', }, } ]; for (let {name, age:newAge, sex = '男',info: {city,job}} of list) { console.log(name, newAge, sex,city,job); } // 小明 20 男 南京 开发 // 小刚 25 男 重庆 产品
5. 从作为函数实参的对象中提取数据
function userId({id}) { return id; } function getInfo({name, info:{ city, job:newJob, money=8000}}){ console.log(name,city,newJob,money); } var user = { id: 42, name: "小明", info: { city: '南京', job: '开发', }, }; console.log("userId: " + userId(user)); // "userId: 42" getInfo(user); // 小明 南京 开发 8000
6. 对象属性计算名和解构
计算属性名,可以被解构。
let key = "z"; let { [key]: foo } = { z: "bar" }; console.log(foo); // "bar"
7. 对象解构中的 Rest
Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; console.log(a, b, rest); // 10 20 {c: 30, d: 40}
8. 无效的 JavaScript 标识符作为属性名称
通过提供有效的替代标识符,解构可以与不是有效的 JavaScript 标识符的属性名称一起使用。
const foo = { 'fizz-buzz': true }; const { 'fizz-buzz': fizzBuzz } = foo; console.log(fizzBuzz); // true
9. 解构对象时会查找原型链(如果属性不在对象自身,将从原型链中查找)
// 声明对象 和 自身 self 属性 var obj = {self: '123'}; // 在原型链中定义一个属性 prot obj.__proto__.prot = '456'; // test const {self, prot} = obj; // self "123" // prot "456"(访问到了原型链)