对象的解构赋值 就是 取对象 所有可遍历 没有被读取的属性，添加到指定的对象上面
let {x, a, y} = {x:1, y:3, c:4}
x // 1
a // undefined
y // 3
这个例子就是 =号右边的对象 根据所要的 进行解构赋值 符合条件的 直接添加到指定的对象上面
要注意的是 对象的解构赋值 右边必须是一个对象{} 要不然就会报错了
也可以使用扩展运算符...修改上面代码
let {x, ...all} = {x:1, y:3, c:4}
x // 1
all // {y:3, c:4}
解构赋值不影响继承的对象属性
let o1 = {x: 1}
let o2 ={y: 2}
o2.__proto__ = o1
let {x, y} = o2
// x : 1
// y : 2
这里o2 原型指向了o1原型 继承了o1的x 所以最终解构赋值 能得到x和y
要注意的是 如果解构赋值有了... 不能够继承原型对象的属性
let o1 = {x: 1}
let o2 ={y: 2}
o2.__proto__ = o1
let {...vals} = o2
// vals.x // undefined
// vals.y // 2
上面最终用扩展运算符...进行解构 就不能够继承到o1的x属性
我们知道 es6有一个新增对象的方法Object.create 这个就是直接创建的对象 添加到原型上面去 也就是添加到了_proto_上了
下面在用一个清晰栗子 看看为什么...拓展运算符不能继承属性
let o = Object.create({x:1, y:2})
o.c = 3
let {x, ...vals} = o
let {y, c} = vals
// x : 1
// y : undefined
// c : 3
解构赋值的第一行代码let {x, ...vals} = o 这里的x是正常对 o解构赋值得到的结果 是1
...vals 得到的结果 其实就只有{c:3} 因为...扩张运算符不能继承原型的属性 o.c 是自身的属性 所以能被取到
解构赋值第二行代码let {y, c} = vals 经过上面的继承折腾 最终输出的解构其实是let {y, c} = {c:3}
所以y等于undefined
弄清楚继承 和 解构赋值的扩展运算符 就不会吃继承的亏了
扩展运算符: 取出剩余对象的所有可以遍历属性 拷贝到设定的对象中
let {x, ...vals} = {x:1 , a:2 ,y:3}
x // 1
vals // {a:2, y:3}
我们知道 数值也是特殊的对象 你用typeof [] 试试就知道了
所以对象的扩展预算符 也可以用在数组
问题来了: [a, b ,c ] 把这个数组转成一个对象解构 从左到右顺序 按着键值 排序
得到最终解构是:
{0: 'a', 1: 'b', 2: 'c'}
我们看到这问题 一般按着套路是写一个for循环
ES6的 ...扩展运算符就帮上大忙了
const o = {...[a,b,c]}
// o {0: 'a', 1: 'b', 2: 'c'}
具体为什么会这样 可以参考我另外一篇文章 数组的扩展运算符
const o = {...1}
o // {}
对象的扩展运算符 后面如果不是一个对象 会自动转成一个对象 然后在查找属性
上面的数字1 直接转成了Number{1} 然后Number本身没有属性 也就是变成{}
所以如果后面是一个字符串 直接转成一个类似数组的对象 就会按着数组的扩展预算符执行操作
最后在按着对象的扩张运算符来转成对象
const o = {...'12'} // [1, 2]
o // {0: '1', 1:'2'}