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 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
Vuejs 单文件组件实例详解
Feb 09 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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 中的类
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python对文件的操作方法汇总
2020/02/28 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
酒店销售主管岗位职责
2014/01/04 职场文书
大学生演讲稿
2014/04/25 职场文书
单位单身证明样本
2014/10/11 职场文书
小学师德师风整改措施
2014/10/27 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
安全承诺书格式范本
2015/04/28 职场文书
入党积极分子考察意见
2015/06/02 职场文书
教师病假条范文
2015/08/17 职场文书
python小型的音频操作库mp3Play
2022/04/24 Python