ES6 学习笔记之对象的新增方法
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 拷贝。
注意点:
- 浅拷贝
如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用 - 同名属性的替换
对于嵌套的对象,一旦遇到同名属性,Object.assign 的处理方法是替换,而不是添加const target = {a : {b:1, c:2} };
const source = {a : {b:2}};
Object.assign(target, source) //{a: {b: 2}} - 数组的处理
Object.assign 可以用来处理数组,但是会把数组视为对象//把数组视为属性名为0,1,2的对象,因此源数组的0号属性覆'x'盖了目标数组的0号属性1
Object.assign([1,2,3], ['x', 'y']) //["x", "y", 3] - 取值函数的处理
Object.assign 只能进行值的复制,如果复制的值是一个取值函数,那么将求值后再复制。const target = {};
Object.assign(target, source) //{foo: 1}
常见用途
- 为对象添加属性
//将属性 x,y 添加到 Point 类的对象实例
class Point {
constructor(x, y){
Object.assign(this, {x, y});
}
} - 为对象添加方法
//直接将两个函数放在大括号中,再用 assign 方法添加到SomeClass.prototype中
Object.assign(SomeClass.prototype, {
someMethod(arg1,arg2) {
//...
},
anotherMethod() {
//...
}
}); - 克隆对象
- 合并多个对象
- 为属性指定默认值
ES6 学习笔记之对象的新增方法的更多相关文章
- es6学习笔记-proxy对象
前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...
- ES6 学习笔记之对象的拓展
1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样书写更加简洁. const foo = 'bar'; const baz = {foo}; baz //{foo: &q ...
- ES6学习笔记(8)----对象的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 对象的扩展 1.属性名的简洁表示法 : ES6允许在代码中直接写变量,变量名是属性名,变量值是属 ...
- ES6学习笔记(对象新增方法)
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
- es6学习笔记--promise对象
Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...
- ES6 学习笔记之四 对象的扩展
ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...
- ES6学习笔记(对象)
1.属性的简洁表示法 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {f ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
随机推荐
- 2021年有哪些优秀的免费PSD样机素材下载的网站?
2021年有哪些优秀的免费PSD样机素材下载的网站? 无论是ui设计师还是平面设计师,为避免无休止的加班,平时就需要寻找并收藏一些优秀的设计素材网站.好的素材可以帮助设计师设计作品起到事半功倍的效果, ...
- a标签美化
具体选中a标签给予宽高,这样才能在整个a标签范围内才能跳转 但是因为a标签是行内元素,所以要用display:blcok 转化为块状元素 且a标签不继承父元素的color 对a标签设置颜色,要选中a标 ...
- Nacos服务发现
基础配置初始化 NacosDiscoveryClientConfiguration NacosDiscoveryProperties 初始化Nacos基础配置信息的bean,主要指yaml中配置Nac ...
- Nginx导航
简介 最近都在弄微服务的东西,现在来记录下收获.我从一知半解到现在能从0搭建使用最大的感触有两点 1.微服务各大组件的版本很多,网上很多博客内容不一定适合你的版本,很多时候苦苦琢磨都是无用功 2.网上 ...
- Envoy:TLS双向认证
环境准备 主机 角色 数量 front-envoy front envoy 1 service envoy 作为内部后端的envoy 2 end 后端应用程序 2 访问 / front-envoy = ...
- [转载]centos 7(1611)安装笔记
centos 7(1611)安装笔记 麻烦 前天我把双系统笔记本里的 deepin 的磁盘分区直接从 Windows 7 磁盘管理里格式化了,结果悲催了,开不了机了,显示: 我以为是 Window ...
- 搭建LAMP环境部署GLPI资源管理系统
搭建LAMP环境部署GLPI资源管理系统 一.关闭防火墙和Selinux [root@localhost ~]# systemctl disable --now firewalld [root@loc ...
- 008.Python循环for循环
for 循环 特指用于遍历容器类型数据,(遍历 循环 迭代 都是一个意思)就是把所有的数据一个一个拿出来的过程, while循环有局限性,不能遍历无序容器数据 setvar = {"a&qu ...
- python3+unittest参考
Python3+Selenium+unittest自动化UI测试框架:https://www.cnblogs.com/G2Bent/p/8376001.html unittest --- 单元测试框架 ...
- 1、大数据 Hadoop配置和单机Hadoop系统配置
#查看服务器ip ip add #设置主机名称 hostnamectl set-hostname master bash #查看 hostname #绑定ip vi /etc/hosts 添加 服务器 ...