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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
基于复选框demo(分享)
Sep 27 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
google广告之另类js调用实现代码
Aug 22 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 7.4中使用预加载的方法详解
2019/07/08 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python银行系统实现源码
2019/10/25 Python
iPython pylab模式启动方式
2020/04/24 Python
django queryset相加和筛选教程
2020/05/18 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
学习礼仪心得体会
2014/09/01 职场文书
无房证明范本
2014/09/17 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
慰问信范文
2015/02/14 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
Python中如何处理常见报错
2022/01/18 Python
Python循环之while无限迭代
2022/04/30 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript