ES6学习笔记对象的扩展(补充)
一、对象基础部分用法点击这里带你去
二、Object.is()注意细节
在ES5中比较两个值是否相等,只有两个运算符:相等运算符和严格相等运算符。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于直身,以及+0等于-0
console.log(NaN ===NaN); //false
console.log(+0 ===-0); //true
ES6使用Object.is()来解决该问题,与严格相等运算符的行为基本一致。不同的是:NaN等于本身,+0不等于-0
console.log(Object.is(NaN,NaN)); //true
console.log(Object.is()+0,-0); //false
三、Object.assign()注意细节
注意一:如果只有一个参数时,Object.assign()会直接返回该参数。
var obj={a:1};
Object.assign(obj) === obj; //true
如果该参数不是对象,则会先转换为对象,然后返回。
typeof Object.assign(2); //object
console.log(Object.assign(2)); //Number{2}
因为undefined和null不能转换为对象,如果将其作为参数会报错
console.log(Object.assign(undefined));//报错
console.loh(Object.assign(null));//报错
其他类型的值(字符串,数值,布尔值)不在首参数也不会报错。但,除了字符串会以数组形式复制到目标对象,其他值都不会产生效果。
var v1="abc";
var v2=true;
var v3=10;
var obj=Object.assign({},v1,v2,v3);
console.log(obj); //{"0":"a","1":"b","2":c}
这是因为只有字符串的包装对象会产生可枚举属性。
Object(true);//{[[PrimitiveValue]]:true}
Object(10);//{[[PrimitiveValue]]:10}
Object('abc');
可以看到它们的原始值都包含在包装对象的内部属性[[PrimitiveValue]]上面,这个属性是不会被Object.assign()复制的。只有字符串的包装对象会产生可枚举的实义属性,那些属性则会被拷贝。
属性名为Symbol值的属性也会被Object.assign()复制
Object.assign({a:'b'},{[Symbol('c')]:'d'}); //{a:'b',Symbol(c):'d'}
总结:Object.assign()复制的属性是有限制的,只复制源对象的自身属性(不复制继承属性),也不复杂不可枚举的属性(enumerable:false)。
注意二:Object.assign()实现的是浅拷贝,如果源对象某个属性的值是对象,那么目标对象复制得到的是这对象的引用。
let target = {};
let source = {a: 1, b: {c: 2, d: 3}};
Object.assign(target, source);
target.a = 5;
target.b.c = 9;
console.log(target) // {a: 5, b: {c: 9, d: 3}}
console.log(source) // {a: 1, b: {c: 9, d: 3}}
对于出现嵌套对象,遇到同名属性,Object.assgin的处理方法是替换而不是添加。
var target={a:{b:'c',d:'e'}};
var source={a:{b:'hello'}};
Object.assign(target,source); //{a:{b:'hello'}}
target对象的a属性被source对象的a属性整个替换掉,而不是得到{a:{b:‘hello’,d:‘e’}}
注意三:Object.assign()可以用来处理数组,但是会将数组视为对象来处理。
Object.assign([1,2,3],[4,5]); //[4,5,3]
上面代码中,Object.assign()把数组视为属性名为0、1、2的对象,因此目标数组的0属性4覆盖了原数组的0号属性1。
四、属性的可枚举性
对象的每一个属性都具有一个描述对象,用于控制该属性的行为。
let obj={foo:123};
Object.getOwnPropertyDescriptor(obj,'foo');
因为enumerable属性(可枚举性)的值为false,故这个属性值在某些操作下会被忽略。
这些操作指的是:在ES5中
- for…in循环:只遍历对象自身的和继承的可枚举属性
- Object.keys():返回对象自身的所有可枚举属性的键名
- JSON.stringify():只串行化对象自身的可枚举属性
在ES6增加了一个操作Object.assign(),会忽略enumerable=false,只复制对象自身的可枚举属性。
注意:ES6规定,所有Class的原型的方法都是不可枚举的。
Object.getOwnPropertyDescriptor(class {foo(){....}},'foo').enumerable; //false
五、属性的遍历
- for…in =>循环遍历对象自身的和继承的可枚举属性(不包含Symbol属性)
- Object.keys(obj) =>返回一个数组,包含对象自身的(不含继承)所有可枚举属性(不含Symbol属性)
- Object.getOwnPropertyNames(obj) =>返回一个数组,包含对象自身的所有属性(不含Symbol属性,包含不可枚举属性)
- Object.getOwnPropertySymbols(obj) =>返回一个数组,包含对象自身的所有Symbol属性
- Refected.ownKeys(obj) =>返回一个数组,包含对象自身的所有属性,不管属性名是Symbol还是字符串,也不管是否可枚举
欢迎访问我的个人博客
ES6学习笔记对象的扩展(补充)相关推荐
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- 【ES6】阮一峰ES6学习(四) 对象的扩展
对象的扩展 1. 属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; ...
- ES6学习笔记(字符串扩展)
1.模板字符串 模板字符串的优点在于对长串的字符串进行处理时,不需要使用多个引号去进行处理,只需要在最外层使用间隔号`,中间所有的变量使用${}则可进行替换 先举一个简单的例子: const xiao ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
- # es6 学习笔记
es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记04:Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
- ES6学习笔记03:变量的解构赋值
ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...
- ES6学习笔记01:Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义 浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
最新文章
- 【OpenCV 4开发详解】保存和读取XML和YMAL文件
- cellpadding,cellspacing都是废弃的属性了,早已不推荐使用,最新的html5里已经彻底去掉了这些表现型的属性。
- 基于消息队列 RocketMQ 的大型分布式应用上云较佳实践
- java 数据对_数据表与简单java类(一对多)
- 直播实录 | AAAI 2018论文解读:零资源机器翻译的最新进展
- 【学习笔记】网络层——无分类编址CIDR、ARP协议、DHCP协议和ICMP协议
- IDEA导入旧版本项目maven不会自动下载依赖JAR包处理方法
- 深入理解 PHP7 unset 真的会释放内存吗?
- 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
- flex皮肤制作---通过flash
- 开源.NET项目 CSS、JS资源优化类库及工具
- CDN 的诞生、术语、原理、特征以及应用场景
- JAVA笔记自整理(Java)
- flymcu烧录stm32L151问题
- Delphi2007下cxComboBox乱码.
- 日期时间公式计算机,App Store 上的“多少天-重要日期时间计算器”
- Pandas中的数据聚合方法
- sis最新ip地址2020入口一_【新版教材】2020最新人教版高中化学教材必修一电子课本...
- Android 一个改善的okHttp封装库
- 华为云主机安全防护的新发现
热门文章
- pdfjs预览pdf乱码_卓师兄pdf转换大师app下载-卓师兄pdf转换大师安卓版 v1.0.0
- 1.4.4 Mother's Mil 母亲的牛奶(DFS)
- 共轭梯度法(Conjugate gradient)详解
- eclipse一些实用小技巧
- 【数据结构】KMP算法分析与理解(图文分析)
- python中用函数可以提高代码运行速度吗_为什么Python代码在函数中运行得更快?...
- java逆向框架_JOOQ框架学习(1):逆向编译生成代码
- pandas 调用mysql函数_pandas的连接函数concat()函数的具体使用方法
- 怎么在html中加入pjax,网页添加Pjax代码实现无刷新加载
- linux下强制卸载,linux下强制卸载挂接点