属性的可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

var obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// {value: 123, writable: true, enumerable: true, configurable: true} var o = Object.defineProperty({}, 'display', {
enumerable: false,
value: 'block'
})
Object.getOwnPropertyDescriptor(o,'display')
// {value: "block", writable: false, enumerable: false, configurable: false}

ES5有三个操作,如果enumerable为false则对其不起作用:

    • for...in循环:只遍历对象自身的和继承的可枚举的属性。
  1. Object.keys():返回对象自身的所有可枚举的属性的键名。
  2. JSON.stringify():只串行化对象自身的可枚举的属性。

ES6新增了两个操作,会忽略enumerable为false的属性。

  1. Object.assign():只拷贝对象自身的可枚举的属性。
  2. Reflect.enumerate():返回所有for...in循环会遍历的属性。

这五个操作之中,只有for...in和Reflect.enumerate()会返回继承的属性。

实际上,引入enumerable的最初目的,就是让某些属性可以规避掉for...in操作。比如,对象原型的toString方法,以及数组的length属性,就通过这种手段,不会被for...in遍历到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

另外,ES6规定,所有Class的原型的方法都是不可枚举的。

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

总的来说,操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in循环,而用Object.keys()代替。

ES6 对象的扩展(下)的更多相关文章

  1. es6对象的扩展

    对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...

  2. Es6对象的扩展和Class类的基础知识笔记

    /*---------------------对象的扩展---------------------*/ //属性简写 ,属性名为变量名, 属性值为变量的值 export default functio ...

  3. ES6对象的扩展及新增方法

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

  4. web前端之es6对象的扩展

    1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算 ...

  5. es6 对象的扩展

    一.现在还有很多浏览器不能直接使用es6语法.特别是手机端的一些低版本的浏览器.都需要用bale转换一下. 但是目前流行的框架中(vue,react,angular).都有自己的脚手架,都能用webp ...

  6. ES6 对象的扩展(上)

    属性的简介表示法 允许直接写入变量和函数作为对象的属性和方法,这样的书写更简洁. function f( x, y ) { return { x, y }; } // 等同于 function f( ...

  7. ES6 对象的扩展 Object.assign()

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const source1 ...

  8. ES6 对象的扩展 Object.is()

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

  9. ES6对象扩展

    前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...

随机推荐

  1. ThinkPHP中处理Layout模板的问题

    ThinkPHP中的模板引擎内置了布局模板功能支持,可以方便实现嵌套. 其中有两种布局方式,一种为以布局模板为入口的布局方式,但是需要开启LAYOUT_ON 参数(默认不开启) 并且设置布局入口文件名 ...

  2. c语言贪吃蛇详解3.让蛇动起来

    c语言贪吃蛇详解3.让蛇动起来 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 上次 ...

  3. Webapi调用

    C# webapi 路由名称不能跟area名称相同,否则出现404 action找不到的问题???

  4. python中的“.T”操作

    其实就是对一个矩阵的转置 看代码: a array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]) a.T array([[1, 4, 7], [2, 5, 8], [3, 6, ...

  5. QTP生成随机数字+字母

    以下函数实现随机生成17位数(包括字母和数字),仍有改进的空间,可根据具体要求适当修改 Dim targetstring '调用返回函数给变量.Function过程通过函数名返回一个值 targets ...

  6. 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

    由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...

  7. Netty与传统Server对比

    前言 本文旨在介绍传统Socket服务端与NIO服务端的差异. 以餐厅服务员简单举例,每个客人对应一个请求. 传统Socket / OIO public class OioServer { @Supp ...

  8. VantPy自动化测试框架

    1.必须要谈的一点,就是我们学习自动测试不是用来炫耀的,而是用来提升自身能力的. 2.这个框架不是通用框架,只是在这里灌输这个框架的思想,让每个人写框架都易如反掌 3.如果没有python基础的同学, ...

  9. Linux下一次删除百万文件

    Linux下一次删除百万文件 线上环境遇到的一个问题,文件数量过多,执行rm命令报错 # rm -f ./* -bash: /bin/rm: Argument list too long 根据报错检查 ...

  10. 谷哥的小弟学前端(11)——JavaScript基础知识(2)

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...