1. Object.is()

ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的 NaN 不等于自身,以及 +0 等于 -0.

Object.is() 是用来比较两个值是否严格相等,与严格比较运算符的行为基本一致。不同之处只有两个:+0 不等于 -0;NaN等于自身。

Object.is('foo', 'foo') //true
Object.is({}, {}) //false //与 === 的不同之处
+0 === -0 //true
NaN === NaN //false Object.is(+0, -0) //false
Object.is(NaN, NaN) //true

ES5 实现 Object.is 方法

Object.defineProperty(Object, 'is', {
value: function(x, y){
if(x === y){
return x !== 0 || 1 / x === 1 / y;
}
return x !== x && y !== y;
},
configurable:true,
enumberable: false,
writable: true
});

上面代码中,如果 x === y,那么我们首先要排除 +0 === -0 的情况:x !== 0 排除 x 非 0 的情况,不是 0 就直接返回true;如果为 0 ,则 进行 1/0 === 1/0 ,返回 true。1/+0 =Infinite,1/-0=-Infinite,通过这样来判断 +0 和 -0 不相等。判断 NaN 与 NaN,我们知道 NaN 与自身是不等的,因此 我们可以通过 x !== x && y !== y 来判断。

2. Object.assign()

基本用法

Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

Object.assign 方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。如果只有一个参数,Object.assign 会直接返回该参数。如果该参数不是对象,则会先转成对象,然后返回。

const target = {a:1};
const source = {b:2};
const source2 = {c:3};

//Object.assign 方法的第一个参数是目标对象,后面的都是源对象
Object.assign(target, source, source2); //{a: 1, b: 2, c: 3} const t = {a:1, b:2};
const t2 = {x:10, y: 11}
const t3 = {f:0, g:1}
const s1 = {b:3, c:4};
const s2 = {c:5}; //目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性
Object.assign(t, s1, s2) //{a: 1, b: 3, c: 5} //如果只有一个参数,会直接返回该参数
Object.assign(t2) //{x: 10, y: 11} //如果该参数不是对象,则会先转成对象,然后返回
Object.assign(1) //{1}
Object.assign('hello') //{"hello"} //undefined,null无法转成对象,会报错;但如果它们不出现在首参数,就不会报错,会直接跳过它们
Object.assign(undefined) //报错
//Object.assign(null) //报错
Object.assign(t2, undefined, s2) //{x: 10, y: 11, c: 5} //数值,布尔值不在首参数,会被跳过
Object.assign(t3, 1, s1) //{f: 0, g: 1, b: 3, c: 4} //不在首参数的字符串会以数组的形式,拷贝入目标对象
Object.assign(t, 'hi') //{0: "h", 1: "i", a: 1, b: 3, c: 5}

Object.assign 拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性。

属性名为 Symbol 值的属性,也会被 Object.assign 拷贝。

注意点:

  1. 浅拷贝
    如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用
  2. 同名属性的替换
    对于嵌套的对象,一旦遇到同名属性,Object.assign 的处理方法是替换,而不是添加
    const target = {a : {b:1, c:2} };
    const source = {a : {b:2}};
    Object.assign(target, source) //{a: {b: 2}}
  3. 数组的处理
    Object.assign 可以用来处理数组,但是会把数组视为对象
    //把数组视为属性名为0,1,2的对象,因此源数组的0号属性覆'x'盖了目标数组的0号属性1
    Object.assign([1,2,3], ['x', 'y']) //["x", "y", 3]
  4. 取值函数的处理
    Object.assign 只能进行值的复制,如果复制的值是一个取值函数,那么将求值后再复制。
    const target = {};
    Object.assign(target, source) //{foo: 1}

常见用途

  1. 为对象添加属性

    //将属性 x,y 添加到 Point 类的对象实例
    class Point {
    constructor(x, y){
    Object.assign(this, {x, y});
    }
    }
  2. 为对象添加方法
    //直接将两个函数放在大括号中,再用 assign 方法添加到SomeClass.prototype中
    Object.assign(SomeClass.prototype, {
    someMethod(arg1,arg2) {
    //...
    },
    anotherMethod() {
    //...
    }
    });
  3. 克隆对象
  4. 合并多个对象
  5. 为属性指定默认值

ES6 学习笔记之对象的新增方法的更多相关文章

  1. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

  2. ES6 学习笔记之对象的拓展

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样书写更加简洁. const foo = 'bar'; const baz = {foo}; baz //{foo: &q ...

  3. ES6学习笔记(8)----对象的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 对象的扩展 1.属性名的简洁表示法 : ES6允许在代码中直接写变量,变量名是属性名,变量值是属 ...

  4. ES6学习笔记(对象新增方法)

    1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...

  5. es6学习笔记--promise对象

    Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...

  6. ES6 学习笔记之四 对象的扩展

    ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...

  7. ES6学习笔记(对象)

    1.属性的简洁表示法 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {f ...

  8. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  9. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

随机推荐

  1. 2021年有哪些优秀的免费PSD样机素材下载的网站?

    2021年有哪些优秀的免费PSD样机素材下载的网站? 无论是ui设计师还是平面设计师,为避免无休止的加班,平时就需要寻找并收藏一些优秀的设计素材网站.好的素材可以帮助设计师设计作品起到事半功倍的效果, ...

  2. a标签美化

    具体选中a标签给予宽高,这样才能在整个a标签范围内才能跳转 但是因为a标签是行内元素,所以要用display:blcok 转化为块状元素 且a标签不继承父元素的color 对a标签设置颜色,要选中a标 ...

  3. Nacos服务发现

    基础配置初始化 NacosDiscoveryClientConfiguration NacosDiscoveryProperties 初始化Nacos基础配置信息的bean,主要指yaml中配置Nac ...

  4. Nginx导航

    简介 最近都在弄微服务的东西,现在来记录下收获.我从一知半解到现在能从0搭建使用最大的感触有两点 1.微服务各大组件的版本很多,网上很多博客内容不一定适合你的版本,很多时候苦苦琢磨都是无用功 2.网上 ...

  5. Envoy:TLS双向认证

    环境准备 主机 角色 数量 front-envoy front envoy 1 service envoy 作为内部后端的envoy 2 end 后端应用程序 2 访问 / front-envoy = ...

  6. [转载]centos 7(1611)安装笔记

    centos 7(1611)安装笔记   麻烦 前天我把双系统笔记本里的 deepin 的磁盘分区直接从 Windows 7 磁盘管理里格式化了,结果悲催了,开不了机了,显示: 我以为是 Window ...

  7. 搭建LAMP环境部署GLPI资源管理系统

    搭建LAMP环境部署GLPI资源管理系统 一.关闭防火墙和Selinux [root@localhost ~]# systemctl disable --now firewalld [root@loc ...

  8. 008.Python循环for循环

    for 循环 特指用于遍历容器类型数据,(遍历 循环 迭代 都是一个意思)就是把所有的数据一个一个拿出来的过程, while循环有局限性,不能遍历无序容器数据 setvar = {"a&qu ...

  9. python3+unittest参考

    Python3+Selenium+unittest自动化UI测试框架:https://www.cnblogs.com/G2Bent/p/8376001.html unittest --- 单元测试框架 ...

  10. 1、大数据 Hadoop配置和单机Hadoop系统配置

    #查看服务器ip ip add #设置主机名称 hostnamectl set-hostname master bash #查看 hostname #绑定ip vi /etc/hosts 添加 服务器 ...