Javascript 常見的迴圈方式總結

始識發表於2023-05-18
JavaScript

本文地址： https://www.cnblogs.com/zichliang/p/17412968.html
在Javascript中有很多種迴圈方式。有多種迴圈方式可以用來遍歷陣列、物件、以及執行一些重複性任務
但是有很多方式甚至從未用過，所以簡單來總結一下JS中的迴圈

for迴圈

for 迴圈是在您希望建立迴圈時經常使用的工具。

例：

for (let i = 0; i < 5; i++) {
    console.log(`第${i + 1}次迴圈遍歷`)
}

結果

while 迴圈

While語句包括一個迴圈條件和一段程式碼塊，只要條件為真，就不斷迴圈執行程式碼塊。

例：

let i = 0;
while (i < 100) {
    i = i + 1;
    console.log(`第${i}次迴圈遍歷`)
}

結果

do……while迴圈

先執行迴圈程式碼 再執行判斷條件

let a = 3;
let b = 0;

do {
    console.log("列印b的值>>>>>",b);
    b++;
} while (b < a); // 當a小於等於b的時候終止她。

結果

while：先判斷後執行； do-while：先執行再判斷，即使初始條件不成立， do-while迴圈至少執行一次；

for-in迴圈

fo…in迴圈一般用於物件的遍歷

let kj = {
    "a": 1,
    "b": 2,
    "c": 3
}


//使用for-in遍歷這個物件
for (let k in kj) {
    console.log(k, kj[k])
}

結果

注！ 最好不要用for in遍歷陣列

for-of迴圈

for...of 迴圈是 ES6 中新增的一種迴圈型別，它允許您遍歷可迭代物件（例如陣列、字串、Map 或 Set）中的每個元素，並對其執行指定的操作。
for-of 可以更方便的迴圈遍歷陣列等

let arr = [1, 2, 4, 5, 6, 7]
for (let v of arr) {
    console.log(v);
}

結果

for in遍歷的是陣列的索引（即鍵名），而for of遍歷的是陣列元素值。 for in更適合遍歷物件，不要使用for in遍歷陣列 使用for in會遍歷陣列所有的可列舉屬性，包括原型。例如上慄的原型方法method和name屬性

map()迴圈

map()是一種常用的陣列方法，它可以將一個陣列中的每個元素按照一定規則對映為一個新的陣列

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map((number) => {
  console.log(number)
  return number * 2;
});

console.log(newArray); // Output: [2, 4, 6, 8, 10]

結果

forEach迴圈

forEach()是一種常用的陣列方法，可以幫助我們遍歷一個陣列並對其中的每個元素執行指定的操作。
例子

const originalArray = [1, 2, 3, 4, 5];
originalArray.forEach((number) => {
  console.log(number * 2);
});

結果

forEach()方法沒有返回值，因此我們不能將其執行結果賦值給其他變數

filter()過濾迴圈

filter()是一種常用的陣列方法，它可以幫助我們按照特定條件篩選出一個陣列中的部分元素並返回一個新的陣列

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter((number) => {
  // 只返回能被2整除的數 也就是偶數
  return number % 2 === 0;
});

console.log(filteredArray);

結果

filter()方法不會修改原始陣列，而是返回一個新的陣列作為其執行結果。因此，如果我們需要在原始陣列中刪除一些元素，那麼就應該使用splice()方法

JS實現Python中的zip迴圈

熟悉python的都知道ZIP迴圈面對迴圈兩個陣列很好用 那麼在python中如何實現呢？

例子

function* zip(...arrays) {
    let minLength = Math.min(...arrays.map(arr => arr.length));
    for (let i = 0; i < minLength; i++) {
        yield arrays.map(arr => arr[i]);
    }
}

let aList = [1, 2, 3]
let bList = ["a", "b", "c"]

for (let [a, b] of zip(aList, bList)) {
    console.log(a, b)
}

結果

some()和every()

some() 和 every() 方法是很有用的陣列方法，它們都是用來遍歷陣列並返回布林值。

some() 方法

some() 方法用來檢測陣列中是否有至少一個元素滿足指定條件。當任意一個元素滿足條件，則該方法返回 true；否則，返回 false。

例子：

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.some(function(element) {
  return element > 10;
});

console.log(hasLargeNumber);

結果

很顯然 只要有一個結果滿足了 大於10的條件 就返回了true

every() 方法

every() 方法與 some() 方法類似，不過它要求所有元素都滿足指定條件。當所有元素都滿足條件，則該方法返回 true；否則，返回 false。
例子

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.every(function(element) {
  return element > 10;
});

console.log(hasLargeNumber);

結果

很顯然 只要有一個結果不滿足 大於10的條件 就返回了false 和some方法相反

reduce() 和 reduceRight()

是 JavaScript 陣列中常用的兩個方法，它們都是用於將陣列中的元素歸納為單個值。
它們可以幫助您迭代和聚合陣列中的元素

reduce() 方法

reduce() 方法對陣列中的每個元素執行一個由您提供的函式，並將其結果彙總為單個返回值。該方法需要傳入兩個引數：一個回撥函式和一個可選的初始值。

const numbers = [1, 2, 3, 4, 5];
//accumulator： 表示當前已經累積的值初始值是0 currentValue 表示當前正在被遍歷的陣列元素。
const sum = numbers.reduce(function(accumulator, currentValue) {
  console.log(accumulator,currentValue)
  return accumulator + currentValue;
}, 0);

console.log(sum)

結果

accumulator： 表示當前已經累積的值初始值是0 currentValue 表示當前正在被遍歷的陣列元素。

reduceRight() 方法

reduceRight() 方法與 reduce() 方法類似，不過它是從陣列的末尾開始遍歷陣列並執行回撥函式。該方法也需要傳入兩個引數：一個回撥函式和一個可選的初始值。

const numbers = [1, 2, 3, 4, 5];
//accumulator： 表示當前已經累積的值初始值是0 currentValue 表示當前正在被遍歷的陣列元素。
const sum = numbers.reduceRight(function(accumulator, currentValue) {
  console.log(accumulator,currentValue)
  return accumulator + currentValue;
}, 0);

console.log(sum)

結果

本文地址： https://www.cnblogs.com/zichliang/p/17412968.html

相關文章