你真的了解ES6嘛?- 扩展对象功能篇🌵

46 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天,点击查看活动详情

1、object.is()比较

当你想在JS中比较两个值的时候,可能更习惯于使用相等运算符(==),或者全等运算符(===);

但有时全等运算符也不完全准确,比如:

console.log(+0==-0)//true
console.log(+0===-0)//true
console.log(NaN===NaN)//false

es6引入了object.is来弥补全等运算符的不准确运算

console.log(object.is(+0,-0))//false
console.log(object.is(NaN,NaN))//true

运行结果跟大部分情况中的===运算符相同,唯一区别在于+0和-0被识别为不相等并且NaN与NaN等价;

2、object.assign()

可以一次性的更改对象中的多个属性,如果使用混入mixin模式会非常有用

合并两个对象或多个对象给目标对象,注意:第一个参数一定是目标对象

Object.assign(target, ...sources)
//其中 target 是目标对象,sources 是源对象,可以有多个,返回修改后的目标对象 target。

Object.assign 原理思路如下:

1、判断原生 Object 是否支持该函数,如果不存在的话创建一个函数 assign,并使用 Object.defineProperty 将该函数绑定到 Object 上。

2、判断参数是否正确(目标对象不能为空,我们可以直接设置{}传递进去,但必须设置值)。

3、使用 Object() 转成对象,并保存为 to,最后返回这个对象 to。

4、使用 for..in 循环遍历出所有可枚举的自有属性。并复制给新的目标对象(使用 hasOwnProperty 获取自有属性,即非原型链上的属性)。

3、自有属性枚举顺序

在ES6中严格规定了对象的自有属性被枚举时的返回顺序

自有属性枚举顺序的基本规则是:

  1. 所有数字按升序排序;
  2. 所有字符串键按它们被加入对象的顺序排序;
  3. 所有symbol键按照它们被加入对象的顺序排序
var obj={
a:1,
0:1,
c:1,
2:1,
b:1,
1:1
};

obj.d=1;

console.log(Object.getOwnPropertyNames(obj).join(""));//012acbd
//bject.getOwnPropertyNames方法返回一个数组,成员是参数对象自身的全部属性的属性名

可计算属性名

在Es5中,如果想要通过计算得到属性名,则需要用[]方括号代替:

let person = {}
let value = "hello WaRen"
person["wa ren"] = "蛙人"
person[value] = "value"

上面example中,是我们在es5中的做法,如果对象的key值是一个变量,那我们就使用对象方括号添加。

在Es6中,可在对象字面量中使用可计算属性名称,我们来看下面例子:

let key = "name" let person = { 
  [key]: "蛙人" // 在对象字面量中这样使用[]方括号定义key是Es6语法 
  [`${key}_test`]: "test" 
}

上面这种在对象字面量中使用方括号表示该属性名是可以计算的,可以写表达式的,然后最终key值都会以字符串类型返回。

有bug?想补充?

感谢大家观看这篇文章,有任何问题或想和我交流,请直接留言,

发现文章有不妥之处,也可指出交流,感谢阅读~

53875b26-8251-4ccc-ad02-70badf65d662.gif