ผลรวมอาร์เรย์: เปรียบเทียบ Recursion vs For Loop vs ES6 Methods ใน JavaScript

สมมติว่าเรามีอาร์เรย์ที่มีจำนวนตัวเลขมาก และต้องการเปรียบเทียบเวลาที่ recursion ใช้ vs for loop ทั่วไป vs ES6 function ในการหาผลรวมของทุกองค์ประกอบในอาร์เรย์

ที่นี่เพื่อจำลองอาร์เรย์ใหญ่ เราจะวนลูปอาร์เรย์เล็กๆ จำนวนมาก (ในอันดับ 10 ล้าน) เป้าหมายหลักคือได้อัตราส่วนเวลาประมาณของแต่ละวิธี

Part 1: Recursive Approach

const recursiveSum = (arr, len = 0, sum = 0) => {
  if (len < arr.length) {
    return recursiveSum(arr, len + 1, sum + arr[len]);
  }
  return sum;
};

Part 2: Looping Approach

const loopingSum = arr => {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
};

Part 3: ES6 Approach

const ES6Sum = arr => arr.reduce((acc, val) => acc + val);

ตอนนี้มาเปรียบเทียบประสิทธิภาพของสามฟังก์ชันนี้ด้วย console.time() และ timeEnd():

ตัวอย่างโค้ด

const ITERATIONS = 100000000;
const arr = [12, 65, 87, 2, 23, 87, 4, 66, 34, 89, 89, 32, 4];

const recursiveSum = (arr, len = 0, sum = 0) => {
  if (len < arr.length) {
    return recursiveSum(arr, len + 1, sum + arr[len]);
  }
  return sum;
};

const loopingSum = arr => {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
};

const ES6Sum = arr => arr.reduce((acc, val) => acc + val);

console.time('recursive approach');
for (let k = 0; k < ITERATIONS; k++) {
  recursiveSum(arr);
}
console.timeEnd('recursive approach');

console.time('looping approach');
for (let l = 0; l < ITERATIONS; l++) {
  loopingSum(arr);
}
console.timeEnd('looping approach');

console.time('ES6 approach');
for (let m = 0; m < ITERATIONS; m++) {
  loopingSum(arr);
}
console.timeEnd('ES6 approach');

มาดูผลลัพธ์คอนโซลที่เป็นไปได้:

หมายเหตุ: นี่คือผลลัพธ์ที่เป็นไปได้เพียงอย่างหนึ่ง เนื่องจากประสิทธิภาพของโค้ดขึ้นอยู่กับระบบมาก แต่อัตราส่วนเวลาของสามฟังก์ชันนี้จะคล้อมากันทั่วทุกระบบ

recursive approach: 13.774s
looping approach: 3.138s
ES6 approach: 2.493s

ที่นี่เราเห็นเวลาที่ใช้ของสามแนวทางบนเครื่องเฉพาะ สำหรับการคำนวณพื้นฐานบนอาร์เรย์ ฟังก์ชัน ES6 มีประสิทธิภาพและ performant กว่าวิธีอื่นๆ

หมายเหตุ: เพื่อผลลัพธ์ที่ดีกว่า หลีกเลี่ยงการทดสอบโค้ดนี้ใน online IDEs