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异步传输json数据格式实例代码
Nov 23 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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 adodb分页实现代码
2009/03/19 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
JS实现简单打字测试
2020/06/24 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python开发之str.format()用法实例分析
2016/02/22 Python
学习python类方法与对象方法
2016/03/15 Python
Python中防止sql注入的方法详解
2017/02/25 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
出国考察邀请函
2014/01/21 职场文书
高一英语教学反思
2014/01/22 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
婚庆答谢词大全
2015/09/29 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS