JS中for循环的四种写法⽰例（⼊门级）
⽬录
1. 传统for循环
2. for of 循环
3. for in 循环
4. forEach⽅法
附完整实例：
总结
1. 传统for循环
for (init; cond; inc) {
// body
}
与C++或Java类似，for关键字后⽤⼩括号描述循环设置，在⼩括号中⽤两个分号；将循环设置隔断为三个部分，分别为：
init初始化语句（指令），在整个循环开始前执⾏
cond条件（逻辑表达式），表⽰循环继续的条件
inc⾃增语句（指令），在每次循环体结束以后执⾏
整个循环的执⾏步骤为：
执⾏init语句
计算cond表达式，若为假则退出循环
执⾏循环体body
执⾏inc语句，随后返回步骤2
例如：
let sum = 0
for (let i = 1; i <= 10; i++) {
sum += i
}
console.log(sum) // 55
2. for of 循环
for (const v of iterable) {
// body
}
这⾥的iterable是指各种能够被迭代的JS对象。最常⽤的例⼦是数组Array和字符串String，此外还有arguments、NodeList、Map、Set 等等。执⾏的效果是，for循环会遍历iterable的每个项⽬，在每次循环中，代表变量v即为当前循环的项⽬。
例如：
const arr = [1, 2, 3, 4, 5]
let sum = 0
for (const v of arr) {
sum += v
}
console.log(sum) // 15
⾼级：for await (const v of iterable) 可以⽤于异步循环遍历。
3. for in 循环
for (const k in object) {
// body
}
for in循环会遍历object的每个属性，在每次循环中，代表变量k即为当前属性的属性名称(key)。
例如：
const obj = { a: 1, b: 2, c: 3 }
let sum = 0
for (const k in obj) {
sum += obj[k] // read the value from key
}
console.log(sum) // 6
特别注意for of和for in的区别，前者的代表变量是项⽬的值(value)，后者的代表变量是属性的名称(key)。
4. forEach⽅法
Array.forEach(Function)
forEach是JS数组的原⽣⽅法。它接受⼀个函数作为参数，执⾏效果是对数组的每⼀个项⽬，执⾏传⼊的函数。传⼊的函数可以接受三个参数：(element, index, array)，其中element表⽰当前项⽬的值，index表⽰当前项⽬的下标，array表⽰循环的数组本⾝。
例如：
const arr = [1, 2, 3, 4, 5]
let sum = 0
arr.forEach(element => sum += element)
console.log(sum) // 15
通常在程序中我们更倾向于使⽤for of循环来代替forEach⽅法，因为for关键字使得代码的可读性更⾼。但是在⼀些特殊的情况下，我们依然会使⽤forEach⽅法循环遍历数组中的每个项⽬。
⾼级：forEach可以传⼊异步函数，等效于使⽤for await (const v of Array)。
附完整实例：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>  // 此处添加测试数组 textArr
var textArr = [],
i = 0;
while (i<40000000) {
textArr.push(i)
i++
}
const forTest = (textArr) => {
console.time('time forTest')
var newArr = []    // 第⼀种写法不带声明变量的写法（运⾏效率最好，性能最佳）
js arguments
for (var i = 0; i < textArr.length; i++) {
newArr.push(i)
}
console.timeEnd('time forTest')
}
const forTest1 = (textArr) => {    　console.time('time forTest1')    var newArr = []    // 第⼆种带声明变量的写法（相⽐之下要差⼀些）
for (var i = 0,len = textArr.length; i < len; i++) {
newArr.push(i)
}
console.timeEnd('time forTest1')
}
const forTest2 = (textArr) => {
console.time('time forTest2')
var newArr = []    // 第三种 forEach的写法  (效率最差，运⾏最慢)
textArr.forEach(item => {
newArr.push(item)
})
console.timeEnd('time forTest2')
}
const forTest3 = (textArr) => {
console.time('time forTest3')
var newArr = []    // 第四种是 for循环的简便写法，（运⾏效率与不带声明变量的写法相差⽆⼏，相⽐之下，可以使⽤这种写法，最优），仅仅是本⼈的观点      for (var i = 1,cur; cur = textArr[i++];) {
newArr.push(i)
}
console.timeEnd('time forTest3')
}
forTest(textArr)
forTest1(textArr)
forTest2(textArr)
forTest3(textArr)
</script>
</body>
</html>
总结
到此这篇关于JS中for循环的四种写法的⽂章就介绍到这了，更多相关JS for循环写法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。