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 Clone Bug解决代码
Dec 22 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
JS实现网页时钟特效
Mar 25 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
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
python实现跨文件全局变量的方法
2014/07/07 Python
Python探索之Metaclass初步了解
2017/10/28 Python
用python与文件进行交互的方法
2018/03/01 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
树莓派实现移动拍照
2019/06/22 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
海底两万里读书笔记
2015/06/26 职场文书
校园新闻稿范文
2015/07/18 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL