在JavaScript中，循環(huán)語句用于重復執(zhí)行一段代碼，直到滿足特定條件為止。循環(huán)是編程中控制流程的重要工具，能夠高效處理重復性任務

一.for循環(huán)

for循環(huán)是一種常見的控制流語句，用于重復執(zhí)行代碼塊。它通常用于遍歷序列（如列表、元組、字符串）或執(zhí)行固定次數(shù)的操作

for (初始化表達式; 條件表達式; 更新表達式) {
    // 循環(huán)體
}

初始化表達式在循環(huán)開始前執(zhí)行一次，通常用于聲明計數(shù)器變量。條件表達式在每次循環(huán)迭代前評估，如果為true則繼續(xù)循環(huán)。更新表達式在每次循環(huán)迭代后執(zhí)行，通常用于更新計數(shù)器

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

二.forEach循環(huán)

JavaScript 的 forEach 方法是數(shù)組對象的內(nèi)置方法，用于遍歷數(shù)組的每個元素并執(zhí)行回調(diào)函數(shù)

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

回調(diào)函數(shù)中的參數(shù)：

可以只接收數(shù)組內(nèi)的值，不接收索引和數(shù)組本身

例子：

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

注意：

forEach 不會返回新數(shù)組

無法通過 return 或 break 中斷循環(huán)

對空數(shù)組調(diào)用 forEach 不會執(zhí)行回調(diào)函數(shù)

三.map循環(huán)

JavaScript 中的 map 方法是數(shù)組的高階函數(shù)之一，用于遍歷數(shù)組并對每個元素執(zhí)行操作，最終返回一個新數(shù)組，而不會修改原數(shù)組

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

回調(diào)函數(shù)中的參數(shù)：

例子：

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

注意：

map 不會修改原數(shù)組，而是返回一個新數(shù)組。

如果未顯式返回任何值，回調(diào)函數(shù)會返回 undefined，導致新數(shù)組對應位置為 undefined。

forEach與map的區(qū)別

forEach：僅遍歷數(shù)組，無返回值（返回 undefined）

map：遍歷并返回新數(shù)組，每個元素由回調(diào)函數(shù)處理后的結(jié)果組成，適合數(shù)據(jù)轉(zhuǎn)換

四.filter循環(huán)(過濾)

filter 是 JavaScript 數(shù)組的一個高階函數(shù)，用于創(chuàng)建一個新數(shù)組，包含通過回調(diào)函數(shù)測試的所有元素?；卣{(diào)函數(shù)返回 true 或 false，決定元素是否包含在新數(shù)組中

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

回調(diào)函數(shù)中的參數(shù)：

示例：過濾出大于 2 的數(shù)字

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

注意：

filter 不會修改原數(shù)組，而是返回一個新數(shù)組

如果所有元素都不滿足條件，返回空數(shù)組

回調(diào)函數(shù)必須是返回布爾值的函數(shù)，否則會隱式轉(zhuǎn)換為布爾值

五.some循環(huán)

在JavaScript中，Array.prototype.some()是一個數(shù)組方法，用于測試數(shù)組中是否至少有一個元素滿足給定的條件。該方法會遍歷數(shù)組中的每個元素，直到找到一個滿足條件的元素為止

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

回調(diào)函數(shù)中的參數(shù)：

返回值

如果數(shù)組中至少有一個元素滿足條件，返回 true

如果所有元素均不滿足條件，返回 false

示例：檢查數(shù)組中是否有偶數(shù)

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

注意：

some() 不會修改原數(shù)組

如果數(shù)組為空，some() 始終返回 false

some() 會在找到第一個滿足條件的元素后立即停止遍歷

六.every循環(huán)

every 是 JavaScript 數(shù)組的一個內(nèi)置方法，用于檢測數(shù)組中的所有元素是否都滿足指定條件。該方法接受一個回調(diào)函數(shù)作為參數(shù)，并對數(shù)組中的每個元素執(zhí)行該函數(shù)，直到回調(diào)函數(shù)返回 false。如果所有元素都滿足條件（即回調(diào)函數(shù)對所有元素返回 true），則 every 方法返回 true；否則返回 false

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

示例：檢查數(shù)組中所有元素是否為正數(shù)

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

注意：

every 方法在遇到第一個返回 false 的回調(diào)時會立即停止遍歷數(shù)組

空數(shù)組調(diào)用 every 方法會返回 true（因為沒有任何元素不滿足條件）

every 不會改變原數(shù)組

some與every的區(qū)別

some在遇到第一個true時終止；every在遇到第一個false時終止

some對空數(shù)組始終返回false；every對空數(shù)組始終返回true（邏輯上稱為“空真”）

some適合存在性檢查；every適合全體一致性驗證 

every循環(huán)只有所有元素都滿足條件，才會返回true，哪怕只要有一個元素不滿足條件，就會返回false

七.reduce循環(huán)

reduce 是 JavaScript 數(shù)組的一個高階函數(shù)，用于將數(shù)組元素通過回調(diào)函數(shù)累積為單個值。它遍歷數(shù)組的每個元素，并將上一次回調(diào)的結(jié)果作為下一次回調(diào)的輸入

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

示例：計算數(shù)組元素的總和

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

注意：

如果數(shù)組為空且未提供 initialValue，reduce 會拋出錯誤

提供 initialValue 可以避免因空數(shù)組導致的錯誤，同時明確初始累積值的類型

reduce 不會改變原數(shù)組，而是返回一個新的累積值

八.for in 循環(huán)

for...in 循環(huán)用于遍歷對象的可枚舉屬性(遍歷對象的屬性)

for (variable in object) {
  // 執(zhí)行的代碼
}

示例

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 循環(huán)

for...of 循環(huán)是 ES6 引入的一種遍歷可迭代對象（如數(shù)組、字符串、Map、Set 等）的語法結(jié)構(gòu)

for of 循環(huán)數(shù)組（可迭代的對象）

for (variable of iterable) {
  // 執(zhí)行的代碼塊
}

遍歷字符串

for...of 循環(huán)可以逐個字符遍歷字符串：

const text = 'hello';

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

補充：

通過添加keys()方法可以獲取數(shù)組的索引

通過添加values()方法可以獲取數(shù)組的值

通過添加entries()方法可以獲取數(shù)組的索引和值

通過結(jié)構(gòu)賦值直接將索引和值賦值給變量

for of 和for in 區(qū)別

遍歷目標不同

for...of 用于遍歷可迭代對象（如數(shù)組、字符串、Map、Set 等），直接獲取元素值

for...in 用于遍歷對象的可枚舉屬性（包括原型鏈上的屬性），獲取的是鍵名（key）

適用場景

for...of 適合需要直接操作元素值的場景（如數(shù)組遍歷）

for...in 適合需要檢查對象屬性或調(diào)試的場景（但通常需配合 hasOwnProperty 過濾原型屬性）

十.find 循環(huán)

find 返回第一個滿足條件的值

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

十一.findIndex 循環(huán)

findIndex 返回第一個滿足條件的索引

findIndex 是 JavaScript 數(shù)組的一個內(nèi)置方法，用于查找數(shù)組中第一個滿足條件的元素的索引。如果找不到符合條件的元素，返回 -1

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

注意：

findIndex 在找到目標后會立即終止遍歷

空槽（empty）元素會被跳過，回調(diào)不會執(zhí)行

若需提前終止循環(huán)，findIndex 本身已實現(xiàn)

總結(jié)

到此這篇關于JavaScript循環(huán)語句常見使用例子的文章就介紹到這了,更多相關JS循環(huán)語句內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論