JS的for循环,forin循环,forof循环,foreach循环map循环以及,reduce()循环方法最实用详解。

for循环

for循环是一种常用的编程语句，用于重复执行一段代码块，直到满足某个条件为止。for循环通常用于遍历数组、文件列表等场景，语法如下：

for 变量名 in 列表
do
    循环体
done

其中，变量名表示循环变量，列表可以是一组字符串、文件名、命令输出等，循环体是需要重复执行的代码块。在每次循环中，变量名会依次取列表中的值，直到列表中的值全部被遍历完为止。

for循环的执行过程如下：

从序列中取出第一个元素赋值给变量；
执行代码块；
将变量指向序列中的下一个元素，然后回到步骤2继续执行；
当序列中没有更多元素时，退出循环。

在for循环中，可以使用break语句提前结束循环，也可以使用continue语句跳过当前迭代，直接进入下一次迭代。

array = ['李青','盖伦','卡特琳娜','约里克','金克斯','拉克丝'];
for (let i = 0; i < array.length; i++) {
  //console.log(i)//它输出了 0, 1, 2, 3, 4, 5输出是他们的下标
  console.log(array[i])//输出的是array的值;
}

for in循环

for...in 循环是 JavaScript 中用于遍历对象属性的一种循环结构。它的语法如下：

var obj= {瞎子:李青,草丛伦:盖伦,不祥之刃:卡特琳娜,掘墓:约里克,非主流:金克斯,光辉:拉克丝};
for (var key in obj) {
  console.log(key + ': ' + obj[key]);
}

在这个示例中，我们有一个包含三个属性的对象 obj。通过 for...in 循环，我们遍历了 obj 的属性，并打印了每个属性的名称和对应的值。

下面是 for...in 循环的一些重要特点和注意事项：

循环顺序：for...in 循环不保证按照特定的顺序遍历对象属性。属性的遍历顺序可能因 JavaScript 引擎的实现而异，并且在不同的环境中可能会有不同的结果。
遍历对象属性：for...in 循环会遍历对象自身的可枚举属性以及继承而来的可枚举属性。如果只想遍历对象自身的属性，可以使用 Object.hasOwnProperty() 方法进行过滤。
迭代数组：虽然 for...in 循环可以用于遍历数组，但不推荐这样做。因为它会遍历数组的索引（属性名），而不是数组的元素。更适合遍历数组的方法是使用 for...of 循环或 Array.forEach() 方法。
迭代顺序：for...in 循环的遍历顺序是不确定的，因此不应该依赖于属性的遍历顺序进行业务逻辑的处理。
迭代可枚举属性：for...in 循环只会遍历对象的可枚举属性。如果某个属性被设置为不可枚举（通过 Object.defineProperty() 或类似方法），那么它不会被 for...in 循环遍历到。

总结来说，for...in 循环是一种用于遍历对象属性的迭代结构。它可以用于遍历对象的可枚举属性，但在遍历数组时不是最佳选择。在使用 for...in 循环时，应注意属性遍历的顺序是不确定的，并且要注意过滤继承属性和非可枚举属性。

for of循环

for...of 循环是 JavaScript 中用于遍历可迭代对象（如数组、字符串、Set、Map 等）的一种循环结构。它的语法如下：

var array = ['李青', '盖伦', '卡特琳娜', '约里克', '金克斯', '拉克丝'];

for (var element of array) {
  console.log(element);//输出结果 李青,盖伦,卡特琳娜,约里克,金克斯,拉克丝
}

在上述示例中，我们创建了一个名为 array 的数组，其中包含了一些英雄的名字。然后，使用 for...of 循环遍历数组中的每个元素，并通过 console.log() 函数将每个元素打印到控制台。

请注意，for...of 循环遍历数组时，会按照数组的顺序依次取出每个元素，并执行循环体中的代码。

for each

forEach 方法，它是数组对象的一个内置方法，用于遍历数组并对每个元素执行指定的操作。

下面是 forEach 方法的详细说明和示例：

语法：

array.forEach(function(currentValue, index, array) {
  // 执行操作的代码
}, thisArg);

参数说明：

function(currentValue, index, array): 必需。表示要对每个元素执行的函数。它可以接收三个参数：
- currentValue: 当前正在处理的元素的值。
- index（可选）: 当前正在处理的元素的索引。
- array（可选）: 调用 forEach 方法的数组对象。
thisArg（可选）: 传递给函数的值作为 this 的值。

示例：

var array = ['李青', '盖伦', '卡特琳娜', '约里克', '金克斯', '拉克丝'];

array.forEach(function(element, index) {
  console.log('索引 ' + index + ': ' + element);//渲染结果:
//索引 0: 李青，索引 1: 盖伦,索引 2: 卡特琳娜,索引 3: 约里克,索引 4: 金克斯,索引 5: 拉克丝
});

在上述示例中，我们使用 forEach 方法遍历数组 array 中的每个元素。在遍历过程中，我们定义了一个匿名函数，该函数接收两个参数 element 和 index，分别表示当前元素的值和索引。然后，我们在循环体中使用 console.log() 函数打印每个元素的值和索引。

请注意，forEach 方法会按照数组的顺序依次处理每个元素，并且无法在循环中使用 break 或 continue。如果需要在遍历过程中中断循环或跳过某些元素，可以考虑使用 for...of 循环或其他控制流语句。

map循环

概述

map 方法是 JavaScript 数组提供的高阶函数之一，它接受一个函数作为参数，并对数组中的每个元素执行该函数。通过这种方式，开发者可以轻松地对数组元素进行转换或生成新的数组，而不需要编写显式的循环。
用法

使用 map 方法的关键是理解传递给它的函数。这个函数通常称为映射函数，它定义了对数组中每个元素的操作或转换。映射函数接受三个参数：当前正在处理的元素、当前元素的索引和操作的原始数组。
具体使用 map 方法的步骤如下：

1.定义映射函数，可使用匿名函数或命名函数。
2.调用数组的 map 方法，将映射函数作为参数传入。

例如，我们想将数组中的每个元素都加倍，可以定义以下映射函数：

function double(element) {
  return element * 2;
}

然后，我们可以使用 map 方法将映射函数应用于数组：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(double);

这个小例子中，map 方法会对 numbers 数组中的每个元素调用映射函数 double，并将返回值组成一个新的数组 doubledNumbers。
返回值特点

map 方法的返回值特点在于它返回一个全新的数组，而不会改变原始数组。这意味着原始数组保持不变，而生成的新数组包含经过映射函数处理后的元素。因此，map 方法是一种纯函数，不会对原始数据进行修改。

此外，由于 map 方法返回的是一个新数组，我们可以链式调用其他数组方法，如 filter、reduce 等，以进一步处理数据。这种方法的组合和链式调用能够提高代码的可读性和维护性。

需要注意的是，map 方法只会遍历已存在的数组元素，而不会执行已删除或未赋值的项。如果数组中的元素被修改或删除，在执行映射函数时会影响到 map 方法的结果。

reduce（）方法
概述

reduce 方法是 JavaScript 数组的一个高阶函数，用于将数组的所有元素聚合为单个结果。它使用一个累加器和一个回调函数来进行聚合操作。
用法

reduce 方法的基本语法如下：

array.reduce(callback, initialValue)

其中，array 是要操作的数组；callback 是用于聚合操作的回调函数；initialValue 是可选的初始值，用作第一次调用回调函数时的累加器的初始值。

回调函数 callback 接受四个参数：accumulator（累加器）、currentValue（当前值）、currentIndex（当前索引）和 array（原始数组）。回调函数会被依次应用于数组的每个元素，从左到右进行聚合操作。
下面通过举例来演示 reduce 方法的用法：

计算数组元素之和：

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出：15

上面这个例子里，我们定义了一个名为 arr 的数组，并使用 reduce 方法计算数组所有元素的和。回调函数 function(accumulator, currentValue) 将累加器 accumulator 和当前值 currentValue 相加，并返回新的累加器的值。

查找数组中的最大值：

const arr = [7, 2, 9, 1, 5];

const max = arr.reduce(function(accumulator, currentValue) {
  return Math.max(accumulator, currentValue);
}, arr[0]);

console.log(max); // 输出：9

此例子中，我们定义了一个名为 arr 的数组，并使用 reduce 方法查找数组中的最大值。回调函数 function(accumulator, currentValue) 使用 Math.max 函数比较累加器 accumulator 和当前值 currentValue，并返回较大的值作为新的累加器的值。初始累加器的值设为 arr[0]，即数组的第一个元素。

数组元素计数和分类：

const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];

const result = arr.reduce(function(accumulator, currentValue) {
  if (!accumulator[currentValue]) {
    accumulator[currentValue] = 1;
  } else {
    accumulator[currentValue]++;
  }
  return accumulator;
}, {});

console.log(result);
// 输出：
// {
//   apple: 2,
//   banana: 2,
//   orange: 1
// }

我们定义了一个名为 arr 的数组，并使用 reduce 方法统计每个元素出现的次数，并将结果存储在一个对象中。回调函数 function(accumulator, currentValue) 判断累加器 accumulator 中是否已存在当前值 currentValue 的计数，如果不存在则初始化为 1，否则增加计数。初始累加器的值通过 {} 创建一个空对象。
注意事项

reduce 方法可以接受一个可选的初始值 initialValue，用作第一次调用回调函数时的累加器的初始值。如果未提供初始值，则第一次调用回调函数时，累加器的初始值将为数组的第一个元素。
reduce 方法返回的是聚合的最终结果，而不是数组。

最后我们改如何去选择这些方法呢？
下面来介绍一下:

选择使用哪种循环方式取决于你的具体需求和数据结构。以下是对每种循环方式的简要说明和适用场景：

for循环：
- for循环是最基本的循环结构，通过指定循环的起始条件、终止条件和每次迭代的操作来遍历数组或执行重复操作。
- 适用于需要精确控制循环次数和索引的情况，以及对数组进行简单的遍历或操作。
for-in循环：
- for-in循环用于遍历对象的可枚举属性，包括自身属性和继承的属性。
- 适用于遍历对象属性的情况，但不建议用于遍历数组，因为它会遍历数组的索引和额外的属性。
for-of循环：
- for-of循环用于遍历可迭代对象（如数组、字符串、Set、Map等）的元素。
- 适用于需要遍历对象元素的情况，它提供了简洁的语法和更好的性能。
forEach循环：
- forEach循环是数组的内置方法，用于遍历数组的每个元素，并对每个元素执行回调函数。
- 适用于对数组进行遍历和操作，但无法使用break或return来中断循环。
map循环：
- map循环是数组的内置方法，用于遍历数组的每个元素，并返回一个新的数组，新数组的元素是回调函数的返回值。
- 适用于对数组进行遍历和转换，并返回新的数组。
reduce()循环：
- reduce()是数组的内置方法，用于对数组的元素进行累积计算，并返回最终结果。
- 适用于需要对数组元素进行聚合计算的情况，例如求和、求平均值等。

根据不同的需求，选择合适的循环方式可以提高代码的可读性和性能。对于简单的遍历操作，for循环、for-of循环和forEach循环都是不错的选择。如果需要在遍历过程中对数组进行转换，可以使用map循环。而对于需要对数组元素进行累积计算的情况，reduce()循环是一个有用的工具。

需要注意的是，在使用任何循环方式时，都要考虑到循环的效率和性能，避免在循环体内执行耗时的操作或嵌套过深的循环。