JS中3种风格的For循环有什么异同?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://blog.bitsrc.io/3-flavors-of-the-for-loop-in-javascript-and-when-to-use-them-f0fb5501bdf3
在学习任何开发语言时候,for循环是必不可少的一种语法,可能所有开发人员都会使用它。它非常经典,以至于每个开发语言都至少包括一种关于循环的语法版本。不过,在JavaScript种包含了三种不同的循环语法(如果再讲究一点,也可以算作是四种)。
它们的使用方式并不完全相同,举例如下:
l 经典的For循环语法
l For….of 及 For…in
l 炫技一点的版本:.forEach
接下来,我想介绍下这三种语法使用时有什么异同,以及在什么时间怎样使用它们才能收获最棒的结果。好的,让我们开始吧。
经典的For循环
这个语法我们应该都已经非常清楚了,在for循环中,你可以在其中定义内部计数器,设置相应中断条件和灵活的步进策略(通常可以是递增也可以是递减)。
语法为:
for([计数器定义];[中断条件];[步进策略]){
//...
TODO
}
我敢肯定即便不用我的介绍,之前你也一定写过类似的语句,例如:
for(let counter = 0; counter < 10; counter++) {
console.log(counter)
}
让我们在Chrome里运行一下,得到的结果也符合预期,但for循环就仅仅如此了吗?
你可以认为for循环为三个表达式
for(
[在循环开始时只执行一次的表达式];
[其中每一个逻辑判断都需吻合的表达式];
[循环每一步都被执行的表达式]
)
这样表述的意义在于,你可以使用多个计数器执行for循环,或在不影响计数器的情况下在步进表达式中执行每次需要执行的代码,举个例子:
for(let a = 0, b = 0; a < 10 && b < 100; a++, b+=10) {
console.log(a, b)
}
我们可以再进一步,让其变的更符合实际应用场景:
for(let a = 0, b = 0; a < 10 && b < 100; console.log("你的计数器现在是:", ++a, b+=2)){}
另外,你甚至可以把中间表达式替换为函数调用,只要你记住,该函数的返回值需要是一个布尔型或可以被转成布尔值的一个值即可,例如:
function isItDone(a) {
console.log("函数被调用!")
return a < 10
} for(let a = 0; isItDone(a); a++) {
console.log(a)
}
那么,在经典的for循环中如何处理异步代码呢?如何保证不掉进异步陷阱里呢?
我为大家介绍一位新朋友:async / await,这将让我们在处理异步代码时变得更容易、可控,例如:
const fs = require("fs") async function read(fname) {
return new Promise( (resolve, reject) => {
fs.readFile(fname, (err, content) => {
if(err) return reject(err)
resolve(content.toString())
})
})
} (async () => {
let files = ['file1.json', 'file2.json'] for(let i = 0; i < files.length; i++) {
let fcontent = await read(files[i])
console.log(fcontent)
console.log("-------")
}
})()
For... in 及 For… of
他们看起来非常相似,但它们并不是相同类型的循环。
让我们尽量简要的解释它们:
For…in 循环遍历对象的可枚举属性,也就是说当你的自定义对象被用作哈希表或字典时,使用For…in 遍历他们时将变得非常简单。
但请注意,遍历顺序是按元素顺序执行执行的,因此请不要依赖循环顺序。
let myMap {
uno: 1,
dos: 2,
tres: 3
}
for(let key in myMap) {
console.log(key, "=", myMap[key]);
}
看起来是很简单的,但请记住,For…in只能遍历一个实体对象,如果便利一个非实体,例如遍历一个string,那么将会发生如下情况:
for(let k in "Hello World!") {
console.log(k)
}
从结果可以看到,并没有遍历出每一个字母,而是遍历到了每个属性,正如您看到的,遍历出的数字并非是没有用的,因为"Hello World!"[1] 同样是可以返回相应的字母的。
相反,如果你想遍历每个字符,则需要使用其他变体:For…of
for(let char of "Hello World!") {
console.log(char)
}
这种循环方式看起来对string类型更有效,相同的用例,因为使用了这种语法,就能够返回元素中相应的值了。所以我们通过上述用例可知,For…of遍历的内容是对象的值。
通过上述的示例我们可知,他们相互一个遍历属性,一个遍历值,那么有没有什么方法可以既获得属性又获得值呢,答案是有的,使用entries方法,就可以同时获得属性和值,如下所示:
let myArr = ["hello", "world"]
for([idx, value] of myArr.entries()) {
console.log(idx, '=', value)
}
最后,在处理异步代码时是怎样的呢?答案当然是和for循环相同了。
const fs = require("fs") async function read(fname) {
return new Promise( (resolve, reject) => {
fs.readFile(fname, (err, content) => {
if(err) return reject(err)
resolve(content.toString())
})
})
} (async () => {
let files = ['file2.json', 'file2.json'] for(fname of files) {
let fcontent = await read(fname)
console.log(fcontent)
console.log("-------")
} for(idx in files) {
let fcontent = await read(files[idx])
console.log(fcontent)
console.log("-------")
}
})()
最后我们再使用简短的方式来总结下For…in和For…of的区别
For…in——遍历属性
For…of——遍历值
.forEach 循环
这可能是我最喜欢的一个,这仅仅是因为我非常喜欢声明式语法或通过命令式编写代码的声明性方式。
而且,尽管上面的循环语法也很好用,并且都有很好的用例,但当我们需要关注数据本身时,forEach很好用。
不管怎样,先撇开哲学上的争论不谈,.foreach方法是for循环的另一个版本,但是这个方法是数组对象的一部分,它的目的是接收一个函数和一个额外的可选参数,以便在执行函数时重新定义该函数的上下文。
对于数组中的每个元素,我们的函数都将被执行,并且它将收到三个参数(是的,就是三个,而不是一个,因为您已经习惯了使用它)。它们分别是:
- 正在处理的当前元素。
- 元素的索引,这已经简化了我们试图用for…of循环实现的任务
- 正在处理的实际数组。以防万一你需要做点什么。
那么,让我们看一个简单的示例:
a = ["hello", "world"] a.forEach ( (elem, idx, arr) => {
console.log(elem, "at: ", idx, "inside: ", arr)
})
更快更简单,不是吗?
但是你可以看到我们如何在函数中很容易地使用所有属性。下面是一个您希望在foreach方法上使用第二个可选参数的示例:
class Person {
constructor(name) {
this.name = name
}
} function greet(person) {
console.log(this.greeting.replace("$", person.name))
} let english = {
greeting: "Hello there, $"
}
let spanish = {
greeting: "Hola $, ¿cómo estás?"
} let people = [new Person("Fernando"), new Person("Federico"), new Person("Felipe")] people.forEach( greet, english)
people.forEach( greet, spanish)
通过重写被调用函数greet的上下文,我可以在不影响其代码的情况下更改其行为。
最后,显示此方法也可以与异步代码一起使用,下面是示例:
const fs = require("fs") async function read(fname) {
return new Promise( (resolve, reject) => {
fs.readFile(fname, (err, content) => {
if(err) return reject(err)
resolve(content.toString())
})
})
} let files = ['file1.json', 'file2.json'] files.forEach( async fname => {
let fcontent = await read(fname)
console.log(fcontent)
console.log("-------")
})
结论
这就是我想要分享的关于JavaScript中关于循环的全部内容,我希望现在您对它们有了更清晰的理解,并且可以根据这些知识和我们当前的实际需求来选择您喜欢的循环。
JS中3种风格的For循环有什么异同?的更多相关文章
- JS中几种常见的数组算法(前端面试必看)
JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- 关于js中两种定时器的设置及清除(转载)
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- [js]js中4种无节操的预解释情况
js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...
- [js]js中6种错误处理机制
js中6种错误 http://javascript.ruanyifeng.com/grammar/error.html#toc5 https://www.jianshu.com/p/467b9a145 ...
- js中三种定义变量 const, var, let 的区别
js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...
- JS中5种经典继承方式
继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...
- js中4种遍历语法比较
前言:本文主要比较for.for-in.forEach和for-of的异同以及优缺点. for for循环是最原始最易理解的循环遍历方式 for(var index = 0;index < ar ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
随机推荐
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(1)
材料说明: 文档<NVM-Express-1_4-2019.06.10-Ratified.pdf>来自于NVMe网站:https://nvmexpress.org/ 笔记目的是学习NVMe ...
- Android P不能使用http
三种方法解决Android P(安卓9.0)联网问题: 1.最简单的方法就是改用https,但很多的http接口都要一一改(非全局接口可以忽略方法1). 2.target降低至27,target27之 ...
- 力导向图(关系图) echarts的运用
<template> <div class="demo"> <div id="grap" class="grap&quo ...
- CENTOS服务器基础教程-U盘系统盘制作
什么都要用到一点点,会一点点,现在的USB3.0基本上服务器都已经支持.小编给大家介绍基础篇:如何使用U盘制作系统安装盘 工具/原料 U盘 UltraISO工具 方法/步骤 准备一个U ...
- 五.Linux基础
Linux是运行在pc机上类似unix风格的操作系统,由众多程序员开发.开放源代码! 由于开放源代码,所以现在的Linux比windows漏洞更少! linux操作系统由内核及应用程序组成,有很多发行 ...
- windows系统查询指定端口运行的进程并关闭
假如占用的端口是80: 先打开cmd命令窗口 再查找80端口占用的进程:netstat -aon|findstr "80" ,找到对应的程序的PID号: 根据PID号找到 ...
- API 资源隔离系统设计与实现
(马蜂窝技术原创内容,公众号 ID:mfwtech) Part 1 背景 大交通业务需要对接机票.火车票.租车.接送机等业务的外部供应链,供应商的数据接口大部分通过 HTTP.HTTPS 等协议进行通 ...
- Gson的解析Json数据的两种方式
转载:https://blog.csdn.net/huplion/article/details/78984977 在线JSON字符串转Java实体类(JavaBean.Entity): https: ...
- 牛客暑假多校第五场 I vcd
这个题目一个队友没读懂, 然后我读错了题目, 还让他堆了半天的公式写了半天的代码, 交上去一直0.0, 另一队友问题目有没有读错, 我坚持没有读错, 然后坑了2个小时的时间,不然应该会早一点做出来. ...
- codeforces 701 D. As Fast As Possible(数学题)
题目链接:http://codeforces.com/problemset/problem/701/D 题意:给你n个人,每个人走路的速度v1,有一辆车速度为v2,每次可以载k个人,总路程为l,每个人 ...