29 Мая 2018 JavaScript Перевод

Полезные методы массивов и объектов в JavaScript

img

Эти методы помогают разработчикам писать чистый и читаемый код. Многие из них уменьшают потребность в таких библиотеках, как Lodash.

Все методы в этой статье связаны друг с другом, это означает, что они могут использоваться в сочетании друг с другом, а также мутировать данные, что особенно важно при работе с React. Со всеми этими методами массивов и объектов вы обнаружите, что вам может больше не нужно использовать циклы for или while.

.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()

Этот метод часто упускают из виду, он использует накопитель для сокращения всех элементов в массиве до одного значения. Отлично подходит для расчёта итогов. Возвращаемое значение может быть любого типа (объект, массив, строка, целое число).

Пример

Сумма всех чисел в массиве:

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// total будет равен 30

В документации MDN существуют некоторые действительно интересные примеры использования reduce(). В ней приводятся примеры того, как делать сглаживание массива массивов, группировать объекты по свойству и удалять повторяющиеся элементы в массиве.

.forEach()

Применяет функцию для каждого элемента массива.

Пример

Выводит в консоль каждый элемент массива:

 const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// Will log the following:
// 'happy'
// 'sad'
// 'angry'

.some()

Проверяет, соответствует ли какой-либо элемент условию. Хорошим вариантом использования будет проверка прав пользователей. Его также можно использовать аналогично forEach(), где вы должны выполнить действие для каждого элемента массива и выйти из цикла после возвращения значения, удовлетворяющего условие.

Пример

Проверка, существует ли хотя бы одно значение равное «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(), но вместо того, чтобы искать по условию, он смотрит, содержит ли массив определённое значение.

Пример

Проверка, содержит ли массив элемент со значением `waldo`:

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo будет равен true

Array.from()

Это статический метод, который создаёт массив на основе другого массива или строки. Вы также можете передать функцию обратного вызова 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()

Возвращает массив значений объекта.

Пример

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()

Создаёт из объекта массив, содержащий вложенные массивы с парами ключ/значение.

Пример

const weather = {
 rain: 0,
 temperature: 24,
 humidity: 33,
}
 
const entries = Object.entries(weather);
// entries будет равен
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Spread оператор массива

Расширение массивов с помощью spread оператора (...) позволяет вам расширять элементы массива. Это полезно при объединении множества массивов. Также, это хороший способ избежать использования метода splice() при попытке удалить определённые элементы из массива, поскольку он может быть объединен с методом splice() для предотвращения прямой мутации массива.

Пример

Объединение двух массивов.

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']

Spread оператор объекта

Расширение объекта позволяет добавлять новые свойства и значения к нему без мутаций (т.е. создаётся новый объект). Также spread можно использовать для объединения нескольких объектов вместе. Следует отметить, что расширение объектов не выполняет вложенного копирования.

Пример

Добавление нового свойства и значения объекта без изменения исходного объекта:

const spreadableObject = {
 name: 'Robert',
 phone: 'iPhone'
};
 
const newObject = {
 ...spreadableObject,
 carModel: 'Volkswagen'
}
// newObject будет равен
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Rest параметр функций

Функции могут использовать синтаксис параметра rest, чтобы принимать любое количество аргументов в виде массива.

Пример

Отображение массива переданных аргументов:

function displayArgumentsArray(...theArguments) {
 console.log(theArguments);
}
 
displayArgumentsArray('hi', 'there', 'bud');
// будет выведено ['hi', 'there', 'bud']

Object.freeze()

Предотвращает изменение существующих свойств объекта или добавляет новые свойства и значения к нему. Часто, люди думают, что 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()

Позволяет объединять объекты. Этот метод больше не нужен, потому что вместо этого вы можете использовать spread оператор. Как и spread оператор, object.assign() не выполняет глубокое клонирование. Lodash – ваш лучший друг, когда дело доходит до вложенного клонирования объектов.

Пример

Объединение двух объектов в один:

const firstObject = {
 firstName: 'Robert'
}
 
const secondObject = {
 lastName: 'Cooper'
}
 
const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject будет равен { firstName: 'Robert', lastName: 'Cooper' }

Оригинал: Useful Javascript Array and Object Methods