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使用手册之一
Mar 24 Javascript
给Function做的OOP扩展
May 07 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 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
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
浅谈python常用程序算法
2019/03/22 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Django权限控制的使用
2021/01/07 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
幼儿园运动会入场词
2014/02/10 职场文书
会计自荐信范文
2014/03/09 职场文书
培训班主持词
2014/03/28 职场文书
研发工程师岗位职责
2014/04/28 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
电影复兴之路观后感
2015/06/02 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Vue Element plus使用方法梳理
2022/12/24 Vue.js