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 相关文章推荐
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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脚本的10个技巧(6)
2006/10/09 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python 备份程序代码实现
2017/03/06 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
小学运动会表扬稿
2014/01/19 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
社会调查研究计划书
2014/05/01 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js