不整理不知道，整理吓一跳，原来JS有这么多不同的循环方式的，包含冷门的几个我一共整理出来14种。下面将会通过尽可能简单的事例进行说明。

先直入主题看看分别是哪些循环方式：

1、for循环
2、while 循环
3、do…while循环
4、forEach循环
5、map()循环
6、for…in循环
7、for…of 循环
8、filter()过滤循环
9、some()循环
10、every()循环
11、Object.keys循环对象属性
12、Object.getOwnPropertyNames()循环对象的属性
13、reduce()循环
14、reduceRight()循环

简单介绍：for 是最早出现的循环，也是最常用的一种循环机制，能够满足大部分的遍历。主要是依靠下标来获取数组内成员。

复制 1let arr = ['a', 'b', 'c'];
 2for (let i = 0; i < arr.length; i++) {
 3    console.log(i, arr[i])
 4}
 5// 0 'a'
 6// 1 'b'
 7// 2 'c'

注意：for 循环体中可以使用 break（跳出循环）和 continue（阻止当前轮循环继续往下执行，并且进入下一轮循环）

如下所示：找到想要的内容就用break停止循环

复制 1let arr = ['a', 'b', 'c'];
 2for (let i = 0; i < arr.length; i++) {
 3    if(arr[i]==='a'){
 4        console.log(i, arr[i])
 5        break
 6    }
 7}
 8// 0 'a'

如下所示：某种条件下使用continue可以跳过当前循环，但不影响后面的执行。

复制 1let arr = ['a', 'b', 'c']
 2let s = []
 3for (let i = 0
 4    if(arr[i]==='a'){
 5        continue
 6    }
 7    s.push(arr[i])
 8}
 9
10console.log(s)

简单介绍： While语句包括一个循环条件和一段代码块，只要判断到条件为真，就不断循环执行代码块，直到条件为假。

复制 1let i = 0
 2while (i < 10) { 
 3    console.log('当前为：'  i)
 4    i = i + 1
 5}

简单介绍：do...while循环与while循环非常类似，唯一的区别是先运行一次循环体，然后判断循环条件。

复制 1let i = 3;
 2do {
 3    console.log(i)
 4    i--;
 5}
 6while (i > 0)
 7
 8
 9

简单介绍：forEach方法将数组的所有成员依次传入参数函数，回调函数可以有三个参数。

• 第一个参数：是当前元素的值
• 第二个参数：是当前元素的索引
• 第三个参数：是整个数组本身。

注意：不支持使用 break 或 continue 语句来中断循环，这意味着一旦开始，它会一直执行到数组的末尾。并且不返回任何值，它只是单纯地用于改变数组。

复制 1arr.forEach(function(item, index,arrs) {
 2    console.log(item, index, arrs);
 3    
 4});

简单介绍：map() 方法也用于遍历数组，但它和 forEach() 的主要区别在于map创建了一个新的数组，该数组的结果是原始数组中的元素经过逻辑处理后的值。

注意： return可以返回一个新数组，break会报错，不能跳出循环，这意味着一旦开始，它会一直执行到数组的末尾。

复制 1let arr = [1, 2, 3]
 2 
 3let nawArr = arr.map(function (n) { 
 4     return n + 1
 5})
 6console.log(nawArr)
 7 
 8console.log(arr)

简单介绍：for in 循环是 ES5 中新增的循环，循环遍历目标的所有可枚举的属性（包括原型上的），并且尽量只用来循环对象。

复制 1var textObj = {a: 1, b: 2, c: 3}; 
 2 
 3for (var i in textObj) { 
 4    console.log('键名：', i); 
 5    console.log('键值：', textObj[i]); 
 6} 
 7
 8
 9
10
11

注意：这里有一个坑需要注意，由于原循环到原型上的属性，那么继承的属性是可遍历的，这就会被for in循环遍历到。所以如果只想遍历到自身的属性，那么使用for in的时候应该结合使用hasOwnProperty方法，在循环内部判断一下某个属性是否为对象自身的属性。否则就可以产生遍历到不是自身对象属性的情况。

如下所示：加上hasOwnProperty后只能拿到自身属性

复制 1for (var i in textObj) { 
 2    if (textObj.hasOwnProperty(i)) {   
 3        console.log('键名：', i); 
 4        console.log('键值：', textObj[i]); 
 5      }
 6} 

简单介绍：for of 是 ES6 中新增的循环遍历语句，通常用来遍历一个可迭代的对象（数组、集合、字符串等）

循环数组用法

复制 1let arr = [10,20,30]
 2
 3for(let i of arr) {
 4    console.log(i);
 5}

循环字符串用法

复制 1let str = 'bba'
 2
 3for(let i of str) {
 4    console.log(i); // b b a
 5}

循环Map()用法（经常与Map搭配使用）

复制 1const map = new Map([
 2  ["key1", "value1"],
 3  ["key2", "value2"],
 4  ["key3", "value3"],
 5]);
 6 
 7for (const [key, value] of map) {
 8  console.log(key + " - " + value);
 9}
10
11key1 - value1
12key2 - value2
13key3 - value3
14*/

简单介绍： filter() 方法用于创建一个新的数组，新数组中的元素是通过过滤指定数组中符合条件的所有元素。参数与 forEach() 和 map() 相同，并且不会修改原数组。

复制 1let arr = [1, 2, 3, 4, 5, 6]
 2
 3let nums = arr.filter(num => num % 2 === 0)
 4
 5console.log(nums)

简单介绍： some() 方法用于判断数组中是否有元素满足条件。它会遍历数组，直到找到一个元素符合条件返回 true，此时 some() 方法立即返回 true 并停止进一步的遍历。如果没有找到满足条件的元素，则返回 false，并且some() 不会改变原数组。

复制 1let arr = ['a', 'b']
 2
 3let nums = arr.some(num => num === 'a')
 4
 5console.log(nums)

简单介绍： every() 方法用于判断数组中的是否所有元素满足条件。这个方法会对数组中的每个元素执行，如果所有元素都符合条件，则 every() 返回 true；只要有任意一个元素不符合指定条件，every() 就会立即停止遍历并返回 false，并且不修改原数组。

复制 1let arr = [1, 2, 3]
 2
 3let nums = arr.every(num => num >3)
 4
 5console.log(nums)

简单介绍： Object.keys() 方法用于获取一个对象所有可枚举自有属性的键名，并以数组形式返回。

注意：仅返回对象自身的属性，不包括原型链上的属性。

复制 1let obj = {a: 1, b: 2, c: 3}; 
 2
 3console.log(Object.keys(obj)); // 输出：['a', 'b', 'c']

以下不可枚举的情况是无法获取到的

复制 1let objSymbols = {}
 2
 3let sym = Symbol('test')
 4
 5objSymbols[sym] = 'value'
 6
 7console.log(Object.keys(objSymbols))

简单介绍： Object.getOwnPropertyNames() 方法用于获取一个对象所有（包括不可枚举的）自有属性的名称，并返回一个包含这些属性名的数组。

注意：仅返回对象自身的属性，不包括原型链上的属性，并且与 Object.keys() 不同，getOwnPropertyNames() 会返回所有类型的属性名，包括不可枚举的属性。

复制 1let obj = {a: 1, [Symbol('b')]: 2, c: 3};
 2
 3Object.defineProperty(obj, 'd', {value: 4, enumerable: false});
 4
 5console.log(Object.getOwnPropertyNames(obj)); // 输出：['a', 'b', 'c', 'd']

简单介绍： reduce() 方法是用于对数组中的所有元素执行一个累积操作（从左到右），将数组折叠成单个值。它接受一个回调函数，该函数在数组的每个元素上执行，结合当前元素和前一个元素的累积结果。

基本语法：接收两个参数，一个为回调函数，一个为初始赋值;
第一个参数的回调函数又接收四个参数，分别为（初始值或计算结束后的返回值，当前元素，当前元素的索引，当前元素所属的数组对象）

复制 1arr.reduce(function(prev, currentValue, currentIndex, arrs), initialValue)

简单例子：

复制 1[1, 2, 3, 4, 5].reduce(function (a, b) {
 2  console.log(a, b);
 3  return a + b;
 4}, 10)
 5
 6//最后累加结果：25 因为初始值是10

简单介绍： reduceRight() 方法与 reduce() 类似，也是对数组的所有元素执行累加操作（从右到左），但它从数组的末尾开始向前遍历数组，其它都是和reduce() 一样的。

感觉有好几个都比冷门的，可能很多人从来都没有用到过（包括我自己），但可以不用但我们得会啊，如果漏了那些方式欢迎大佬们指导添加。