JS中的12种循环遍历的方法

1、for循环

JS常见的循环，常用于循环数组、字符串之类

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    console.log(i, arr[i])
}
// 0 1
// 1 2
// 2 3

2、while循环

也是JS常见的循环

arr = ["1", "2", "3", "4"];
var i = 0;
while (arr[i]) {
    console.log(arr[i] + "<br>")
    i++;
};

3、do while循环

此循环是while循环的一个变体，它首先执行一次操作，然后再进行条件判断，是true的话就继续执行操作，否则的话，循环结束

let i = 3;
do {
    console.log(i)
    i--;
}
while (i > 0)
// 3
// 2
// 1

4、forEach循环：对数组的每个元素执行一次给定的函数

forEach 循环在所有元素调用完毕之前是不能停止的，它没有 break 语句，如果你必须要停止，可以尝试 try catch 语句，就是在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了，如果你经常用这个方法，最好自定义一个这样的 forEach 函数在你的库里。

（1）语法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

（2）参数：

callback: 为数组中的每个元素执行的函数，该函数接收1~3个参数：

	currentValue ：  数组中正在处理的当前元素
	index（可选） ：数组中正在处理的当前元素的索引
	array（可选）：forEach（）方法正在操作的数组，即当前正在调用的数组

thisArg（可选）： 当执行回调函数callback时，用作this的值

（3）返回值 ：undefined

（4）forEach会改变原数组吗？

查看这篇博客

5、for in循环：以任意的顺序遍历一个对象的除Symbol以外的可枚举的属性

（1）语法：

for(variable in object)

（2）参数：

variable:	在每次迭代的时候，variable会被赋值为不同的属性名

object：非Symbol类型的可枚举属性被迭代的对象

（3）注意：

for…in…不应该用于迭代于一个关注于索引顺序的Array，它是为遍历对象而构建的

6、for of 循环：for…of语句在可迭代的对象（包括Array，Map，set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个属性的值执行语句

0

（1）语法：

for (variable of iterable) {}

（2）参数：

variable： 在每次迭代中，将不同属性的值分配给变量

iterable：被迭代枚举其属性的对象

（3）示例：

// 迭代Array
let iterable = [10,20,30]

for(let value of iterable) {
    value += 1
    console.log(value);//11   21    31
}

console.log(iterable); //[10,20,30]
//并不改变原数组



//迭代String
let iterable = 'boo'

for(let value of iterable) {
    console.log(value); // b o o
}

console.log(iterable); //boo

（4）for…of 与 for…in的区别

它们之间的主要区别在于它们的迭代方式

for…in语句以任意顺序迭代对象的可枚举属性

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

7、map()：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

（1）注意：

map（）不会对空数组进行检测

map()不会改变原始数组

（2）语法：array.map(function(currentValue,index,arr), thisValue)

function(currentValue,index,arr):
	函数，数组中的每个元素都会执行这个函数
	函数参数：  currentValue：当前元素的值
						index：当前元素的索引值
						arr：当前元素属于的数组对象
thisValue：对象作为该回调时使用，传递给函数，用作"this"的值，如果省略了thisValue，或者传入null、undefined，那么回调函数的this为全局对象

（3）返回值

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

8、filter()：创建一个新数组，其中包含通过所提供函数实现测试的所有元素

（1）语法：var newArray = arr.filter(callback(element[,index[,array]])[,thisArg])

callback:
	用来测试数组中的每个元素的函数；返回true表示该元素通过测试，保留该元素，false则不保留。他接受三个参数：
		element：数组中当前正在处理的元素。
		index：正在处理元素在数组中的索引
		array：调用了filter的数组本身
thisArg：
	执行callback时，用于this的值

（2）返回值：

一个新的、由通过测试的元素组成的数组，如果没有任何元素通过测试，则返回空数组

9、some()：测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

（1）注意：

如果用一个空数组进行测试，在任何情况下它返回的都是false

(2)语法：arr.some(callback(element[, index[, array]])[, thisArg])

callback：用来测试每个元素的函数，接受三个参数：
	element：数组中正在处理的元素
	index：数组中正在处理的元素的索引值
	array：some（）被调用的数组
	
thisArg：执行callback时使用的this值

（3）返回值：

数组中至少有一个元素通过回调函数的测试就会返回true，所有元素都没有通过回调函数的测试返回值才会为false

10、every()：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

（1）注意：

若收到一个空数组，此方法在一切情况下都会返回true

（2）语法：arr.every(callback(element[, index[, array]])[, thisArg])

callback：用来测试每个元素的函数，它可以接收三个参数：
	element：用于测试当前值
	index：用于测试当前值的索引
	array：调用every的当前数组
thisArg：执行callback时使用的this值

（3）返回值

如果回调函数的每一次返回都为truthy值，返回true，否则返回false

11、reduce()：对数组中的每个元素执行一个由你提供的reducer函数(升序执行)，将其结果汇总为单个返回值

（1）语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：执行数组中的每个值（如果没有提供initaValue）的函数，包含四个参数：
	accmulator：累计器累计回调的返回值；它是上一次调用回调时返回的累积值
	currentValue：数组中处理的元素
	index：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始
	array：调用reduce（）的数组

（2）返回值：

函数累计处理的结果

12、reduceRight()：方法接受一个函数作为累加器和数组的每个值（从右到左）将其减少为单个值

（1）语法：arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：一个回调函数，用于操作数组中的每个元素，它可接受四个参数：
	accumulator：累加器，上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果initiaValue存在，累加器即为initiaValue，否则须为数组中的最后一个元素
	currentValue：当前元素，当前被处理的元素
	index：数组中当前被处理的元素的索引
	array：调用reduceRight（）的数组
initialValue：首次调用 callback 函数时，累加器 accumulator 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空

（2）返回值：执行之后的返回值