js篇-循环遍历的方法

循环遍历

哈喽呀~小伙伴们，公司已经欠20天工资了，今天继续摸鱼。

今天作者想写一篇关于js的循环遍历的方法~ 有什么不对的或者还有别的方法的可以留言评论哦~

我们先来了解一下，在js中什么叫做循环遍历：

循环遍历 ：循环遍历是指通过重复执行一段代码来遍历（访问）一个数据集合中的每个元素。可用于处理数组、对象或者其它可迭代的数据结构。

可迭代 ：可迭代（iterable）是指一种数据结构，它可以被迭代（遍历）访问其元素。当我们说一个数据结构是可迭代的，意味着我们可以按照一定的顺序逐个访问其中的元素。

总而言之，可迭代的数据结构提供了一种方式来访问它们的元素，通常是通过循环遍历的方式。在循环遍历过程中，我们可以使用不同的控制结构（如for循环、while循环）来遍历可迭代的数据结构，以便于处理每个元素。这样，我们可以对数组、对象或其他可迭代的数据结构进行迭代，并对其中的元素进行逐个处理。

好了，大致了解了一下官话，我们就开始今天的正题，在开始今天的正题之前，先做说明：下面的方法有很多种用法，作者只会采取普遍的用法。

1.for

1. for 循环for循环是最常见的循环结构，通过指定初始条件、循环条件和迭代操作来控制循环的执行次数。
2. 语法：

for(初始条件，循环条件，迭代操作){
   循环体代码
}

3. 例如：

for (var i = 0; i < 9; i++) {
  console.log(i);
  // 更多的其它的代码
}

这个例子：首先声明了一个变量i，并被初始赋值为0； 其次，在执行过程中检查i的值是否小于9，如果小于9，则执行语句块里的语句； 最后，将i的值加1

2. while

1. while 循环：while 循环会在指定条件为真时重复执行代码块。
2. 语法：

while (指定条件) {
  代码块
}

3. 例如：

// 下面的while循环会一直循环若干次，直到a等于3。
var a = 0;
var b = 0;

while (a < 3) {
  a++;
  b += a;
}

// 第一轮：a = 0； b = 1；
// 第二轮：a = 2;  b = 3;
// 第三轮：a = 3;  b = 6;
//完成三轮之后，我们发现已经不满足a<3的循环条件了，因此循环终止。

在每次循环中，a的值就会自增（加）1，然后再把a加到b上。

3. do...while

do...while循环与 while 循环类似，但它会先执行一次循环体，然后在判断条件是否为真。 2. 语法：

do{
 代码块
}
while (循环条件);

3. 例子：

var result = "";
var i = 0;
do {
  i += 1;
  result += i + " ";
} while (i < 5);
console.log(result); // '1 2 3 4 5'

do...while 循环至少迭代一次，并且继续迭代直到 i不再小于 5 时结束。

4. for...of

1. for...of 循环：for...of 循环用于遍历可迭代对象（如数组、字符串等），它会迭代对象中的每个元素。
2. 语法：

for (迭代对象中的每个元素 of 迭代对象) {
    代码块
}

3. 例子：

// 循环数组
let arr = [10, 20, 30];
for (let i of arr) {
  i += 1;
  console.log(i); // 11，21，31
}

// 循环字符串
let str = "hello";

for (let value of str) {
  console.log(value); //"h"  "e"  "l"  "l"  "o"
}

5. forEach()

1. forEach() 该方法是数组的一个内置方法，用于遍历数组并对每个元素执行指定的回调函数。
2. 语法

forEach(回调函数)

3. 例子

const arr = [1, 3, 7];
arr.forEach((element) => {
  console.log(element); // 1 3 7
});


// 将 for 循环转换为 forEach
const items = ["item1", "item2", "item3"];
const copyItems = [];

// for 循环
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// forEach
items.forEach((item) => {
  copyItems.push(item);
});

6. for...in

1. for...in 循环：for...in 循环用于遍历对象的可枚举属性。它会迭代对象的每个可枚举属性，并执行相应的操作。
2. 语法：

//value每次迭代都会被重新赋值
for (value in 被迭代的对象){
// 代码块
}

3. 例子：

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key, obj[key]); //a,1   b,2   c,3
}

7. map()

1. map()：该方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成
2. 语法：

map(回调函数)

3. 例子：

const nums = [1, 4, 9];
const roots = nums.map((num) => Math.sqrt(num));

// roots：[1, 2, 3]
// nums： [1, 4, 9]

8. filter()

1. filter()：该方法为数组中的每个元素调用提供的 callbackFn函数一次，并构造一个由所有返回真值的元素值组成的新数组
2. 语法：

filter(回调函数)

3. 例子：

// 把数组中为2的数字过滤出来
console.log([1,2,3,2].filter((x) => x === 2)); // [2, 2]

9. reduce()

1. reduce()：该方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
2. 语法：

reduce(回调函数)

3. 例子：

// 计算数组的总和
const arr = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initial = 0;
const sum = arr.reduce((pre, current) => pre + current, initial);

console.log(sum); //10

reducer 逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加（该结果是之前所有步骤结果的总和）------直到没有更多需要相加的元素。

10. some()

1. some()：数组中是否至少有一个元素满足条件。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。
2. 语法：

reduce(回调函数)

3. 例子：

// 存在偶数即可
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even)); //true

11. every()

1. every()：一个数组内的所有元素是否都能通过满足特定的条件。它返回一个布尔值。
2. 语法：

reduce(回调函数)

3. 例子：

// 一个数组的所有元素是否都存在于另一个数组中
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [3, 7, 2])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 6])); // false

总结：

这些循环遍历方法在不同的场景中有不同的用途。

1. for 循环通常用于已知循环次数的情况。
2. while 和 do...while 循环适用于未知循环次数的情况。
3. for...in 循环用于遍历对象的属性。
4. for...of 循环用于遍历可迭代对象的元素。
5. forEach 方法适用于遍历数组并执行回调函数的场景。
6. map适用于需要对可迭代对象的每个元素都应用同一个函数，并将结果收集到一个新的可迭代对象中的情况。
7. filter适用于根据某个条件筛选可迭代对象的元素的情况。
8. some适用于判断可迭代对象中是否存在满足特定条件的元素的情况。
9. reduce适用于需要对可迭代对象中的元素进行累积操作的情况的。
10. every适用于判断可迭代对象中的所有元素是否都满足特定条件时的情况。

好了~今天的知识回顾结束啦，也到了下班时间。

还是那句话：请多多指教~