企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] # for循环的基本用法 要计算1+2+3,我们可以直接写表达式: ~~~ 1 + 2 + 3; // 6 ~~~ 要计算1+2+3+...+10,勉强也能写出来。 但是,要计算1+2+3+...+10000,直接写表达式就不可能了。 为了让计算机能计算成千上万次的重复运算,我们就需要循环语句。 JavaScript的循环有两种,一种是`for`循环,通过初始条件、结束条件和递增条件来循环执行语句块: ~~~js let x = 0; for (let i=1; i<=10000; i++) { x = x + i; } x; // 50005000 ~~~ 让我们来分析一下`for`循环的控制条件: * let i=1 这是初始条件,将定义局部变量i,并将变量i置为1; * i<=10000 这是判断条件,满足时就继续循环,不满足就退出循环; * i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,因此它终将在若干次循环后不满足判断条件`i<=10000`而退出循环。 ## 练习 利用`for`循环计算`1 * 2 * 3 * ... * 10`的结果: ~~~ 'use strict'; let x = ?; let i; for ... if (x === 3628800) { alert('1 x 2 x 3 x ... x 10 = ' + x); } else { alert('计算错误'); } ~~~ `for`循环最常用的地方是利用索引来遍历数组: ~~~ const arr = ['Apple', 'Google', 'Microsoft']; for (let i=0; i<arr.length; i++) { const x = arr[i]; alert(x); } ~~~ `for`循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用`break`语句退出循环,否则就是死循环: ~~~ let x = 0; for (;;) { // 将无限循环下去 if (x > 100) { break; // 通过if判断来退出循环 } x ++; } ~~~ # forEach 在ES5中引入。给定一个数组,您可以使用list.forEach()迭代其属性: ~~~ const list = ['a', 'b', 'c'] list.forEach((item, index) =>{ console.log(item) //value console.log(index) //index }) //index is optional list.forEach(item =&gt; console.log(item)) ~~~ > 不过需要注意的是你无法摆脱这个循环。 直接使用`iterable`内置的`forEach`方法,它接收一个函数,每次迭代就自动回调该函数。以`Array`为例: ```js var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element); }); ``` *注意*,`forEach()`方法是ES5.1标准引入的,你需要测试浏览器是否支持。 `Set`与`Array`类似,但`Set`没有索引,因此回调函数的前两个参数都是元素本身: ~~~ var s = new Set(['A', 'B', 'C']); s.forEach(function (element, sameElement, set) { alert(element); }); ~~~ `Map`的回调函数参数依次为`value`、`key`和`map`本身: ~~~ var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function (value, key, map) { alert(value); }); ~~~ 如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得`Array`的`element`: ~~~ var a = ['A', 'B', 'C']; a.forEach(function (element) { alert(element); }); ~~~ # for ... in `for`循环的一个变体是`for ... in`循环,它可以把一个对象的所有属性依次循环出来: ~~~ var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { alert(key); // 'name', 'age', 'city' } ~~~ 要过滤掉对象继承的属性,用`hasOwnProperty()`来实现: ~~~ const obj = { name: 'Jack', age: 20, city: 'Beijing' }; for (const key in obj) { if (obj.hasOwnProperty(key)) { console.log(key); // 'name', 'age', 'city' } } ~~~ 由于`Array`也是对象,而它的每个元素的索引被视为对象的属性,因此,`for ... in`循环可以直接循环出`Array`的索引: ~~~ var a = ['A', 'B', 'C']; for (var i in a) { alert(i); // '0', '1', '2' alert(a[i]); // 'A', 'B', 'C' } ~~~ *请注意*,`for ... in`对`Array`的循环得到的是`String`而不是`Number`。 # for...of语句 for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩. for...of语法是为各种collection对象专门定制的,并不适用于所有的object.它会以这种方式迭代出任何拥有`[Symbol.iterator]` 属性的collection对象的每个元素。 ~~~ //variable:每一次迭代,不同属性的属性值会被赋值给该变量. //object:一个可迭代对象. for (variable of object) { statement } ~~~ 遍历 Array: ~~~ let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 ~~~ 如果你不修改语句块中的变量 , 也可以使用 const 代替 let。注意不要用var,会导致变量提升副作用。 ~~~ let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30 遍历Map: let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // [a, 1] // [b, 2] // [c, 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3 遍历 Set: let iterable = new Set([1, 1, 2, 2, 3, 3]); //集合是不包含重复元素的 for (let value of iterable) { console.log(value); } // 1 // 2 // 3 ~~~ # for...of与for...in的区别 for...in循环会遍历一个object所有的可枚举属性。 for...of语法是为各种collection对象专门定制的,并不适用于所有的object.它会以这种方式迭代出任何拥有`[Symbol.iterator] `属性的collection对象的每个元素。 下面的例子演示了for...of 循环和 for...in 循环的区别。for...in 遍历(当前对象及其原型上的)每一个属性名称,而 for...of遍历(当前对象上的)每一个属性值: ~~~ Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console.log(i); // logs 3, 5, 7 } ~~~ > for .. of与for ... in 语句一定注意弄清楚使用的环境,否则会得到意想不到的结果。. 你可能会有疑问,`for ... of`循环和`for ... in`循环有何区别? `for ... in`循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个`Array`数组实际上也是一个对象,它的每个元素的索引被视为一个属性。 当我们手动给`Array`对象添加了额外的属性后,`for ... in`循环将带来意想不到的意外效果: ```js var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x in a) { alert(x); // '0', '1', '2', 'name' } ``` `for ... in`循环将把`name`包括在内,但`Array`的`length`属性却不包括在内。 `for ... of`循环则完全修复了这些问题,它只循环集合本身的元素: ```js var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x of a) { alert(x); 'A', 'B', 'C' } ``` 这就是为什么要引入新的`for ... of`循环。 # 小结 循环是让计算机做重复任务的有效的方法,有些时候,如果代码写得有问题,会让程序陷入“死循环”,也就是永远循环下去。JavaScript的死循环会让浏览器无法正常显示或执行当前页面的逻辑,有的浏览器会直接挂掉,有的浏览器会在一段时间后提示你强行终止JavaScript的执行,因此,要特别注意死循环的问题。