• 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,当你意识到需要使用它的时候,它的作用就展现出来了。

  • 相关阅读:
    最后完整的excel.java文件
    *将制定类型的List写入Excel中
    初始化Excel表格
    单元格的格式设置 字体大小 颜色 对齐方式、背景颜色等
    生成写入excel
    activity_daochu.xml代码
    设计了activity_daochu.xml
    个人作业第二阶段
    阅读笔记一-1软件=程序+软件工程
    每日总结
  • 原文地址:https://www.cnblogs.com/JobsOfferings/p/ES6_obj_deconstruction.html
Copyright © 2020-2023  润新知