一、对象基础部分用法点击这里带你去

二、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学习笔记对象的扩展(补充)相关推荐

  1. es6学习笔记-字符串的扩展_v1.0_byKL

    es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...

  2. 【ES6】阮一峰ES6学习(四) 对象的扩展

    对象的扩展 1. 属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; ...

  3. ES6学习笔记(字符串扩展)

    1.模板字符串 模板字符串的优点在于对长串的字符串进行处理时,不需要使用多个引号去进行处理,只需要在最外层使用间隔号`,中间所有的变量使用${}则可进行替换 先举一个简单的例子: const xiao ...

  4. ES6学习笔记(五):轻松了解ES6的内置扩展对象

    前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...

  5. es6学习笔记-顶层对象_v1.0_byKL

    es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...

  6. # es6 学习笔记

    es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...

  7. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  8. ES6学习笔记04:Set与Map

    ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...

  9. ES6学习笔记03:变量的解构赋值

    ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...

  10. ES6学习笔记01:Symbol数据类型

    ES6学习笔记01:Symbol数据类型 1.Symbol定义 浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...

最新文章

  1. 【OpenCV 4开发详解】保存和读取XML和YMAL文件
  2. cellpadding,cellspacing都是废弃的属性了,早已不推荐使用,最新的html5里已经彻底去掉了这些表现型的属性。
  3. 基于消息队列 RocketMQ 的大型分布式应用上云较佳实践
  4. java 数据对_数据表与简单java类(一对多)
  5. 直播实录 | AAAI 2018论文解读:零资源机器翻译的最新进展
  6. 【学习笔记】网络层——无分类编址CIDR、ARP协议、DHCP协议和ICMP协议
  7. IDEA导入旧版本项目maven不会自动下载依赖JAR包处理方法
  8. 深入理解 PHP7 unset 真的会释放内存吗?
  9. 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
  10. flex皮肤制作---通过flash
  11. 开源.NET项目 CSS、JS资源优化类库及工具
  12. CDN 的诞生、术语、原理、特征以及应用场景
  13. JAVA笔记自整理(Java)
  14. flymcu烧录stm32L151问题
  15. Delphi2007下cxComboBox乱码.
  16. 日期时间公式计算机,‎App Store 上的“多少天-重要日期时间计算器”
  17. Pandas中的数据聚合方法
  18. sis最新ip地址2020入口一_【新版教材】2020最新人教版高中化学教材必修一电子课本...
  19. Android 一个改善的okHttp封装库
  20. 华为云主机安全防护的新发现

热门文章

  1. pdfjs预览pdf乱码_卓师兄pdf转换大师app下载-卓师兄pdf转换大师安卓版 v1.0.0
  2. 1.4.4 Mother's Mil 母亲的牛奶(DFS)
  3. 共轭梯度法(Conjugate gradient)详解
  4. eclipse一些实用小技巧
  5. 【数据结构】KMP算法分析与理解(图文分析)
  6. python中用函数可以提高代码运行速度吗_为什么Python代码在函数中运行得更快?...
  7. java逆向框架_JOOQ框架学习(1):逆向编译生成代码
  8. pandas 调用mysql函数_pandas的连接函数concat()函数的具体使用方法
  9. 怎么在html中加入pjax,网页添加Pjax代码实现无刷新加载
  10. linux下强制卸载,linux下强制卸载挂接点