Мікрооптимізація та проблема використання slice() в JavaScript 🔥

Давайте подивимось на код

# Приклад даних  
const orderIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  
const offset = 3;  
const pageSize = 4;  

# Варіант 1: slice в середині slice 🤔  
const result1 = orderIds.slice(offset).slice(0, pageSize);  

# Варіант 2: один slice ✨  
const result2 = orderIds.slice(offset, offset + pageSize);

Чому варіант 1 не є хорошим? 👎

Перший варіант працює в 2 етапи:
1. slice(offset) -> створює новий масив [4, 5, 6, 7, 8, 9, 10]
2. .slice(0, pageSize) -> створює ще один новий масив [4, 5, 6, 7]

Основні проблеми:
- Споживає багато пам'яті, оскільки потрібно створювати тимчасовий масив двічі
- Процесор повинен працювати двічі
- Код важко читати, треба думати крок за кроком
- Код виглядає не професійно

Чому варіант 2 кращий?

orderIds.slice(offset, offset + pageSize)

Переваги:
- Все робиться за один раз! Точно і чітко
- Зекономлено пам'ять, новий масив створюється лише один раз
- Процесор працює менше
- Код читається легше і швидше зрозумілий
- Виглядає професійно

Тестування продуктивності 💪

const bigArray = Array.from({ length: 1000000 }, (_, i) => i);  
const offset = 500000;  
const pageSize = 1000;  

console.time('double-slice');  
for(let i = 0; i < 1000; i++) {  
 const result = bigArray.slice(offset).slice(0, pageSize);  
}  
console.timeEnd('double-slice');  

console.time('single-slice');  
for(let i = 0; i < 1000; i++) {  
 const result = bigArray.slice(offset, offset + pageSize);  
}  
console.timeEnd('single-slice');

Результат показує, що варіант 2 значно швидший! 🚀

Кращі практики, які варто пам’ятати

1. Використовуйте slice(start, end), а не slice().slice()
2. Обчислюйте індекси правильно перед використанням slice
3. Будьте обережні з негативними індексами (вони рахуються з кінця масиву)

Підсумок

Такі мікрооптимізації можуть здатися незначними, але коли ви працюєте з великими обсягами даних або часто виконуєте операції, це може вплинути на продуктивність!

Написання хорошого коду — це не лише про те, щоб він працював, а й про те, щоб він працював ефективно!
Не забувайте про:
- Продуктивність
- Використання пам'яті
- Зрозумілість коду
- Підтримуваність

Пам’ятайте: "Добрий код — це не просто код, який працює, а код, який працює ефективно!"

Перекладено з: Micro Optimization กับปัญหาการใช้ slice() ใน JavaScript 🔥