JavaScript循环语句常见使用例子

在JavaScript中，循环语句用于重复执行一段代码，直到满足特定条件为止。循环是编程中控制流程的重要工具，能够高效处理重复性任务

一.for循环

for循环是一种常见的控制流语句，用于重复执行代码块。它通常用于遍历序列（如列表、元组、字符串）或执行固定次数的操作

for (初始化表达式; 条件表达式; 更新表达式) {
    // 循环体
}

初始化表达式在循环开始前执行一次，通常用于声明计数器变量。条件表达式在每次循环迭代前评估，如果为true则继续循环。更新表达式在每次循环迭代后执行，通常用于更新计数器

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 输出0到4

二.forEach循环

JavaScript 的 forEach 方法是数组对象的内置方法，用于遍历数组的每个元素并执行回调函数

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

回调函数中的参数：

可以只接收数组内的值，不接收索引和数组本身

例子：

const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num); // 输出：1, 2, 3
});

注意：

forEach 不会返回新数组

无法通过 return 或 break 中断循环

对空数组调用 forEach 不会执行回调函数

三.map循环

JavaScript 中的 map 方法是数组的高阶函数之一，用于遍历数组并对每个元素执行操作，最终返回一个新数组，而不会修改原数组

const newArray = array.map(function(currentValue, index, arr) {
  // 返回处理后的元素
}, thisValue);

回调函数中的参数：

例子：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

注意：

map 不会修改原数组，而是返回一个新数组。

如果未显式返回任何值，回调函数会返回 undefined，导致新数组对应位置为 undefined。

forEach与map的区别

forEach：仅遍历数组，无返回值（返回 undefined）

map：遍历并返回新数组，每个元素由回调函数处理后的结果组成，适合数据转换

四.filter循环(过滤)

filter 是 JavaScript 数组的一个高阶函数，用于创建一个新数组，包含通过回调函数测试的所有元素。回调函数返回 true 或 false，决定元素是否包含在新数组中

const newArray = array.filter(callback(element, index, array));

回调函数中的参数：

示例：过滤出大于 2 的数字

const numbers = [1, 2, 3, 4];
const filtered = numbers.filter(num => num > 2);
console.log(filtered); // [3, 4]

注意：

filter 不会修改原数组，而是返回一个新数组

如果所有元素都不满足条件，返回空数组

回调函数必须是返回布尔值的函数，否则会隐式转换为布尔值

五.some循环

在JavaScript中，Array.prototype.some()是一个数组方法，用于测试数组中是否至少有一个元素满足给定的条件。该方法会遍历数组中的每个元素，直到找到一个满足条件的元素为止

array.some(callback(element, index, array), thisArg)

回调函数中的参数：

返回值

如果数组中至少有一个元素满足条件，返回 true

如果所有元素均不满足条件，返回 false

示例：检查数组中是否有偶数

const numbers = [1, 3, 5, 7, 9];
const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // 输出: false

注意：

some() 不会修改原数组

如果数组为空，some() 始终返回 false

some() 会在找到第一个满足条件的元素后立即停止遍历

六.every循环

every 是 JavaScript 数组的一个内置方法，用于检测数组中的所有元素是否都满足指定条件。该方法接受一个回调函数作为参数，并对数组中的每个元素执行该函数，直到回调函数返回 false。如果所有元素都满足条件（即回调函数对所有元素返回 true），则 every 方法返回 true；否则返回 false

array.every(callback(element, index, array), thisArg)

示例：检查数组中所有元素是否为正数

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

注意：

every 方法在遇到第一个返回 false 的回调时会立即停止遍历数组

空数组调用 every 方法会返回 true（因为没有任何元素不满足条件）

every 不会改变原数组

some与every的区别

some在遇到第一个true时终止；every在遇到第一个false时终止

some对空数组始终返回false；every对空数组始终返回true（逻辑上称为“空真”）

some适合存在性检查；every适合全体一致性验证 

every循环只有所有元素都满足条件，才会返回true，哪怕只要有一个元素不满足条件，就会返回false

七.reduce循环

reduce 是 JavaScript 数组的一个高阶函数，用于将数组元素通过回调函数累积为单个值。它遍历数组的每个元素，并将上一次回调的结果作为下一次回调的输入

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

示例：计算数组元素的总和

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出: 10

注意：

如果数组为空且未提供 initialValue，reduce 会抛出错误

提供 initialValue 可以避免因空数组导致的错误，同时明确初始累积值的类型

reduce 不会改变原数组，而是返回一个新的累积值

八.for in 循环

for...in 循环用于遍历对象的可枚举属性(遍历对象的属性)

for (variable in object) {
  // 执行的代码
}

示例

const person = {
  name: 'John',
  age: 30,
  job: 'Developer'
};

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

输出

name: John
age: 30
job: Developer

九.for of 循环

for...of 循环是 ES6 引入的一种遍历可迭代对象（如数组、字符串、Map、Set 等）的语法结构

for of 循环数组（可迭代的对象）

for (variable of iterable) {
  // 执行的代码块
}

遍历字符串

for...of 循环可以逐个字符遍历字符串：

const text = 'hello';

for (const char of text) {
  console.log(char);
}
// 输出:
// h
// e
// l
// l
// o

补充：

通过添加keys()方法可以获取数组的索引

通过添加values()方法可以获取数组的值

通过添加entries()方法可以获取数组的索引和值

通过结构赋值直接将索引和值赋值给变量

for of 和for in 区别

遍历目标不同

for...of 用于遍历可迭代对象（如数组、字符串、Map、Set 等），直接获取元素值

for...in 用于遍历对象的可枚举属性（包括原型链上的属性），获取的是键名（key）

适用场景

for...of 适合需要直接操作元素值的场景（如数组遍历）

for...in 适合需要检查对象属性或调试的场景（但通常需配合 hasOwnProperty 过滤原型属性）

十.find 循环

find 返回第一个满足条件的值

 let newVal = arr.find(function(val,index,thisArr){
             if(val >5){
                 return true;
            }
         })
         console.log(newVal)

十一.findIndex 循环

findIndex 返回第一个满足条件的索引

findIndex 是 JavaScript 数组的一个内置方法，用于查找数组中第一个满足条件的元素的索引。如果找不到符合条件的元素，返回 -1

array.findIndex(callback(element, index, array), thisArg)

注意：

findIndex 在找到目标后会立即终止遍历

空槽（empty）元素会被跳过，回调不会执行

若需提前终止循环，findIndex 本身已实现

总结

到此这篇关于JavaScript循环语句常见使用例子的文章就介绍到这了,更多相关JS循环语句内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论