JavaScript - hiệu năng giữa 🔍 indexOf và 🔎 includes

Array.prototype.includes là được giới thiệu từ ECMAScript 7, được support bởi tất cả các browser hiện đại.

Performance testing source code

let allElements = [...document.getElementsByTagName('*')];
console.log('allElements.length: ', allElements.length);

/**
 * get a random member of `allElements`
 */
const getRandomMember = () => {
  allElements[Math.floor(Math.random() * allElements.length)];
}
const checkingTimes = 1e7;

const t1 = performance.now();
console.log('🍀 Start includes');

for (let i = 0; i < checkingTimes; i++) {
  randEl = getRandomMember();

  // searching for that member, result should be `true`
  const isIn = allElements.includes(randEl);
}

const t2 = performance.now();
console.log('🍒 Start indexOf');

for (let i = 0; i < checkingTimes; i++) {
  randEl = getRandomMember();

  // searching for that member, result should be `true`
  const isIn = (allElements.indexOf(randEl) > -1);
}

const t3 = performance.now();
console.log('End');

const includesTime = t2 - t1;
const indexOfTime = t3 - t2;

console.log('🍀 includes time:', t2 - t1);
console.log('🍒 indexOf time:', t3 - t2);

console.log('🍒 indexOf / 🍀 includes time:', indexOfTime / includesTime);

Các bước thực hiện

1. Truy cập google.com
2. ctrl + shift + i để mở console
3. Copy source code trên và paste vào console và gõ enter

Kết quả

allElements.length:  307
🍀 Start includes
🍒 Start indexOf
End
🍀 includes time: 167.10000000149012
🍒 indexOf time: 2972.7999999970198
VM1313:41 🍒 indexOf / 🍀 includes time: 17.790544583904907

Kết luận

Với case là số lượng thực hiện lớn (1e7) và array là các elements thực sự và có length tầm > 300 thì thời gian thực thi của includes gấp khoảng 17 lần so với indexOf.

Tham khảo

• Source code cơ bản lấy từ: Stackoverflow - Array.prototype.includes vs. Array.prototype.indexOf
• w3schools includes

---

Photo by Jametlene Reskp on Unsplash