最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Object 类型在ES6中的升级优化

    正文概述 掘金(吃鱼的老鼠)   2021-08-12   439

    这是我参与8月更文挑战的第10天,活动详情查看:8月更文挑战

    优化部分

    1. 对象属性变量式声明。

      ES6 可以直接以变量形式声明对象属性或者方法。比传统的键 值对形式声明更加简洁,更加方便,语义更加清晰。

    let [apple, orange] = ['red appe', 'yellow orange']; 
    let myFruits = {apple, orange}; //  myFruits = {apple: 'red appe', orange: 'yellow orange'};
    

    尤其在对象解构赋值(或者模块输出变量时,这种写法的好处体现的最为明显

    let {keys, values, entries} = Object; 
    let MyOwnMethods = {keys, values, entries}; 
    // MyOwnMethods = {keys: keys, values: values, entries: entries} 
    可以看到属性变量式声明属性看起来更加简洁明了。
    方法也可以采用简洁写法: 
    let ES5Fun = { method: function(){} }; let ES6Fun = { method(){} } 
    
    1. 对象的解构赋值 ES6 对象也可以像数组解构赋值那样,进行变量的解构赋值
    let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'}; 
    
    1. 对象的扩展运算符(...)

    ES6 对象的扩展运算符和数组扩展运算符用法本质上差别不大, 毕竟数组也就是特殊的 对象。对象的扩展运算符一个最最常用也最好用的用处就在于可以 轻松的取出一个目标对象内部全部或者部分的可遍历属性,从而进行对象的合并和分解。

    let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'};
    // otherFruits {grape: 'purple grape', peach: 'sweet peach'}
    

    // 注意: 对象的扩展运算符用在解构赋值时,扩展运算符只能用在最有一个参数 (otherFruits 后面不能再跟其他参数)

    let moreFruits = {watermelon: 'nice watermelon'};
    let allFruits = {apple, orange, ...otherFruits, ...moreFruits};
    
    1. super 关键字 ES6 在 Class 类里新增了类似 this 的关键字super。同 this 总是指向当前函数所在的对象不同,super 关键字总是指向当前函数所在对象的原型对象。

    升级部分

    1. ES6 在 Object 原型上新增了 is()方法,做两个目标对象的相等比较,用来完善'==='方 法。'==='方法中 NaN === NaN //false 其实是不合理的,Object.is 修复了这个小 bug。
    (Object.is(NaN, NaN) // true
    
    1. ES6 在 Object 原型上新增了 assign()方法,用于对象新增属性或者多个对象合并。
    const target = { a: 1 }; 
    const source1 = { b: 2 };
    const source2 = { c: 3 }; 
    Object.assign(target, source1, source2); 
    target // {a:1, b:2, c:3}
    

    注意: assign()合并的对象 target 只能合并 source1、source2 中的自身属性,并不会合并 source1、source2 中的继承属性,也不会合并不可枚举的属性,且无法正确复制 get 和 set 属性(会直接执行 get/set 函数,取 return 的值)。

    1. ES6 在 Object 原型上新增了 getOwnPropertyDescriptors()方法,此方法增强了 ES5 中getOwnPropertyDescriptor()方法,可以获取指定对象所有自身属性的描述对象。结合 defineProperties()方法,可以完美复制对象,包括复制 get 和 set 属性。

    2. ES6 在 Object 原型上新增了 getPrototypeOf()和 setPrototypeOf()方法,用来获取或设 置当前对象的 prototype 对象。这个方法存在的意义在于,ES5 中获取设置 prototype 对像是通 过 __proto__ 属性来实现的,然而__proto__属性并不是 ES 规范中的明文规定的属性,只是浏览器各大产商“私自”加上去的属性,只不过因为适用范围广而被默认使用了,再非浏览器 环境中并不一定就可以使用,所以为了稳妥起见,获取或设置当前对象的 prototype 对象时,都应该采用 ES6 新增的标准用法。

    3. ES6 在 Object 原型上还新增了 Object.keys(),Object.values(),Object.entries()方法, 用来获取对象的所有键、所有值和所有键值对数组。


    下载网 » Object 类型在ES6中的升级优化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元