ES6 Object方法扩展的应用实例分析

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • ES6中字符串的使用方法扩展

    字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中"xxxx"表示字符的码点. "\u0061" // "a" 但是,这种表示法只限于\u0000--\uFFFF之间的字符.超出这个范围的字符,必须用两个双字节的形式表达. "\uD842\uDFB7" // "

  • ES6学习教程之对象的扩展详解

    一. 属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法.意思就是说允许在对象中只写属性名,不用写属性值.这时,属性值等于属性名称所代表的变量.下面分别举一个例子来说明: 属性: function getPoint(){ var x = 1 ; var y = 2; return {x,y} } 等同于 fucntion getPoint(x,y){ var x = 1 ; var y = 2; return {x:x,y:y} } 测试: getPoint();//{x:1,y

  • ES6 Object属性新的写法实例小结

    本文实例讲述了ES6 Object属性新的写法.分享给大家供大家参考,具体如下: 之前我们定义一个对象特别麻烦,现在ES6简化了这些麻烦,在对象属性的新定义方法中存在以下的优化 我们之前定义对象属性的方法 var obj = { getName:function(firstName,lastName){ return {firstName: firstName, lastName: lastName} } } 比较的麻烦 ES6中属性新的定义方法,极简主义 var obj = { getName

  • ES6新特性之Object的变化分析

    本文实例讲述了ES6新特性之Object的变化.分享给大家供大家参考,具体如下: Object的变化 1. ES6允许在对象中只写属性名,不写属性值,属性值为属性名对应的变量值. var a = 'hi'; var obj = {a}; console.log(obj); //Object {a: "hi"} 2.对象内方法的简写. var a = 'hi'; var obj = { name: 'ES6', a, sayHi(){ console.log(this.a+' '+thi

  • ES6中新增的Object.assign()方法详解

    前言 将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作.下面这篇文章将介绍ES6的Object.assign()属性,可以用于对象复制. 在JavaScript生态系统中,对象复制有另外一个术语: extend.下面是两个JS库提供的extend接口: Prototype: Object.extend(destination, source) Underscore.js: _.extend(destination, *sources) Object.assign()介绍 E

  • ES6中Math对象的部分扩展

    1.Math.trunc() 该方法用于取出一个小数的小数部分,返回整数部分.看例子吧: Math.trunc(1.234); //1 Math.trunc(-2.34141); //-2 Math.trunc(3.9); //3 //对于非数值,Math.trunc会内部使用Number将其转为数值 Math.trunc("12.87656"); //12 //对于空值和无法截取整数的值,返回NaN Math.trunc("a"); //NaN Math.trun

  • JavaScript中ES6字符串扩展方法

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu

  • ES6中的数组扩展方法

    form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: var inputObjs=document.getElementsByTagName('input'); for(var i=0;i<inputObjs.length;i++){ if(inputObjs[i].type==='button'){ inputObjs[i].onclick=func

  • 深入理解ES6 Promise 扩展always方法

    ES6添加了Promise对象,成功时在then中处理,失败则在catch中处理,但有时候,我们需要在无论成功或失败时都要做一些事,比如隐藏loading, 记录日志等等,下面我们以浏览器端ajax请求为例,我们使用axios(它是基于Promise的): axios.get("/").then(()=>{ //处理逻辑 ... console.log("请求结束") hideLoading(); }).catch(()=>{ console.log(&

  • es6数值的扩展方法

    Number的方法扩展 Number.isFinite() 方法检测有限的数值(有穷的数值) console.log(Number.isFinite(1)) // true console.log(Number.isFinite(3.1415926)) // true console.log(Number.isFinite('1')) // false console.log(Number.isFinite(NaN)) // false console.log(Number.isFinite('

  • 浅析Javascript ES6新增值比较函数Object.is

    在Object.is出现之前我们比较值使用两等号 "==" 或 三等号"===", 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object.is,让比较运算的江湖更加混乱. 多数情况下Object.is等价于"===",如下 1 === 1 // true Object.is(1, 1) // true 'a' === 'a' // true Object.is('

随机推荐