当前位置:首页 > 前端 > 正文内容

JavaScript for...of与for...in的区别

放牧的风2年前 (2020-06-14)前端465

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

  1. for…in 语句以原始插入顺序迭代对象的可枚举属性。

  2. for…of 语句遍历可迭代对象定义要迭代的数据。

以下示例显示了与Array一起使用时,for…of循环和for…in循环之间的区别。

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

//for in 会继承
for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

// for of
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

每个对象将继承objCustom属性,并且作为Array的每个对象将继承arrCustom属性,因为将这些属性添加到Object.prototype和Array.prototype。由于继承和原型链,对象iterable继承属性objCustom和arrCustom。for in

for (let i in iterable) {
   console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

此循环仅以原始插入顺序记录iterable 对象的可枚举属性。它不记录数组元素3, 5, 7 或hello,因为这些不是枚举属性。但是它记录了数组索引以及arrCustom和objCustom。如果你不知道为什么这些属性被迭代,array iteration and for…in中有更多解释。

for (let i in iterable) {  
    if (iterable.hasOwnProperty(i)) {    
        console.log(i); // logs 0, 1, 2, "foo"
  }
}

这个循环类似于第一个,但是它使用hasOwnProperty() 来检查,如果找到的枚举属性是对象自己的(不是继承的)。如果是,该属性被记录。记录的属性是0, 1, 2和foo,因为它们是自身的属性(不是继承的)。属性arrCustom和objCustom不会被记录,因为它们是继承的。for of

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7 
}

该循环迭代并记录iterable作为可迭代对象定义的迭代值,这些是数组元素 3, 5, 7,而不是任何对象的属性。

扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/57.html

分享给朋友:

相关文章

npm更新模块并同步到package.json中

使用原始npm1.查看需要更新的版本npm outdated该命令会列出所有需要更新的项目2.修改package.json中需要更新的包对应的版本号npm update由于npm update只能按照package.js...

webstorm中用npm运行任务(即显示npm面板)

webstorm中用npm运行任务(即显示npm面板)

第一步右击package.json文件,点击show npm Scripts第二步出现npm面板第三步点击即可运行任务  ...

浏览器同源政策及其规避方法

浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍"同源政策"的各个方面,以及如何规避它。一、概述1.1 含义1995年,同源...

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详...

经得住拷问的HTTPS原理解析

经得住拷问的HTTPS原理解析

此文涵盖的大致内容:理解HTTPS原理的概念什么是对称加密和非对称加密?什么是数字签名?怎么生成?怎么校验?啥时候是对称加密?啥时候是非对称加密?啥时候进行算法加密?什么算法?第三方机构包含哪些?HTTPS 是什么?具体流程HTTPS和HT...

彻底理解浏览器的缓存机制

彻底理解浏览器的缓存机制

概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:HTTP请求(Request)报文,报文格式为:请求行...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。