[TOC] >[success] # 对象解构 ~~~ 1.对象解构的语法形式是在一个赋值操作符左边放置一个对象字面量 ~~~ >[danger] ##### 给未定定义的变量赋值 ~~~ 1.下面案例中 '{name, age}' 就是防止在左边的对象字面量的简写，代码 运行后 'personObj.name', 'personObj.age' 分别赋值给了'name','age' 属性上 2.要注意使用解构赋值，就要注意变量初始化的时候必须赋值，下面是错误的 写法： let {name, age} const {name, age} var {name, age} ~~~ * es6的解构赋值 ~~~ const personObj = { name:'wang', age:17 } let {name, age} = personObj console.log(name) // wang console.log(age) // 17 ~~~ * es5 的写法 ~~~ const personObj = { name:'wang', age:17 } let name = personObj.name let age = personObj.age ~~~ >[danger] ##### 给已定义的变量赋值使用 -- 解构赋值 ~~~ 1.当想给对相中的字段赋值给，已经定义的变量的时候，可以通过 小括号的形式包裹，因为 'js' 将一对开发的花括号，是为一个代码块， 语法规定代码块不能出现在赋值语句的左边 2.下面的代码对比上面的代码 首先上面的代码有'变量的标识符'出现在 等号左面的最开头，下面赋值这种是因为，上面已经定义好了，要把对象 中的内容赋值给已经定义好的项只能'大括号'开头，因此需要小括号'包裹' ~~~ ~~~ const personObj = { name:'wang', age:17 } let name = 'yi' let age = 19; ({name,age} = personObj); console.log(name) // wang console.log(age) // 17 ~~~ >[danger] ##### 设置默认值 * 没有规定不存在变量的默认值显示是 undefined ~~~ const personObj = { name:'wang', age:17 } let {name,age,sex} = personObj console.log(name) // wang console.log(age) // 17 console.log(sex) // undefined ~~~ * 自定义默认值如果在对象中存在的值设置默认值是无效的，因为默认值是默认没有触发 * 但对象中存在的值就不走默认值，会以对象中的值为准 ~~~ const personObj = { name:'wang', age:17 } let {name,age,sex='妖'} = personObj console.log(name) // wang console.log(age) // 17 console.log(sex) // 妖 ~~~ >[danger] ##### 想使用别名获取到对象中的值并赋值 ~~~ 1.左侧就是key/value 形式，其中key是对象中的value，value 就是你新叫的别名 ~~~ ~~~ const personObj = { name:'wang', age:17 } let {name:myNmae,age:myAge} = personObj console.log(myNmae) // wang console.log(myAge) // 17 ~~~ >[danger] ##### 嵌套对象解构赋值 ~~~ 1.当对象是嵌套对象的形式，也可以通过嵌套解构赋值获取 ~~~ ~~~ const personObj = { name:'wang', age:17, friend:{ first:{ name:'chun', age:'20' } } } let {friend:{first}} = personObj // 起别名获取 let{friend:{first:firstFriend}} = personObj console.log(first.name) // chun console.log(first.age) // 20 // 通过别名获取 console.log(firstFriend.name) // chun console.log(firstFriend.age) // 20 ~~~ >[danger] ##### 总结 ~~~ 1.对象的结构可以理解成对象是以key做唯一标识的，因此我们结构时候可以理解提取就是这个key 当然，也可以对取出的key重新命名 ~~~ >[danger] ##### console.log 应用场景 ~~~ 1.用时候我们可能会写大量的console.log 代码，但实际我们可以利用结构直接取出log 方法来打印使用 ~~~ ~~~ const { log } = console log('foo') log('bar') log('123') ~~~