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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JS跨域总结
Aug 30 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
vue时间格式化实例代码
Jun 13 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
HTML+JS实现在线朗读器
Feb 15 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开发框架总结收藏
2008/04/24 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
英语教师个人总结
2015/02/09 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python