Массивы в JavaScript

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

Определение

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

Массив — это структура данных, в которой хранится коллекция элементов, каждый из которых доступен по индексу. Во многих языках программирования массивы хранят элементы в смежных местах памяти. В JavaScript массивы — это высокоуровневые объекты, похожие на списки, используемые для хранения нескольких значений в одной переменной. Они имеют нулевой индекс, то есть первый элемент имеет индекс 0.

Массивы в JavaScript

Поскольку JavaScript является динамически типизированным языком, массивы могут содержать элементы разных типов. Массив может содержать числа, строки, логические значения, объекты и даже другие массивы. Это отличается от статически типизированных языков, таких как Java или C, где массивы обычно однородны и должны содержать элементы одного и того же типа данных.

Зачем использовать массив?

Массивы помогают эффективно управлять данными, позволяя хранить значения, получать к ним доступ и манипулировать ими. Они используются для всего, что связано со списками или коллекциями, например для управления товарами в корзине электронной коммерции или для отслеживания вводимых пользователем данных.

Как создать массив в JavaScript

Существует несколько способов создания массивов в JavaScript, я рассмотрю некоторые из них:

1. Использование литералов массива []

В JavaScript вы можете просто создать массив, присвоив [] переменной или константе

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Обратите внимание, что элементы массива разделяются запятой ,

2. Использование конструктора массива

Вы также можете создать массив как экземпляр собственного конструктора массива JavaScript, используя следующий синтаксис:
const myArray = новый массив()
Конструктор Array принимает один или несколько аргументов (они должны быть числами) и ведет себя по-разному в зависимости от количества переданных вами аргументов!
Если вы передадите один аргумент: const myArray = new Array(4), это создаст новый массив с 4 пустыми элементами!

Если вы передаете более одного аргумента: const myArray = new Array(1, 2, 3), это создает массив из 3 чисел 1, 2 и 3 соответственно, и это аналогично записи const myArray = [1, 2] , 3]!

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

3. Использование метода Array.of

Массивы также можно создавать с помощью этого метода Array.of, и он просто создаст массив, содержащий все элементы, которые вы передаете ему в качестве аргументов. Разница между использованием Array.of и конструктором Array заключается в том, как они ведут себя, когда получают один аргумент!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Обратите внимание, как ведет себя Array.of, когда он получает один параметр, в отличие от конструктора Array, который просто создает массив из n пустых элементов, Array.of просто создает массив с одним элементом, который вы передали!

4. Использование метода Array.from

Вы также можете использовать метод Array.from(iterable), который получает один аргумент, который также должен быть итерируемым, и создает из него массив! Например, вы можете передать набор этому методу и создать массив из значений этого набора!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Манипулирование массивами в JavaScript

Мы увидели, что такое массив и как создавать массивы в JavaScript. Оставшаяся проблема, которую вы, возможно, зададите себе, заключается в том, как мне использовать массивы и работать с ними?
Что ж, это хороший вопрос!

Традиционный способ работы с массивами в JavaScript

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

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  Использование современного синтаксиса метода массива JavaScript


JavaScript изначально поставляется со множеством методов массива (функций высшего порядка), они доступны для всех экземпляров массива через объект Array.prototype. Мы используем эти методы, предоставляемые JavaScript, для манипулирования и работы с данными, хранящимися в массивах! Мы даже можем создавать собственные методы массива (мы рассмотрим это в следующей главе)

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

Эти методы массива также делятся на две категории:


Мутация: Они перебирают массив и при применении функции обратного вызова также изменяют исходный массив!

Без мутации: Они перебирают массив и применяют функцию обратного вызова, но вместо изменения исходного массива возвращают новый массив

  
  
  1. метод forEach()


forEach() — это метод высшего порядка массива, используемый для циклического перебора элементов массива и применения функции обратного вызова к каждому элементу без изменения исходного массива или создания нового массива!

Синтаксис функций обратного вызова, который обычно является анонимной функцией (обычно один и тот же во всех других методах):

function (currentElement[, index, targetArray]) {}




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


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. метод карты()


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

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. метод фильтра()


Метод 
filter() используется, когда вы хотите отфильтровать массив, удалив ненужные элементы. Это неизменяемый метод, который возвращает новый массив!

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

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. метод уменьшения()


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

Синтаксис также отличается

Array.reduce(функция(аккумулятор, элемент[, индекс, targetArray]) [, начальное значение])

Этот метод принимает два аргумента: первый — это функция обратного вызова, как и другие методы, а второй — начальное значение переменной-аккумулятора. Этот второй аргумент является необязательным, если он не указан, сокращение будет использовать первый элемент массива в качестве начального значения аккумулятора

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

Попробуем найти сумму из массива чисел:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. метод среза()


slice() — еще один полезный метод массива в JavaScript, который используется для извлечения небольшой части массива! срез() создает новый массив, копируя часть существующего массива без изменения исходного массива.

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

Array.slice(startIndex, endIndex) startIndex представляет собой начальную точку извлечения и является инклюзивным, а endIndex представляет собой конечный элемент извлечения, он является необязательным и эксклюзивным. Если он не указан, методы среза копируют массив из startIndex в конец массива!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. метод splice()


splice() — это метод массива в JavaScript, который используется для добавления, удаления и замены элементов в массиве. splice() изменяет содержимое массива, добавляя, удаляя или заменяя элементы массива.

Синтаксис метода splice() следующий:

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

Это может показаться запутанным, но позвольте мне попытаться объяснить: 

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

elementsToRemove представляет количество элементов из индекса, которые вы хотите удалить из массива. Если вы хотите только добавлять новые элементы, вы можете указать 0 в этой позиции.

newElement1, newElement2 и т. д. Это может быть любое количество элементов, которые вы хотите добавить в свой массив, и они заменят элементы elementsToRemove, указанные вами в вашем массиве!

Много разговоров, давайте посмотрим на пример:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "ананас") это означает, что из индекса 1 удалить 1 элемент и добавить "ананас"

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

Fruit.splice(1, 0, "ананас") это добавит ананас после элемента с индексом 1 и не удалит какой-либо другой элемент из этого массива.


  
  
  Заключение


Массивы — это фундаментальная и универсальная функция JavaScript, предлагающая важную структуру для хранения коллекций данных и управления ими. От простого создания массива с использованием литералов до более сложных методов, таких как Array.of() и Array.from(), массивы JavaScript предоставляют целый ряд способов обработки различных типов данных. Освоив манипулирование массивами с помощью циклов или современных методов, таких как forEach(), map(), filter(), уменьшить(), срез() и splice(), вы сможете эффективно выполнять сложные операции. Понимание этих функций массивов является ключом к овладению JavaScript, что позволит вам писать более чистый, краткий и мощный код.