Понимание массивов очень важно в первые дни изучения JavaScript. Они используются постоянно и способами, которые только усложняются по мере того, как вы учитесь и расширяете свой набор навыков. Так почему же, если я использовал их так часто, мне было так трудно запомнить какой-либо из наиболее распространенных инструментов работы с массивами? Было достаточно сложно просто запомнить их имена, не говоря уже о том, как они работают. Если бы только был универсальный набор инструментов, которые мне нужно было использовать чаще всего, с понятными объяснениями того, как их использовать…
Отказ от ответственности: я все еще учусь! Соответственно, это будет содержать чрезвычайно упрощенные объяснения, предназначенные только для предоставления быстрых ссылок и напоминаний о доступных вариантах. Для получения более подробной и точной информации я настоятельно рекомендую прочитать замечательную документацию на MDN.
.карта()
Что он делает: Изменяет все элементы и дает вам новый массив.
Это замечательно, когда вы хотите изменить каждый из элементов в массиве на что-то новое, оставив вам новый массив, который будет той же длины, что и оригинал.
Пример:
const initialArray = ["a", "b", "c"] const arrayAfterMap = initialArray.map(eachElement => eachElement.toUpperCase()) // arrayAfterMap = ["A", "B", "C"]
В этом примере каждый элемент проходит через эту функцию, которая преобразует строку в буквы верхнего регистра. Это довольно простое изменение, но .map() весьма мощное средство, особенно при работе с массивами объектов. Отдельные пары ключ/значение могут быть настроены внутри объекта, что обеспечивает большую гибкость в отношении того, какая карта позволит вам изменить.
.фильтр()
Что он делает: удаляет все элементы, которые не соответствуют определенному условию.
Это работает точно так, как следует из названия — он отфильтровывает все элементы, которые не соответствуют определенному условию, и оставить вам массив элементов, которые соответствуют этому условию.
Пример:
const initialArray = ["a", "b", "c"] const arrayAfterMap = initialArray.filter(eachElement => eachElement !== "b") // arrayAfterMap = ["a", "c"]
В этом примере фильтр проверяет, не является ли каждый элемент «b». Если все, что после стрелки верно для данного элемента, этот элемент будет в вашем новом массиве.
.для каждого()
Что он делает: Пропускает каждый элемент через функцию.
Поначалу это звучит похоже на .map(), но критическое отличие состоит в том, что .map() даст вам новый массив, а .forEach() не будет по умолчанию. Это ничего не вернет само по себе (в частности, оно вернет undefined), но данная функция в .forEach() вернет все, что она должна вернуть.
Пример:
const initialArray = ["a", "b", "c"] initialArray.forEach(eachElement => console.log(eachElement+"x")) // Console will display: // "ax" // "bx" // "cx"
В этом примере каждый элемент передается через функцию, которая делает две вещи: добавляет «x» к концу строки элемента и записывает новую строку в консоль.
.pop() против .push() против .shift() против .unshift()
Что они делают: добавляют/удаляют элемент в/из начала/конца массива.
Я сгруппировал их вместе, потому что все они ведут себя одинаково, но их может быть трудно запомнить. какой использовать. Я нашел этот блог Яфи Берхану, чтобы дать несколько полезных советов для запоминания различий. .push() добавляет элемент в конец массива
.shift() удаляет первый элемент массива
.unshift() добавляет элемент в начало массива
Пример:
const initialArray = ["a", "b", "c"]
initialArray.pop() // initialArray = ["a", "b"]
initialArray.push("c") // initialArray = ["a", "b", "c"]
initialArray.shift() // initialArray = ["b", "c"]
initialArray.unshift("a") //initialArray = ["a", "b", "c"]
Здесь важно отметить, что каждый из этих методов изменит исходный массив. В этих случаях мы не получаем новый массив, скорее наш исходный массив менялся на каждом отдельном шаге.
«…» он же Оператор спреда
Что он делает: отделяет каждый элемент массива, а также создает отдельную копию этих элементов.
Есть некоторые тонкие различия с оператором распространения, которые я все еще обдумываю. , так что давайте разберем это:
Отделение каждого элемента массива…
Если вы ссылаетесь на переменную, содержащую массив, без использования оператора расширения, вы ссылаетесь на весь массив. По сути, все, что находится в квадратных скобках, а также сами скобки.
Если, однако, вы ссылаетесь на эту переменную с помощью оператора расширения, вы в некотором смысле убираете эти внешние скобки и рассматриваете каждый отдельный элемент как отдельный объект. . По сути, разбивая массив на составные части.
…при этом также создается отдельная копия этих элементов.
Опять же, если вы ссылаетесь на переменную, содержащую массив, без использования оператора расширения, вы ссылаетесь на исходный массив, не делая новую копию. Если этот первоначальный массив изменится, ваша ссылка на него позже также будет изменена.
Если вы используете оператор распространения, вы фактически создаете «новые» данные. Если исходный массив изменится, ваши «новые» данные не изменятся.
Пример:
const initialArray = [1,2,3] const newArray = ["a", initialArray, "b"] const spreadArray = ["a", ...initialArray, "b"] console.log(initialArray) // [1, 2, 3] console.log(newArray) // ["a", [1, 2, 3], "b"] console.log(spreadArray) // ["a", 1, 2, 3, "b"] initialArray.pop() // removes the "3" from our initial array console.log(initialArray) // [1, 2] console.log(newArray) // ["a", [1, 2], "b"] console.log(spreadArray) // ["a", 1, 2, 3, "b"]
В этом примере newArray не использует оператор распространения. В результате в первом наборе журналов консоли мы получаем массив внутри массива. Затем, после того как initialArray изменен с помощью .pop(), мы видим во втором наборе журналов консоли, что в newArray теперь также отсутствует число 3, хотя мы не меняли содержимое newArray напрямую.
Напротив, , spadArray создается с помощью оператора распространения. Соответственно, в первом наборе логов консоли мы видим, что у нас есть один простой массив, который не содержит никаких внутренних массивов, потому что содержимое initialArray было «размазано» по отдельным элементам. Мы также видим во втором наборе журналов консоли, что на spreadArray вообще не повлияли изменения, которые произошли с initialArray, потому что оператор распространения не просто ссылается на initialArray, он создает копию его отдельных элементов.
