Огляд прототипу масиву в JavaScript: усе, що вам потрібно знати

Огляд:
Сьогодні я працював над налагодженням та покращенням гри Space Invaders. Це включало вирішення проблем з рухом, виправлення перевірки зіткнень та удосконалення логіки гри. Це був веселий та продуктивний спосіб глибше зрозуміти HTML, CSS та JavaScript.

Що таке Array.prototype?

Кожен масив JavaScript успадковує методи та властивості від Array.prototype. Саме це дозволяє таким методам, як .map(), .filter(), та .reduce(), бути доступними для ваших масивів. Можна додавати власні методи до Array.prototype, щоб розширити функціональність для всіх масивів. Однак це потрібно робити обережно, щоб уникнути конфліктів або небажаних побічних ефектів у вашому коді або інших бібліотеках.

Вбудовані методи Array.prototype

Для спрощення давайте групуємо ці методи за категоріями: Ітерація, Доступ, Мутація та Утиліта.

1. Методи ітерації

Ці методи дозволяють вам легко обробляти елементи масиву:

.forEach(callback): Виконує функцію для кожного елемента.

[1, 2, 3].forEach(num => console.log(num));  
// Вивід: 1, 2, 3

.map(callback): Створює новий масив, застосовуючи функцію до кожного елемента.

const squared = [1, 2, 3].map(num => num ** 2);  
console.log(squared); // Вивід: [1, 4, 9]

.filter(callback): Фільтрує елементи за умовою.

const evens = [1, 2, 3, 4].filter(num => num % 2 === 0);  
console.log(evens); // Вивід: [2, 4]

.reduce(callback, initialValue): Зводить масив до одного значення, ітеруючи через його елементи.

const sum = [1, 2, 3, 4].reduce((acc, num) => acc + num, 0);  
console.log(sum); // Вивід: 10

.flat(depth): Сплющує вкладені масиви в один масив.

const nested = [1, [2, [3, 4]]].flat(2);  
console.log(nested); // Вивід: [1, 2, 3, 4]

2. Методи доступу та пошуку

Ці методи допомагають знайти або отримати доступ до елементів:

.find(callback): Повертає перший елемент, що відповідає умові.

const result = [5, 10, 15].find(num => num > 8);  
console.log(result); // Вивід: 10

.includes(value): Перевіряє, чи існує значення в масиві.

console.log([1, 2, 3].includes(2)); // Вивід: true

.at(index): Доступ до елемента за допомогою позитивного або негативного індекса.

const arr = [10, 20, 30];  
console.log(arr.at(-1)); // Вивід: 30

3. Методи мутації

Ці методи змінюють оригінальний масив, тому використовуйте їх обережно:

.push(...elements): Додає елементи в кінець масиву.

.pop(): Видаляє та повертає останній елемент.

.splice(start, deleteCount, ...items): Додає, видаляє або замінює елементи.

.sort(compareFunction): Сортує масив на місці.

const arr = [3, 1, 4];  
arr.sort((a, b) => a - b);  
console.log(arr); // Вивід: [1, 3, 4]

4. Методи утиліти

Ці методи надають допоміжні функції для масивів:

...

Методи утиліти

Ці методи дозволяють трансформувати або комбінувати масиви:

.concat(...arrays): Об'єднує масиви в новий масив.

.join(separator): Об'єднує елементи в рядок.

const words = ['JavaScript', 'is', 'awesome'];  
console.log(words.join(' ')); // Вивід: "JavaScript is awesome"

.slice(start, end): Витягує частину масиву в новий масив.

Статичні методи в Array

Статичні методи викликаються на класі Array, а не на його екземплярах:

• Array.isArray(value): Перевіряє, чи є значення масивом.

console.log(Array.isArray([1, 2, 3])); // Вивід: true

• Array.from(iterable): Перетворює ітерабельний об'єкт або схожий на масив об'єкт в масив.
• Array.of(...items): Створює масив з аргументів.

Розширення Array.prototype (обережно)

Ви можете додавати власні методи до Array.prototype:

Array.prototype.sum = function () {  
 return this.reduce((acc, num) => acc + num, 0);  
};  

const numbers = [1, 2, 3, 4];  
console.log(numbers.sum()); // Вивід: 10

⚠️ Попередження:

1. Забруднення глобальної області видимості: Модифікація Array.prototype впливає на всі масиви глобально.
2. Можливі конфлікти: Ваші власні методи можуть конфліктувати з вбудованими або майбутніми функціями JavaScript.
3. Вплив на продуктивність: Ітерація по властивостях масивів може призвести до неочікуваної поведінки.

Чому важливо оволодіти Array.prototype?

• Чистіший код: Вбудовані методи усувають потребу в повторюваних циклах.
• Покращена ефективність: Обирайте правильний інструмент для задачі, будь то фільтрація, мапінг або редукція даних.
• Можливість розширення: Досвідчені розробники можуть покращити функціональність масивів, використовуючи власні методи.

Оволодіння Array.prototype є ключем до розкриття повного потенціалу JavaScript. Почніть експериментувати з вбудованими методами та підніміть свої навички на новий рівень, створюючи безпечні, багаторазові абстракції.

Перекладено з: Exploring JavaScript’s Array Prototype: Everything You Need to Know