ES6 对象解构的用法与用途

Posted 2021-03-20 Updated 2024-06- 7

By Administrator

6~7 min read

ES6 对象解构的用法与用途

对象解构是 ECMAScript6 新推出的特性，有了它可以实现很多我们平时需要比较多操作，或者封装才能做到的东西，所以这篇文章，咱们来详细了解一下 ES6 对象解构的用法与用途。

本篇文章所示代码皆可在兼容ES6的环境，比如chrome浏览器或是高版本node中供大家自行测试与体验代码用处。

对象解构

现在我们来看一个最基础的例子。

let { age, name, data } = { name: "jobsofferings", age: 21 };
console.log(name); // jobsofferings
console.log(age); // 21
console.log(data); // undefined

可以很明显的观察到，在对象解构中，外部定义的变量由大括号包裹、变量必须与属性同名、对应的变量和属性没有次序、变量无同名对应属性的相当于未定义(undefined)。

那么对象解构有什么好处呢？在我看来，对象解构能够很便捷的将现有对象的内置方法提取出来，还能灵活的获取特定的值，比如
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

这是一个很有意思的用法，我的函数接受一个 width 和 defaultStyle (这里甚至可以用 arguments 会更好，不过为了简便演示，这个函数也不需要具体的意义，所以就没写出来)，使用了对象解构的方式去返回一个对象，我可以直接使用 style 去获取，也可以通过对象解构的方式只取其中的一个。

这样做的好处是更加的灵活，这个函数可能是一个公共函数用于生产某特定种类的数据，但是事实上你的各个组件(或者是模块)是需要这么多数据，只需要部分特定数据的，这样你就可以使用对象解构专门的去取出来，既灵活操作，又节省内存空间。

值得注意的是第四行...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

对于对象来说，通过...obj这种写法，可以将除了外面最新定义的属性(通常称为默认值)以外的其他属性循环绑定到新的对象中去。值得注意的是，如果放在新定义的属性放在了后面，会覆盖原数据的属性，若是放在前面，则相当于在初始化了这个对象中的一个值的时候，在此将这个值重置了一次(解构中有的值)，所以才会出现第四行、第五行，结果不同的情况，所以这种写法是有顺序的。

同时要注意，对象的解构赋值是可以取到继承的属性的，这点可以通过 Object.setPrototypeOf 来进行操作。

const obj1 = {};
const obj2 = { name: 'jobsofferings' };
Object.setPrototypeOf(obj1, obj2);
const { name } = obj1;
console.log(name); // jobsofferings

灵活、适当地使用对象解构会是你的代码更加的科学与可维护，所以在心里有关于"对象解构"这个概念和用法就OK，当你意识到需要使用它的时候，它的作用就展现出来了。

前端

License: CC BY 4.0