Рубрики
Без рубрики

Все массивы JavaScript и методы массива!

Соглашение Введение Что такое массивы? Как мы создаем массивы? Методы BASI … Tagged с JavaScript, алгоритмами, новичками, Codenewbie.

Оглавление

  • Введение
  • Что такое массивы?
  • Как мы создаем массивы?
  • Методы
    • Основные методы : pop, push, shift, unshift, splice, slice
    • Расширенные методы : уменьшить, сортировать, сорвать, фильтр, присоединиться, карта, находить, foreach
    • Веселые методы : ToString, включает, заполнить, индекс, FindIndex
  • Вывод
  • Ресурсы

Введение

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

Прежде чем уйти, если вы заинтересованы в изучении большего количества структур данных и хотите еще один ресурс для алгоритмов, ознакомьтесь с серией Меган Ло и я сотрудничаем! Серия будет сосредоточена на структурах данных и алгоритмах, и наш первый пост охватывает кроссовер струн и массивов. Если вам нужен освежитель на струнах, посмотрите ее пост здесь, в противном случае посетите наш коллаб и следите за обновлениями!

Без лишних слов давайте погрузимся в чудесный мир массивов!

П.с. Поскольку это очень длинный пост, не стесняйтесь пропускать, как вам нравится 😉

Что такое массивы?

Согласно MDN, массивы JavaScript являются «списками, похожими на объекты, прототип которых имеет методы для выполнения операций по переселению и мутации». Другими словами, массивы организуют свои элементы последовательно и имеют встроенные методы, которые позволяют легко искать и добавлять/удалять информацию на основе ее положения. Массивные позиции, также известные как индексы, начинаются с нуля.

Забавный факт : В отличие от не подписанных языков, таких как Java, C или C ++, JavaScript (как сценарий) не имеет статических массивов, где вам нужно заранее указать, сколько элементов вы планируете хранить, потому что у них фиксированный размер. Вместо этого массивы JavaScript динамичны, что означает, что размер его будет расти или уменьшаться по мере необходимости.

Забавный факт : Массивы – особый тип объекта! Тем не менее, свойства объекта массива хранятся отдельными от его элементов, и методы, которые вы бы использовали в элементах массива, не могут использоваться на свойствах объекта. Чтобы установить или получить доступ к коллекции свойств объекта массива, вам необходимо использовать скобки или точечные обозначения.

console.log(typeof new Array()) // "object"
console.log(typeof [1, 2, 3]) // "object"

Что нужно иметь в виду:

  • Массивы имеют быстрый поиск времени O (1), потому что вы можете просто получить элемент на основе данного индекса, независимо от того, насколько велик размер массива.
  • Настало время дорого, чтобы вставить или удалить из массива, потому что это требует, чтобы другие элементы были «отскакивают», чтобы освободить место или заполнить пробел.

Как мы создаем массивы?

По сути, есть два способа создать массив:

  • С буквальным
let literalEmptyArray = []
let literalFilledArray = [1, 2, 3]
  • С новым конструктором
let constructorEmptyArray = new Array()
let constructorFilledArray = new Array(1, 2, 3)

Тем не менее, третий способ создать массив – это из Метод! По сути из Метод создает новый экземпляр массива из передачи в количестве аргументов, независимо от числа или типа аргументов. Разница между из Метод и Массив Конструктор – это то, что они делают с аргументами; Array.of (7) Создает массив с одним элементом 7, тогда как Массив (7) Создает пустой массив с свойством длины 7 (Примечание: это подразумевает массив из 7 пустых слотов, а не слоты с фактическими неопределенными значениями)

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

Методы

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

  • Разрушительный : Действие мутирует исходный массив, что означает, что, как только вы выполните действие на оригинальном массиве, вы не сможете снова получить информацию оригинала. Скорее, оригинал стал обновленным.
  • Неразрушающий : Действие не мутирует исходный массив, что означает, что, как только вы выполните действие на оригинальном массиве, у вас будет информация оригинала. Поэтому вы сможете получить как оригинальную, так и обновленную информацию.

Понимание и осознание того, когда метод является разрушительным по сравнению с неразрушающим, важен, когда вам в конечном итоге нужно будет решить, какой метод использовать. Теперь давайте посмотрим на некоторые основные, продвинутые и забавные методы!

Основные методы

Методы, которые мы будем освещать: поп , толкать , Сдвиг , без устранения , сплайс и Среза Анкет Чтобы продемонстрировать каждый метод, базовый массив Мы будем ссылаться на:

let iceCream = ["vanilla", "chocolate", "strawberry", "green tea"]

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

Если вы не можете увидеть изображение ниже, вот краткое изложение методов:

  • push : Добавьте элемент в конце массива
  • поп : Удалите элемент с конца массива
  • без устранения : Добавьте элемент в начало массива
  • Сдвиг : Удалить предмет с начала массива

Другими распространенными случаями являются копирование или удаление секции массива. Хотя у них есть похожие имена, эти методы сплайс и ломтик И важно помнить, хотите ли вы, чтобы действие было разрушительным или неразрушающим.

сплайс: Удалить элемент по позиции индекса (разрушительный)

При использовании сплайс Вы должны пройти в каком индексе, из которого вы хотите начать удаление предметов (включительно). При желании вы можете включить второй индекс аргументов, чтобы сказать, откуда вы хотите прекратить удаление элементов (включительно), однако, если вы не сможете автоматически удалять до конца. Кроме того, начиная с третьего аргумента, любой, который вы включаете, будут элементами, добавленными в массив, начиная с начала (первый аргумент). Если вы не указываете никаких элементов, сплайс Удалит только элементы из массива. Тем не менее, если никаких аргументов вообще не передается, возвращаемое значение будет пустым массивом.

// general
Array.splice(startIndex)

// including the optional parameters
Array.splice(startIndex, endIndex, newElement)

Не забудьте оригинальный массив для следующего примера!

ломтик: Скопируйте массив (неразрушающий)

Если вы просто хотите сделать копию массива, вам не нужно передавать ни в каких аргументах. Тем не менее, у вас есть возможность включить начальный индекс (включительно) и окончательный индекс (не включающий) для копирования. Этот метод часто используется по сравнению с сплайс Потому что это избегает «побочного эффекта» мутирования исходного массива.

Если вы не проходите ни в каких аргументах, по умолчанию будет скопирован весь оригинальный массив. Если либо индекс отрицательный, он извлекает, запускающееся с конечного или последнего элемента ( array.length – index). С другой стороны, если аргументы, в которых вы проходите, больше, чем фактический массив (например, массив с 5 элементами, но передает аргументы, чтобы начать с 10 и конец в 50), возвращаемое значение будет пустым массивом.

// general
Array.slice()

// including the optional parameters
Array.slice(startIndex, endIndex)

Не забудьте оригинальный массив для следующего примера!

Продвинутые методы

Методы, которые мы будем освещать в этом разделе: уменьшить , сортировка , конг , квартира , фильтр , присоединиться , карта , Найти , а также foreach Анкет Прежде чем продолжить, важно знать, что многие из методов имеют одинаковые параметры; В этом случае фильтр , карта , Найти и foreach Анкет Вместо того, чтобы повторять его каждый раз, я оставлю объяснение параметров здесь, чтобы вы могли ссылаться!

Есть три аргумента, которые вы можете передать в функцию обратного вызова, два из них являются необязательными. Единственный аргумент, который вы должны пройти, – это текущее значение, которое представляет обработанную текущую элемент. Два других аргумента являются индексом текущего элемента и массива, который был вызван методом. Помимо функции обратного вызова, вы также можете использовать thisarg параметр, который является значением для использования как это При выполнении обратного вызова. Однако, если обратный вызов использует функцию стрелки, thisarg может быть опущено, потому что все функции стрелки лексически связывают это ценность.

уменьшить: уменьшить до единого значения (разрушительное)

По сути, метод уменьшения принимает функцию обратного вызова, которая выполняет обратный вызов на каждом элементе массива, что приводит к одному выводному значению. Функция обратного вызова (REDUCER), которую вы предоставляете, должна быть, по крайней мере, включать два параметра: аккумулятор и текущее значение. Аккумулятор накапливает возвратные значения обратного вызова; Другими словами, это накопленное значение, ранее возвращаемое при последнем вызове обратного вызова на руке, текущее значение – это значение, которое в настоящее время обрабатывается в массиве.

Необязательно, метод уменьшения может принять второй аргумент, который будет представлять начало. Это значение – то, что аккумулятор начнется так, как если бы оно было передано. Кроме того, обратный вызов может принять другие параметры для индекса и массива, которые представляют индекс обрабатываемого текущего элемента, а массив был вызван методом уменьшения.

Array.reduce((accumulator, currentValue, index, array) => {
   // do something
   return accumulator + currentValue
})

Сортировать: Сортирует элементы (разрушительные)

При вызове этого метода на массиве он сортирует его на месте и вернет отсортированную версию. По умолчанию элементы будут отсортированы в восходящее заказ путем преобразования элементов в строки, а затем сравнить их точки кода Unicode. Важно знать, как они сортируются, потому что в цифровом виде 9 приходит до 80, но поскольку цифры преобразуются в строки, «80» предшествует «9» в порядке Unicode. Что -то важное, чтобы отметить, все неопределенные элементы отсортированы до конца массива.

При желании, и если вы хотите быть более конкретным в том, как сортировать (то есть для целых чисел), вы можете пройти функцию обратного вызова (сравните), которая сравнивает два аргумента; Первый и второй элемент, часто называемый A и беременный , друг другу. Под капотом, если функция обратного вызова возвращается:

  • меньше 0 , это означает, что текущий заказ верен; Первый элемент останется перед вторым элементом ( a все еще придет до b )
  • 0, это означает, что элементы равны друг другу; Порядок останется одинаковым по отношению друг к другу, но сортируется по всем различным элементам.
  • больше 0, это означает, что текущий заказ неверен; Второй элемент будет перед первым элементом ( b до a )
Array.sort()

// including the optional parameters
Array.sort((a, b) => a - b)

CONCAT: Merge Arrays (неразрушающие)

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

Забавный факт : concat копирует ссылки на объект оригинала в новый массив, чтобы как исходный, так и новый массив относятся к одному и тому же объекту! Следовательно, если измененный объект изменен, изменения видны как для новых, так и для исходных массивов.

Array1.concat(Array2)

плоский: Создает новый массив с соединенными элементами, связанными с ним (неразрушающим)

Строительство от concat Метод, квартира Метод создает новый массив со всеми элементами суб-ассортиментов, объединенных в него, рекурсивно до указанной глубины. Для одного уровня массива это выполняет то же самое, что и уменьшить Метод, призывающий к concat Метод на его аккумуляторе. С другой стороны, чтобы включить сглаживание глубокого уровня без плоского метода, вы можете использовать рекурсию с уменьшением и CONCAT.

Хотя это и не требуется, вы можете при желании передать аргумент, который указывает, насколько глубоко вложенная структура массива должна быть сглажена. По умолчанию этот аргумент – 1, для одного уровня массива.

Array.flat()

// including the optional parameters
Array.flat(2)

Фильтр: возвращает все элементы, которые передают предоставленную тестовую функцию (неразрушающую)

Этот метод создает новый массив со всеми элементами, которые проходят функцию обратного вызова (тест). Когда он проверяет каждый элемент массива, который он вызывается, он возвращает значение, которое принуждает к истинному, чтобы сохранить элемент, или иначе false. Когда значение неверно, оно по существу пропускает элемент и не включает его в массив. Если ничто не пройдет тест, возвращается пустой массив. Для получения дополнительной информации о параметрах для этой функции перейдите к началу раздела «Расширенные методы»!

Array.filter(element => {
   // do something
   element > 6
})

Присоединяйтесь: Присоединяйтесь к всем элементам от массива к струне (неразрушающему)

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

Как уже упоминалось, в том числе аргумент для параметра сепаратора является необязательным, если вы хотите, чтобы элементы соединялись с запятой. Передача в пустой строке, поскольку аргумент приведет к тому, что элементы, соединенные без каких -либо символов/сепараторов. В противном случае, параметр – это то, что вы хотите разделить каждую пару смежных элементов массива для возвращенной строки. При необходимости сепаратор преобразуется в строку.

Array.join()

Карта: создает новый массив с результатами функции обратного вызова (неразрушающего)

карта принимает функцию обратного вызова, которая вызывается один раз для каждого элемента массива, которую он вызывается. Каждый раз, когда обратный вызов выполняется, он возвращает значение в новый массив, который возвращается в конце. Тем не менее, если вы не используете возвращенный (новый) массив и/или не возвращаете значение из обратного вызова, используя карта Метод считается анти-паттерном. Вместо этого вы должны использовать foreach метод или для петли. Для получения дополнительной информации о параметрах для этой функции перейдите к Начало Раздела «Расширенные методы»!

Array.filter(element => {
   // do something
   element * 2
})

найти: Вернуть значение первого элемента, который удовлетворяет предоставленной функции (неразрушающему)

Найти Метод возвращает только первое значение элемента, которое удовлетворяет функции обратного вызова (тест). Если элемент проходит тест, Найти Метод вернет неопределенным. Тем не менее, если вы хотите вернуть индекс элемента вместо его значения, вы можете использовать FindIndex метод вместо. Для получения дополнительной информации о параметрах для этой функции перейдите к Начало Раздела «Расширенные методы»!

Array.find(element => {
   // do something
   element > 6
})

Foreach: петля над массивом (неразрушающим)

Похоже на для петля, foreach Выполняет функцию обратного вызова один раз для каждого элемента в массиве. В то время как foreach Метод не будет мутировать массив, который он был вызван, возможно, чтобы функция обратного вызовов могла бы его мутировать. Тем не менее, foreach Метод ожидает синхронной функции, всегда возвращает неопределенную и не является цепной. Следовательно, типичный вариант использования состоит в том, чтобы выполнить побочные эффекты в конце цепи. Для получения дополнительной информации о параметрах для этой функции перейдите к Начало Раздела «Расширенные методы»!

Array.forEach(element => console.log(element))

Веселые методы

Теперь время для некоторых «веселых» методов! Методы, которые мы рассмотрим, здесь: Tostring , Включает , заполнить , Indexof и FindIndex Анкет

ToString: возвращает строку, представляющую массив и его элементы (неразрушающий)

Как его имя, Tostring Метод поворачивает элементы массива, он был вызван на строку. Чтобы быть более конкретным, этот метод соединяет массив и возвращает одну строку, содержащую каждый элемент массива, разделенный запятыми.

Забавный факт : JavaScript вызывает Tostring Метод автоматически, когда массив должен быть представлен в виде текстового значения или когда массив упоминается в строковой конкатенации.

Array.toString()

Включает в себя: возвращает логическое, если значение существует в массиве (неразрушающе)

Включает Определяет, включает ли массив определенное значение среди своих записей, возвращая True или False в зависимости от необходимости. Это происходит путем проверки каждого элемента на равенство со значением, а не с использованием функции обратного вызова тестирования. Тем не менее, если вам нужно найти, если какой -либо элемент удовлетворяет предоставленную функцию обратного вызова тестирования, вы можете использовать этот метод.

Аргумент, который вы должны пройти, – это значение, которое вы хотите, чтобы метод искал; Имейте в виду при сравнении строк и персонажей, Включает чувствителен к случаям. Необязательный второй аргумент – это индекс для начала поиска значения, а по умолчанию – ноль. Тем не менее, если индекс, который прошел, больше или равен длине массива, FALSE возвращается, а массив не будет искать. С другой стороны, если индекс отрицательный, метод использует его абсолютное значение в качестве количества элементов с конца массива, с которого можно начать поиск

Array.includes(searchValue)

Заполните: заполняет все элементы массива статическим значением (разрушительным)

заполнить Метод изменяет все элементы в массиве до статического значения, от начального индекса до конечного индекса. Затем он возвращает модифицированный массив с заполненными значениями.

Есть три параметра, однако требуется только первый. Первый аргумент, который вы должны пройти, – это значение для заполнения массива. Важно знать, что все элементы в массиве будут таким точным значением. Два других дополнительных параметров предназначены для индекса начала, по умолчанию равны нулю, а индекс END, по умолчанию – массив.

Array.fill(staticValue)

Индекс и FindIndex: найдите индекс элемента в массиве (неразрушающий)

Подобно друг другу в том, что оба возвращают первый индекс, который удовлетворяет условию. Однако, пока FindIndex основан на элементе, который удовлетворяет функции обратного вызова тестирования, Indexof Проверяет каждый элемент на равенство со значением. Кроме того, -1 возвращается индекс чего-либо Если элемент, который вы ищете, отсутствует, тогда как -1 возвращается FindIndex Если ничего не удовлетворяет обратный вызов. Тем не менее, если вам нужно найти, если какой -либо элемент удовлетворяет предоставленную функцию тестирования, вы можете использовать какой -то метод.

FindIndex имеет те же параметры, подробно описанные в Начало раздела передовых методов. С другой стороны, Indexof Принимает аргумент для поиска элемента и, необязательно, индекс для начала поиска. Если вы включите второй аргумент индекса для начала поиска, а индекс больше или равен длине массива, возвращается -1, что означает, что массив не будет искать.

Примечание :

Array.indexOf(searchValue)
Array.indexOf(searchValue, startIndex)

Array.findIndex(element => {
   // do something
   element === "cat"
})

Вывод

Поздравляю! Я объявляю вас «Мастером массива JavaScript и (большинство) методов массива»!

Но если серьезно, это было много информации, и я надеюсь, что вы сможете обратиться к ней в будущем! Вот несколько ключевых выводов, а также напоминание о том, какие методы мы рассмотрели:

  • Массивы организуют свои элементы последовательно и имеют встроенные методы, которые позволяют легко искать и добавлять/удалять информацию в зависимости от ее положения.
  • JavaScript массивы являются специальным типом объекта, и, в отличие от не подписавших языков, являются динамическими
  • Для создания массивов вы можете использовать литерал, новый конструктор или метод
  • Кроме того, вы можете скопировать, объединять массивы и преобразовать строку в массив, используя оператор спреда
  • Основные методы о добавлении, удалении или копировании массива: поп , push , Сдвиг , без устранения , сплайс , ломтик
  • Расширенные методы чтобы слияние: уменьшить , конг , квартира , присоединиться
  • Расширенные методы Сделайте что -нибудь на основе обратного вызова: сортировка , фильтр , карта , найти , для каждого
  • Веселые методы которые связаны со значением или индексом: Включает , Indexof , FindIndex
  • Веселые методы Чтобы знать: Tostring , наполнять

Если вы сделали это до конца, большое спасибо за чтение, я надеюсь, что вы нашли это полезным! Я рекомендую проверить моего друга Меган, когда использовать эти струнные методы в JavaScript, для аналогичного поста по струнным методам. И не забывайте о моем сообщении о сотрудничестве с Меган, который охватывает кроссоверы между струнами и массивами!

Ресурсы

Оригинал: “https://dev.to/wlcreate/all-about-javascript-arrays-array-methods-3n9”

Читайте ещё по теме: