В JavaScript есть несколько удобных методов работы с массивами, которые я довольно часто использовал в первые четыре недели моего буткемпа по программированию. Я ни в коем случае не эксперт, но в этом посте я сделаю все возможное, чтобы упростить и объяснить некоторые из методов, которые я изучил до сих пор.
Давайте начнем с того, что такое массив! Массив — это объект, который позволяет хранить несколько элементов, которые могут состоять из нескольких разных типов данных, под одним именем переменной. Вы можете распознать массив в JavaScript, увидев группу данных, заключенную в квадратные скобки [ ]. Ниже приведен пример массива:
const myArray = [true, 21, dog, “string”]
Важно понимать, как индекс работает с массивами. Каждый массив начинается с индекса [0] и продолжается до любого количества элементов в массиве. В приведенном выше примере true будет иметь индекс [0], 21 будет иметь индекс [1], dog будет иметь индекс [2], а «string» будет иметь индекс [3]. Теперь давайте рассмотрим некоторые из этих методов!
Массив.длина()
В этом методе array.length() возвращает количество элементов внутри массива. Вот пример ниже:
const myArray = [true, 21, dog, “string”] console.log(myArray.length); //output: 4
Массив.push()
Метод push позволяет добавить элемент или количество элементов в конец массива. Однако метод является деструктивным,поэтому он изменит исходный массив. Давайте добавим еще один фрукт в этот массив!
const fruit = [ “apple”, “orange”, “banana”]; //add “mango” to the array fruit.push(“mango”) console.log(fruit); //output: [ “apple”, “orange”, “banana”, “mango”]
Массив.pop()
Метод pop позволяет удалить один элемент из конца массива. Я буду использовать тот же массив из примера выше, чтобы удалить последний элемент, «банан».
const fruit = [ “apple”, “orange”, “banana”]; fruit.pop(); console.log(fruit) //output: [ “apple”, “orange”]
Как и push, метод pop является деструктивным, потому что он изменяет исходный массив, удаляя элемент.
Массив.shift()
Метод сдвига — еще один деструктивный метод, удаляющий первый элемент массива. В этом примере мы возьмем наш массив фруктов и используем сдвиг, чтобы удалить первый элемент «яблоко».
const fruit = [ “apple”, “orange”, “banana”]; fruit.shift(); console.log(fruit) //output: [“orange”, “banana”]
Массив.unshift()
Метод unshift добавит один или несколько элементов в начало массива. Это еще один деструктивный метод, означающий, что он вносит изменения в исходный массив. Здесь мы собираемся добавить два новых фрукта, киви и клубнику, в начало нашего массива фруктов.
const fruit = [ “apple”, “orange”, “banana”]; fruit.unshift(“kiwi”, “strawberry”); //output: [ “kiwi”, “strawberry”, “apple”, “orange”, “banana”]
Массив.срез()
Здесь мы приступим к неразрушающему методу, который не изменяет исходный массив, а возвращает его новую поверхностную копию. Срез можно использовать для возврата копии массива. Для этого вы не передаете никаких аргументов в скобках при вызове.
const fruit = [ “apple”, “orange”, “banana”]; const fruitCopy = fruit.slice(); console.log(fruitCopy) //output: [ “apple”, “orange”, “banana”]
Другое использование среза заключается в том, что мы можем скопировать определенную часть массива. Мы делаем это, помещая пару аргументов в круглые скобки после среза. Первый аргумент — это начальная точка того, что мы хотим скопировать, а второй аргумент — это индекс конечного элемента. Если вы не укажете конечный индекс, срез закончится на самом последнем элементе массива. Ниже приведен пример использования фрагмента:
const animals = [“dog”, “cat”, “bird”, “turtle”]; let newAnimalArray = animals.slice(1, 3); //output: [“cat”, “bird”]
Массив.сращивание()
Этот метод является деструктивным и может использоваться для добавления, обновления и/или удаления элементов массива. Splice может сбивать с толку, поэтому взгляните на его синтаксис:
array.splice(start, deleteCount, item1, item2…)
-Начало — это индекс массива, с которого мы начнем изменять массив.
-deleteCount указывает, сколько элементов будет удалено.
-item1 и item2 — это элементы, которые будут добавлены в массив. Будет добавлен в начальный индекс, который вы выбрали ранее в качестве аргумента.
Вот сплайсинг в действии с использованием массива животных из предыдущего примера:
const animals = [“dog”, “cat”, “bird”, “turtle”]; animals.splice(0, 2, “hippo”) console.log(animals) //output: [“hippo”, “bird”, “turtle”]
В примере мы начали индекс с 0, который является первым элементом «собака». Затем мы вводим 2 для счетчика удаления, который удаляет два элемента, «собака» и «кошка». Наконец, мы вводим «бегемотик», который будет вставлен вместо элементов, которые мы удалили!
Это всего лишь несколько доступных нам методов массива! Если у вас есть какие-либо вопросы или вы хотите, чтобы я рассказал о любых других методах, пожалуйста, дайте мне знать!
Спасибо за прочтение!
Ресурсы:
Массив — javascript: MDN. JavaScript | МДН. (н.д.). Получено 17 сентября 2022 г. с https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array.
Методы массива JavaScript. (н.д.). Получено 17 сентября 2022 г. с https://www.w3schools.com/js/js_array_methods.asp.
