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 相关文章推荐
jQuery中:visible选择器用法实例
Dec 30 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
js css自定义分页效果
Feb 24 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
js下弹出窗口的变通
2007/04/18 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python开发入门——列表生成式
2020/09/03 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
中学教师培训制度
2014/01/31 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
写给领导的感谢信
2015/01/22 职场文书
党员违纪检讨书
2015/05/05 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电