Я слушал отличный подкаст Syntax FM, в котором обобщены полезные массивы JavaScript и методы объектов. Эти методы помогают разработчикам писать чистый и читаемый код. Многие из этих методов уменьшают потребность в использовании служебных библиотек, таких как Lodash.

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

.filter()

Создает новый массив в зависимости от того, соответствуют ли элементы массива определенному условию.

Пример

Создайте набор возрастов учащихся, соответствующих возрасту, установленному законом для употребления алкоголя.

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink will be equal to [19, 21]

.map()

Создает новый массив, манипулируя значениями в другом массиве. Отлично подходит для обработки данных и часто используется в React, потому что это неизменяемый метод.

Пример

Создайте массив, который добавляет $ в начало каждого числа.

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// dollars will be equal to ['$2', '$3', '$4', '$5']

.reduce()

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

Пример

Сложите целые числа в массив.

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// total will be equal to 30

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

.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 will be equal to true

.every()

Аналогично .some(), но проверяет, все ли элементы в массиве соответствуют условию.

Пример

Проверьте, все ли рейтинги равны или превышают 3 звезды.

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// goodOverallRating will be equal to true

.includes()

Проверяет, содержит ли массив определенное значение. Он похож на .some(), но вместо поиска условия, которое нужно передать, он проверяет, содержит ли массив определенное значение.

Пример

Проверьте, есть ли в массиве элемент со строкой ‘waldo’.

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo will be equal to true

Array.from()

Это статический метод, который создает массив на основе другого массива или строки. Вы также можете передать функцию обратного вызова map в качестве аргумента для дальнейшего формирования данных в новом массиве. Честно говоря, я не совсем понимаю, зачем кому-то использовать это вместо .map() метода.

Пример

Создайте массив из строки.

const newArray = Array.from('hello');
// newArray will be equal to ['h', 'e', 'l', 'l', 'o']

Создайте массив, который имеет удвоенное значение для каждого элемента в другом массиве.

const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues will be equal to [4, 8, 12]

Object.values()

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

Пример

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);
// colors will be equal to ["brown", "white", "red"]

Object.keys()

Вернуть массив ключей объекта.

Пример

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);
// types will be equal to ["chocolate", "vanilla", "strawberry"]

Object.entries()

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

Пример

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// entries will be equal to
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Распространение массива

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

Пример

Объедините два массива.

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];

const combined = [...spreadableOne, ...spreadableTwo];
// combined will be equal to [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 will be equal to ['squirrel', 'bear', 'deer', 'rat']

Распространение объекта

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

Пример

Добавьте новое свойство и значение объекта, не изменяя исходный объект.

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}
// newObject will be equal to
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Функциональный отдых

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

Пример

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

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');
// Will print ['hi', 'there', 'bud']

Object.freeze()

Запрещает вам изменять существующие свойства объекта или добавлять новые свойства и значения к объекту. Часто люди думают, что const делает, однако const позволяет изменять объект.

Пример

Закрепите объект, чтобы предотвратить изменение свойства name.

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';
// frozenObject will be equal to { name: 'Robert' }

Object.seal()

Останавливает добавление любых новых свойств к объекту, но позволяет изменять существующие свойства.

Пример

Запечатайте объект, чтобы предотвратить добавление свойства wearsWatch.

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject will be equal to { name: 'Bob' }

Object.assign()

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

Пример

Соедините два объекта в один.

const firstObject = {
  firstName: 'Robert'
}

const secondObject = {
  lastName: 'Cooper'
}

const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject will be equal to { firstName: 'Robert', lastName: 'Cooper' }

Если вы нашли эту статью интересной и вас интересует разработка интерфейса, подпишитесь на меня в Twitter, Github или LinkedIn. .

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .