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 $.get 的妙用 访问本地文本文件
Jul 12 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP加密解密实例分析
2015/12/25 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python实现代理服务功能实例
2013/11/15 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
华为C++笔试题
2014/08/05 面试题
小学生班会演讲稿
2014/01/09 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
道歉信范文
2015/05/12 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Python制作表白爱心合集
2022/01/22 Python