JS循环大总结

z燕玲

已于 2023-10-12 13:51:08 修改

阅读量39

点赞数

文章标签： javascript 前端 vue.js

于 2023-10-12 13:41:42 首次发布

本文链接：https://blog.csdn.net/weixin_42207006/article/details/133788891

版权

本文详细介绍了JavaScript中的几种循环结构，包括for循环用于遍历数组和执行固定次数循环，forEach适合处理数组每个元素，for...in遍历对象属性，for...of遍历可迭代对象，以及map作为数组的高阶函数用于转换元素。

摘要由CSDN通过智能技术生成

for循环

用于遍历数组或者执行固定次数的循环。
通过指定初始条件、循环条件和每次循环后的操作来控制循环的执行。
可以使用break语句和continue语句来控制循环的终止和跳过。
适用于需要对数组进行索引访问或者需要执行固定次数的循环。

// for循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach循环

用于遍历数组的每一个元素，对每个元素执行指定的回调函数。
无法使用break语句和continue语句来控制循环的终止和跳过。
适用于需要对数组的每个元素进行操作，不需要索引或者固定次数的循环。

// forEach循环
array.forEach(function(element) {
  console.log(element);
});

for…in循环

用于遍历对象的可枚举属性（包括自身属性和继承属性）。
循环变量为对象的属性名（字符串类型）。
适用于需要遍历对象的属性进行操作。

// for...in循环
for (let key in object) {
  console.log(key + ': ' + object[key]);
}

for…of循环

用于遍历可迭代对象（包括数组、字符串、Set、Map等）的元素。
循环变量为对象的元素值。
无法遍历普通对象，只能遍历具有迭代器（Iterator）的对象。
适用于需要遍历数组、字符串等可迭代对象的元素进行操作。
// for…of循环

for (let element of iterable) {
  console.log(element);
}

map循环

数组的高阶函数，用于遍历数组的每个元素，并返回一个新的数组。
遍历过程中可以对元素进行处理和转换。
适用于需要对数组的每个元素进行处理并获得新数组的情况。

array.map(function(currentValue, index, array) {
  // 执行操作并返回处理后的值
});
//currentValue：当前元素的值。
//index（可选）：当前元素的索引。
//array（可选）：原始数组。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers);  // [2, 4, 6, 8, 10]