ES6 Object方法扩展的应用实例分析


Posted in Javascript onJune 25, 2019

本文实例讲述了ES6 Object方法扩展的应用。分享给大家供大家参考,具体如下:

在ES6中针对对象的方法做了一些扩展和优化,下面简单总结下常用的方法

is方法判断两个对象是否全等

console.log(Object.is({},{}), {} === {}); // false, false
console.log(Object.is(NaN,NaN), NaN === NaN); // true, false
console.log(Object.is(+0,-0), +0 === -0); // false, true

assign方法用于对象属性的拷贝

如果两个参数,把第二个参数中可枚举的属性拷贝到第一个参数对象中, 仅限于可枚举的属性,如果有多个参数,那么同样拷贝

var obj = {};
var obj2 = Object.assign(obj,{name:'Joh'},{age:10});
console.log(obj === obj2, obj); // true, {name:'Joh', age:10}
console.log(Object.is(obj,obj2)); // true

相同属性的覆盖拷贝

const DEFAULT_OPTIONS = {
 name:"Joh"
};
function test(opts) {
 let options = Object.assign({}, DEFAULT_OPTIONS, opts);
 console.log(options);
}
test(); // {name: "Joh"}
test({name:"Lily",age:10}); // {name: "Lily", age: 10}

Symbol属性同样拷贝

var skey1 = Symbol('test');
var skey2 = Symbol('test');
var obj = {};
Object.assign(obj,{name:'Joh'},{age:10},{[skey1]: 'I am test1'},{[skey2]: 'I am test2'}); // 拷贝
// 验证Symbol的拷贝成功
console.log(obj[skey1]); // I am test
console.log(obj); // {name: "Joh", age: 10, Symbol(test): "I am test1", Symbol(test): "I am test2"}

Object方法:keys,getOwnPropertyNames, getOwnPropertySymbols,getOwnPropertyDescriptor的应用

class A {
 constructor() {
  this.name = 'Joh';
 }
 [Symbol('fullnameA')] () {
 }
 getName() {
 }
}
class B extends A {
 constructor() {
  super();
  this.age = 22;
 }
 [Symbol('fullnameB')] () {
 }
 getAge() {
 }
}
B.prototype.getColor = function () {};
var b = new B();
// 备注:只能获取【自身可枚举属性】,但得不到【原型链上的属性(比如方法) + Symbols属性】
console.log(Object.keys(b)); // ["name", "age"]
// 备注:可获取【可枚举属性】,但得不到【原型链上的属性 + Symbols属性】
console.log(Object.getOwnPropertyNames(b)); // ["name", "age"]
// 使用keys怎么也得不到原型链上不可枚举的属性[通过语法糖创建的方法]
console.log(Object.keys(B.prototype)); // ["getColor"]
// 使用 getOwnPropertyNames 传入prototype 可以得到原型链上的属性
console.log(Object.getOwnPropertyNames(B.prototype)); // ["constructor", "getColor", "getAge"]
// 通过getOwnPropertySymbols可以得到自身Symbols属性,但得不到继承的Symbol属性
console.log(Object.getOwnPropertySymbols(B.prototype)); // [Symbol(fullnameB)]
// 获取自身可枚举属性包括继承过来的,备注:通过class内部的语法糖创建的方法是不可枚举的,但是通过后期B.prototype.出来的是可枚举的
for(let key in b) {
 console.log(key); // 依次输出 name 和 age 和 getColor
}
// 描述对象 测试可枚举性
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getColor'));
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getColor').enumerable); // true
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getAge').enumerable); // false

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JS的数组的扩展实例代码
Jul 09 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
Javascript Objects详解
Sep 04 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 #Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 #Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
python pdb调试方法分享
2014/01/21 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Django中使用locals()函数的技巧
2015/07/16 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python3去掉string中的标点符号方法
2019/01/22 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python批量生成条形码的示例
2020/10/10 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
电子专业推荐信范文
2013/11/18 职场文书
留学推荐信写作指南
2014/01/25 职场文书
学术会议主持词
2014/03/17 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
python如何读取.mtx文件
2021/04/22 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫