Методи, які ми розглянемо у статті, дозволяють писати більш чистий та читабельний код та зводять до мінімуму використання сторонніх бібліотек, на зразок Lodash.
Всі ці методи сумісні один з одним, тобто можуть взаємодіяти, не спотворюючи дані (особливо важливо при роботі з React). До того ж, вони дозволяють не використовувати цикли for та while у вашому коді.
.filter()
Створює новий масив з вже наявного. В новий масив потрапляють тільки ті елементи, що відповідають певному критерію.
Приклад
Створимо масив, елементами якого є вік студентів. З використанням методу .filter() у новий масив потрапляють лише дані про тих студентів, кому дозволено вживати алкогольні напої.
const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink буде складатися з елементів[19, 21]
.map()
Дозволяє створити новий масив. Його елементи — оброблені дані з іншого масиву. Метод чудово підходить для модифікації даних, тому що не вносить змін в початковий масив (особливо корисно при роботі з React).
Приклад
Створимо масив, що додає '$' до початку кожного числа з початкового масиву.
const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// Масив dollars буде виглядати так ['$2', '$3', '$4', '$5']
.reduce()
Корисність .reduce() часто недооцінюють. Метод дозволяє звести кількість елементів масиву до єдиного, в якому накопичуються значення інших елементів. Чудово підходить для підрахунку суми. Повертає значення будь-якого типу: об'єкт, масив, рядок, ціле число.
Приклад
Отримуємо суму елементів масиву цілих чисел за допомогою методу .reduce().
const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// константа total буде дорівнювати 30
Існує багато способів застосування .reduce(). Приклади можна знайти в документації MDN. Насамперед мова йде про розгортання масивів, що складаються з інших масивів, групування об'єктів за певними критеріями, видалення з масивів повторюваних елементів тощо.
.forEach()
Метод застосовує передану йому функцію до кожного елементу масиву.
Приклад
Вивід в консоль кожного елементу масиву.
const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// В консоль буде виведено
// 'happy'
// 'sad'
// 'angry'
.some()
Перевіряє відповідність хоча б одного елемента масиву певним умовам. Метод чудово проявляє себе у вирішенні задачі перевірки прав користувача. Його можна розглядати як аналог розглянутого раніше .forEach(). При застосуванні методу .some() та переданої йому функції, можна виконувати над елементами масиву деякі дії до тих пір, поки ця функція не поверне істинне значення, після чого – перервати обробку.
Приклад
Перевіримо наявність хоча б одного рядка 'admin' у масиві.
const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
// containsAdmin прийме значення true
.every()
Метод є схожим на .some(), але перевіряє всі елементи масиву на відповідність певній умові.
Приклад
Перевіримо, чи всі оцінки, що містяться в масиві, більше чи дорівнюють 3.
const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// goodOverallRating прийме значення true
.includes()
Перевіряє масив на наявність певного значення . Метод дуже схожий на .some(). Але .some() шукає відповідність деякій умові, а .inludes() шукає наявність у масиві значення, що задається при виклику методу.
Приклад
Перевіримо наявність рядка 'waldo' серед елементів масиву.
const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo прийме значення true
Array.from()
Статичний метод Array.from() створює масив на основі іншого масиву чи рядка. За необхідністю, методу можна передати як аргумент функцію map, що дозволяє надалі формувати дані в новому масиві. Але, насправді, для подібної задачі краще підходить особливий метод — .map().
Приклад
Формування масиву з рядка.
const newArray = Array.from('hello');
// newArray буде містити елементи ['h', 'e', 'l', 'l', 'o']
Створення масиву, що подвоює значення кожного елементу з початкового масиву.
const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues буде складатися з елементів[4, 8, 12]
Object.values()
Метод .values() повертає масив значень властивостей об'єкта.
Приклад
const icecreamColors = {
chocolate: 'brown'
vanilla: 'white',
strawberry: 'red',
}
const colors = Object.values(icecreamColors);
// масив colors отримає значення елементів ["brown", "white", "red"]
Object.keys()
Метод повертає масив, що складається з ключів (назв властивостей) об'єкта.
Приклад
const icecreamColors = {
chocolate: 'brown',
vanilla: 'white',
strawberry: 'red',
}
const types = Object.keys(icecreamColors);
// масив types буде складатися з елементів ["chocolate", "vanilla", "strawberry"]
Object.entries()
Метод Object.entries() повертає масив, елементами якого є пари [ключ, значення] об'єкту. Об'єкт передається методу як аргумент.
Приклад
const weather = {
rain: 0,
temperature: 24,
humidity: 33,
}
const entries = Object.entries(weather);
// Масив entries отримає пари елементів зі значеннями
// [['rain', 0], ['temperature', 24], ['humidity', 33]]
Розширення масиву (Array spread)
Оператор розширення (…) , при застосуванні до масивів, дозволяє розгортати їх елементи. Особливо корисно при виконанні об'єднання декількох масивів. Окрім цього, використання описаного методу дозволяє уникнути використання .splice()для видалення з масиву певних елементів. Натомість застосування методу разом із .slice() дозволить уникнути зміну первинного масиву.
Приклад
Об'єднаємо два масиви.
const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];
const combined = [...spreadableOne, ...spreadableTwo];
// масив combined буде складатися з наступних елементів[1, 2, 3, 4, 5, 6, 7, 8]
Видалення елементу зі скопійованого масиву без зміни первинного масиву.
const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];
// Масив mammals буде складатися з елементів ['squirrel', 'bear', 'deer', 'rat']
Object.spread
Оператор розширення дозволяє розповсюдити об'єкт, додавши нові властивості та їх значення. При цьому первинні об'єкти не змінюються (тобто створюються нові). Така властивість може бути особливо корисною для об'єднання об'єктів. Варто також подкреслити, що оператор розширення не копіює вкладені об'єкти.
Приклад
Створимо об'єкт та додамо йому нову властивість. Первинний об'єкт не змінюємо.
const spreadableObject = {
name: 'Robert',
phone: 'iPhone'
};
const newObject = {
...spreadableObject,
carModel: 'Volkswagen'
}
// об'єкт newObject матиме такі властивості
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }
Функції решти параметрів
Функції можуть використовувати синтаксис решти параметрів (function rest). Застосовується з метою прийняття аргументів функції як масив.
Приклад
Виведемо масив переданих функції аргументів.
function displayArgumentsArray(...theArguments) {
console.log(theArguments);
}
displayArgumentsArray('hi', 'there', 'bud');
// Буде роздруковано['hi', 'there', 'bud']
Object.freeze()
Метод перешкоджає зміні наявних властивостей або додаванню нових властивостей об'єкту. За своїми властивостями .freeze() дуже схожий на звичний усім кваліфікатор const. Але const, на противагу, дозволяє модифікувати об'єкт.
Приклад
«Заморожуємо» об'єкт, щоб заборонити зміну властивості name.
const frozenObject = {
name: 'Robert'
}
Object.freeze(frozenObject);
frozenObject.name = 'Henry';
// frozenObject має первинне значення{ name: 'Robert' }
Object.seal()
Метод забороняє додавати нові властивості об'єктам, але наявні властивості можуть бути змінені.
Приклад
Заблокуємо об'єкт, щоб запобігти додаванню властивості wearsWatch.
const sealedObject = {
name: 'Robert'
}
Object.seal(sealedObject);
sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject приймає значення { name: 'Bob' }
Object.assign()
Метод дозволяє об'єднувати об'єкти. Насправді, він не є необхідним, тому що альтернативою є вже описаний оператор розширення. Варто помітити, що, подібно до оператора розширення, Object.assign() не виконує глибокого клонування об'єктів. Якщо ж глибокого клонування не уникнути, варто звернутися до готового інструменту — бібліотеки Lodash.
Приклад
Об'єднаємо два об'єкти в один.
const firstObject = {
firstName: 'Robert'
}
const secondObject = {
lastName: 'Cooper'
}
const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject буде мати такий вигляд{ firstName: 'Robert', lastName: 'Cooper' }
Ще немає коментарів