ES6中对象解构的用法与用途

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); // {  '200px', height: '100px', display: 'block' }
console.log(width); // 200px

  这是一个很有意思的用法,我的函数接受一个 widthdefaultStyle (这里甚至可以用 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,当你意识到需要使用它的时候,它的作用就展现出来了。

原文地址:https://www.cnblogs.com/JobsOfferings/p/ES6_obj_deconstruction.html