以下是Javascript中可以實(shí)現(xiàn)循環(huán)的方法：

• For Loop
• While Loop
• Do-While Loop
• For-In Loop
• For-Of Loop
• ForEach Loop
• Map Loop
• Filter Loop
• Reduce Loop
• Some Loop
• Every Loop
• Find Loop

我們將對(duì)這些循環(huán)方法進(jìn)行測試，以確定哪種方法最快。

為了比較每個(gè)循環(huán)的性能，我們將使用 console.time() 和 console.timeEnd() 方法來測量它們的執(zhí)行時(shí)間。

javascript
代碼解讀
復(fù)制代碼
console.time('My Description');

// Code to measure

console.timeEnd('My Description');

用于測試的任務(wù)是：將 5000 萬個(gè)項(xiàng)目從一個(gè)數(shù)組轉(zhuǎn)移到另一個(gè)數(shù)組。

javascript
代碼解讀
復(fù)制代碼
console.time('Array Creation');
  
const numbersList = Array.from({ length: 50_000_000 }, () => Math.floor(Math.random() * 100));

console.timeEnd('Array Creation');

為確保公平比較，我們將異步運(yùn)行每個(gè)循環(huán)。

雖然 For-In 的語法與 For-Of 類似，但它不是為數(shù)組設(shè)計(jì)的，因此不在測試之中。 For-In 更適合迭代具有多個(gè)屬性的對(duì)象，因?yàn)樗氖菍傩悦Q（或鍵）而不是值本身，而與數(shù)組一起使用會(huì)導(dǎo)致性能問題和意外行為。

scss
代碼解讀
復(fù)制代碼
(async () => {
  await usingForLoop(numbersList);
  await usingWhile(numbersList);
  await usingDoWhile(numbersList);
  await usingForOf(numbersList);
  await usingForEach(numbersList);
  await usingMap(numbersList);
  await usingFilter(numbersList);
  await usingReduce(numbersList);
  await usingSome(numbersList);
  await usingEvery(numbersList);
  await usingFind(numbersList);
})()

ForLoop

ini
代碼解讀
復(fù)制代碼
const usingForLoop = async (array) => {
  console.time('FOR LOOP');

  const newNumbersList = [];
  for (let i = 0; i < array.length; i++) {
    newNumbersList.push(array[i]);
  }

  console.timeEnd('FOR LOOP');
}

while

ini
代碼解讀
復(fù)制代碼
const usingWhile = async (array) => {
 console.time('WHILE');

 let i = 0;
 const newNumbersList = [];
 while (i < array.length) {
   newNumbersList.push(array[i]);
   i++;
 }

 console.timeEnd('WHILE');
}

doWhile

ini
代碼解讀
復(fù)制代碼
const usingDoWhile = async (array) => {
 console.time('DO WHILE');

 let i = 0;
 const newNumbersList = [];
 do {
   newNumbersList.push(array[i]);
   i++;
 } while (i < array.length);

 console.timeEnd('DO WHILE');
}

ForOf

javascript
代碼解讀
復(fù)制代碼
const usingForOf = async (array) => {
  console.time('FOR OF');

  const newNumbersList = [];
  for (const item of array) {
    newNumbersList.push(item);
  }

  console.timeEnd('FOR OF');
}

ForEach

javascript
代碼解讀
復(fù)制代碼
const usingForEach = async (array) => {
  console.time('FOR EACH');

  const newNumbersList = [];
  array.forEach((item) => newNumbersList.push(item));

  console.timeEnd('FOR EACH');
}

Map

typescript
代碼解讀
復(fù)制代碼
const usingMap = async (array) => {
 console.time('MAP');

 const newNumbersList = array.map((number) => number);

 console.timeEnd('MAP');
}

Filer

javascript
代碼解讀
復(fù)制代碼
const usingFilter = async (array) => {
 console.time('FILTER');

 const newNumbersList = array.filter((item) => true);

 console.timeEnd('FILTER');
}

Reduce

javascript
代碼解讀
復(fù)制代碼
const usingReduce = async (array) => {
 console.time('REDUCE');

 const newNumbersList = array.reduce((acc, item) => {
   acc.push(item);
   return acc;
 }, []);

 console.timeEnd('REDUCE');
}

Some

javascript
代碼解讀
復(fù)制代碼
const usingSome = async (array) => {
 console.time('SOME');

 const newNumbersList = [];
 array.some((item) => {
   newNumbersList.push(item);
   return false;
 });

 console.timeEnd('SOME')
}

Every

javascript
代碼解讀
復(fù)制代碼
const usingEvery = async (array) => {
  console.time('EVERY');

  const newNumbersList = [];
  array.every((item) => {
    newNumbersList.push(item);
    return true;
  });

  console.timeEnd('EVERY')
}

Find

javascript
代碼解讀
復(fù)制代碼
const usingFind = async (array) => {
  console.time('FIND');

  const newNumbersList= [];
  array.find((item) => {
    newNumbersList.push(item);
    return false;
  });

  console.timeEnd('FIND')
}

任務(wù)運(yùn)行了五次，顯示的測量值是計(jì)算得出的平均值。

測試平均結(jié)果如下：

從結(jié)果可以看出，前5名分別是:

• 1. Map
• 2. For Loop
• 3. While
• 4. Do While
• 5. For Each

有趣的是只有Map是一個(gè)函數(shù)調(diào)用，其余的都是循環(huán)體。

另外該測試僅針對(duì)一項(xiàng)特定任務(wù)進(jìn)行的，不同測試用例可能會(huì)有不同的結(jié)果，不同的內(nèi)存或者CPU也會(huì)有不一樣的表現(xiàn)。從本次測試的結(jié)果，我們可以看到Map 和 For Loop 的性能是最好的。令人失望的是For-Of，相對(duì)于For Loop，作為新出的一個(gè)API竟然效率這么拉跨。

Map每次循環(huán)都需要調(diào)用回調(diào)函數(shù)，理論上不應(yīng)該比For Loop更快。但現(xiàn)代 JavaScript 引擎（如 V8）對(duì)高階函數(shù)（如 map、filter 等）進(jìn)行了高度優(yōu)化，尤其是對(duì)數(shù)組的處理。引擎內(nèi)部可能會(huì)針對(duì)這些高階函數(shù)應(yīng)用特定的優(yōu)化策略，減少不必要的操作，進(jìn)而提升性能。而且 map 是一個(gè)專門用于遍歷數(shù)組并返回新數(shù)組的高階函數(shù)，V8 等引擎能夠更好地預(yù)測和優(yōu)化其內(nèi)部的操作路徑。而 for loop 是更通用的控制結(jié)構(gòu)，可能沒有這些特定的優(yōu)化。

結(jié)論

從測試結(jié)果看Map和For Loop的循環(huán)效率相差不大，大家可以根據(jù)需要做選擇。map 無法中途退出，但可以返回一個(gè)新的數(shù)組。