1、结论

for in遍历对象所有可枚举属性 包括原型链上的属性

Object.keys遍历对象所有可枚举属性 不包括原型链上的属性

hasOwnProperty 检查对象是否包含属性名，无法检查原型链上是否具有此属性名

2、示例代码

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>for in 与 Object.keys 与 hasOwnProperty区别</title>

    </head>

    <body>

        <script type="text/javascript">

            var aa = [12, 34, 5];

            Array.prototype.add = function() {}

            for(let i in aa) {

                console.log(i);

                //输出0 1 2 add

            }

            console.log('--------------')

            console.log(Object.keys(aa));

            //输出0 1 2 

            console.log(aa.hasOwnProperty('add'))

            //输出false

            console.log(aa.hasOwnProperty('0'))

            //输出true

        </script>

    </body>

</html>

3、ESLINT对for in的限制

当你在某个对象上用 for in 语句遍历对象属性，而又忘了用 hasOwnProperty 判断属性来源的时候，你就会发现被你扩展的原型属性也会被遍历出来，这往往都不是我们想要的结果。

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

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。

let {keys, values, entries} = Object;

let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {

  console.log(key); // 'a', 'b', 'c'

}

for (let value of values(obj)) {

  console.log(value); // 1, 2, 3

}

for (let [key, value] of entries(obj)) {

  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]

}

for in 与 Object.keys 与 hasOwnProperty区别的更多相关文章

  1. JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

    ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...

  2. [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

    ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...

  3. 论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别

    前不久,一朋友求助,让我给解释一波Object.keys(), Object.getOwnPropertyNames(), for in的区别,面试中好几次呗问了.所以,抽了点时间看了看,大概把我看的 ...

  4. for in,Object.keys()与for of的区别

    for in 1.for in一般用于遍历对象的属性: 2.作用于数组的for in除了会遍历数组元素外,还会遍历自定义可枚举的属性,以及原型链上可枚举的属性:3.作用于数组的for in的遍历结果是 ...

  5. Object.keys、Object.getOwnPropertyNames区别

    用途 Object.keys 定义:返回一个对象可枚举属性的字符串数组: Object.getOwnPropertyNames 定义:返回一个对象可枚举.不可枚举属性的名称: 属性的可枚举性.不可枚举 ...

  6. 小tips：JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别

    for..in循环 使用for..in循环时,返回的是所有能够通过对象访问的.可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例.这里需要注意的是使用for-in返回的属性因各个浏览器厂 ...

  7. 关于Object.keys()和for in的区别

    今天见到一道面试题让说一说Object.keys()和for in的区别,顿时有些发懵“What's Object.keys?”我立马上网搜了一下,大致作用也是做遍历,参数是一个对象,返回值是一个数组 ...

  8. for in，Object.keys和Object.getOwnPropertyNames的区别

    var parent = Object.create(Object.prototype, { a: { value: 1, writable: true, enumerable: true, conf ...

  9. 原型相关的方法isPrototypeOf、Object.getPrototypeOf、hasOwnProperty、Object.getOwnPropertyName、Object.keys

    在看<高程3>第六章的<面向对象的程序设计>的原型那一节时,有一下5个函数,功能较为接近,但是又都很基础,很重要 所以在此,加以说明,以便日后复习 function Perso ...

随机推荐

  1. 【Vijos 1607】【NOI 2009】植物大战僵尸

    https://vijos.org/p/1607 vijos界面好漂亮O(∩_∩)O~~ 对于一个植物x,和一个它保护的植物y,连一条边<x,y>表示x保护y,对于每个植物再向它左方的植物 ...

  2. 2017 Multi-University Training 1 解题报告

    Add More Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  3. 【二分】Codeforces Round #435 (Div. 2) D. Mahmoud and Ehab and the binary string

    题意:交互题:存在一个至少有一个0和一个1的长度为n的二进制串,你可以进行最多15次询问,每次给出一个长度为n的二进制串,系统返回你此串和原串的海明距离(两串不同的位数).最后要你找到任意一个0的位置 ...

  4. 【最小割】BZOJ3438-小M的作物(Rank 2???!!!)（含新款Dinic模板）

    一开始被T掉了之后,才害怕地发现之前写的Dinic基本上都是错的??!!!正确的写在注释里了,注意一下(;3<)馬鹿やろ 一个丧心病狂的优化前后效率对比:

  5. Problem C: 输入10个数，根据提示进行从小到大输出或从大到小输出

    #include<stdio.h> int main() { char ch; ]; while(scanf("%c",&ch)!=EOF) { int i,j ...

  6. 班尼特·A·麦克道尔 － 一个交易者的资金管理系统（2013年5月26日）

    <一个交易者的资金管理系统:如何确保利润并避免破产风险> 作 者:班尼特·A·麦克道尔 系 列:“引领时代”金融投资系列-世界交易经典译丛 出 版:万卷出版公司 字 数:155千字 阅读完 ...

  7. 也来讲REST、SOAP

    在GIS网络开发过程中不可避免的的会涉及到REST(Representational State Transfer)的服务.自从Roy Fielding博士在2000年他的博士论文中提出REST风格的 ...

  8. 黑莓10开发101:Native平台

    为黑莓10开发游戏或应用程序有多种方法.这是件好事,不过如果你不是在黑莓平台下进行开发,或者你仅熟悉基于旧的Java的开发平台,也许你会感到无所适从.你将作何选择?从哪里着手? 促成你做出决定的因素有 ...

  9. Shell合并两个文件成一个文件的两列paste,awk

    Shell合并两个文件成一个文件的两列 发布时间:2014-07-20   编辑:www.jquerycn.cn Shell合并两个文件成一个文件的两列,提供了两种方法,普通shell脚本,awk脚本 ...

  10. 三种常见的部署Kubernetes的方式

    三种常见的部署Kubernetes的方式 嘹亮的小号 Ghostcloud-001工号,资深Docker玩家,分布式系统研发11年. ​关注他   容器技术将应用程序及其依赖关系与操作系统进行分离,不 ...