对象解构 是 ECMAScript6 新推出的特性,有了它可以实现很多我们平时需要比较多操作,或者封装才能做到的东西。
对象的解构
来看一下这个最基础的例子:
let { age, name, data } = { name: "jobsofferings", age: 21 };
console.log(name); // jobsofferings
console.log(age); // 21
console.log(data); // undefined
从上面的例子可以很清楚的观察到,在对象解构中,外部定义的变量由大括号包裹、变量必须与属性同名、对应的变量和属性没有次序、变量没有同名对应的属性相当于未定义(undefind)。
对象解构有什么好处呢?对象解构能够很便捷的将现有对象的内置方法提取出来,还能灵活的获取特定的值,比如:
let {log,sin,cos}=Math;
将一个库中的属性通过解构的方式取出来,只取当前需要的属性,可以节省很多的空间。
function getStyle(w, defaultStyle) {
let width = w || '300px';
// someCode
return { width, ...defaultStyle };
}
const defaultStyle = { height: '100px', display: 'block' }
const style = getStyle('200px', defaultStyle);
const { width } = getStyle('200px', defaultStyle);
console.log(style); // { width: '200px', height: '100px', display: 'block' } console.log(width); // 200px
注意一下第四行的...defaultStyle,这种写法叫做扩展运算符,会将一个数组或者对象转为用逗号分隔的参数序列。
// 对象扩展
const info = { name: "jobsofferings", age: 21, email: '222222' };
const infoChanged1 = { ...info, email: '3' };
const infoChanged2 = { email: '3', ...info };
console.log(infoChanged1); // { name: 'jobsofferings', age: 21, email: '3' }
console.log(infoChanged2); // { email: '222222', name: 'jobsofferings', age: 21 }
//额外:数组扩展
console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
值得注意的是,如果放在新定义的属性放在了后面,会覆盖原数据的属性,若是放在前面,则相当于在初始化了这个对象中的一个值的时候,在此将这个值重置了一次(解构中有的值),所以才会出现第四行、第五行,结果不同的情况,所以这种写法是有顺序的。
同时要注意,对象的解构赋值是可以取到继承的属性的,这点可以通过 Object.setPrototypeOf 来进行操作。
const obj1 = {};
const obj2 = { name: 'jobsofferings',age:20 };
Object.setPrototypeOf(obj1, obj2);
const {name}=obj1;
const {age} = obj1;
console.log(name);//jobsofferings
console.log(age);//20