Обзор массивов в Javascript

Массивы в Javascript — это простой одномерный способ хранения простых наборов данных. Массивы не уникальны, что означает, что они могут хранить дубликаты (в отличие от наборов). Они также следуют типичному наследованию прототипов, как и другие типы Javascript. Это просто означает, что все массивы наследуют определенный набор конкретных методов, таких как length, some(), every(), concat() и многие другие.

Создание массива Javascript

Самый простой способ создать массив — поместить элементы в квадратные скобки.

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

let myArray = [ 1, 2, 3, 4, 5, 6 ]

Хотя это распространенный способ определения массива, вы также можете использовать new Array():

let myArray = new Array(1, 2, 3, 4, 5, 6)

Выше мы определили простой массив из 6 элементов, это все числа от 1 до 6. Теперь мы сохранили наши данные в формате массива. Точно так же мы можем хранить строки или другие стандартные типы Javascript;

let myArray = [ 'hello', 'world' ]
let mySecondArray = [ (hi) => { console.log(hi) }, { some: "Object" }, 1, 2, 3, new Set([1, 2, 3, 4, 4]) ]

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]

Получение длины массива

Как упоминалось ранее, все массивы имеют стандартный набор методов, которые с ними работают.

Наиболее часто используется, пожалуй, lngth, который мы можем использовать для получения размера массива:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length; // Returns 5, since there are 5 items.

Доступ к свойствам в массиве

Массивы – это, по сути, объекты в Javascript, где каждый элемент индексируется числом. Таким образом, мы можем получить доступ к элементам массива с помощью метода obj[key], как и в объектах, где key всегда будет числом.

Как и в других языках, мы обычно начинаем считать с 0, поэтому первый элемент имеет индекс 0, а второй элемент имеет индекс 1. Чтобы получить доступ ко второму элементу, мы можем сделать следующее:< /сильный>

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray[1] // Returns 🍊

Получение последнего элемента массива

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

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length // Returns 5, since there are 5 items.
let getOrange = myArray[getArrayLength-1] // Returns 🍠

Еще один простой способ сделать это — использовать метод at:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray.at(-1) // Returns 🍠

Итерация по массиву

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

В приведенном ниже примере мы будем консольно регистрировать каждый элемент массива:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i = 0; i < myArray.length; ++i) {
    // Since i changes +1 every time, the below line will be run for every array item
    // Thus every array item will be console logged for us.
    console.log(myArray[i])
}

Вы также можете увидеть, что это написано так, что превращает i в сам элемент массива:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i of myArray) {
    console.log(i)
}

Еще один цикл, который может оказаться полезным, представлен в виде let i in myArray, который вместо возврата элемента массива возвращает ключ для этого элемента массива:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i in myArray) {
    console.log(myArray[i])
}

Преобразование строк в массивы

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

Представьте, что у нас есть все наши фрукты и овощи в строке, разделенной «-». Если мы применим к этой строке функцию split, мы получим массив:

let myString = "🍅-🍊-🥬-🍓-🍠";

// Returns [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let myArray = myString.split('-');

Управление существующими массивами

Поскольку массивы можно изменять после их создания, у нас есть ряд методов и операторов, доступных для их изменения.

Например, используя оператор с тремя точками, мы можем легко объединить два массива. :

let array1 = [ '🍅', '🍊' ]
let array2 = [ '🍅', '🍊' ]
let array3 = [ ...array1, ...array2 ] // [ '🍅', '🍊', '🍅', '🍊' ]

Чтобы добавить или удалить элементы с каждого конца массива, у нас есть 4 метода — push, pop, shift и unshift.

отправить

Мы также можем добавлять новые элементы в массив с помощью метода push, который добавляет один элемент в конец массива:

let array = [ '🍅', '🍊' ]
array.push('🥬')
console.log(array) [ '🍅', '🍊', '🥬' ]

поп

Если мы хотим вместо этого удалить последний элемент массива, мы можем использовать pop():

let array = [ '🍅', '🍊' ]
array.push('🥬')
array.pop()
console.log(array) // [ '🍅', '🍊', '🥬' ]

включить

Аналогично мы можем добавлять элементы в начало массива, используя unshift. Это медленнее, чем push, поскольку требует перемещения всего в одну сторону, а также вставки элемента.

let array = [ '🍅', '🍊' ]
array.unshift('🥬')
console.log(array) [ '🥬', '🍅', '🍊' ]

сдвиг

Если unshift означает push, то pop означает shift — мы можем использовать shift для удаления первого элемента массива:

let array = [ '🍅', '🍊' ]
array.shift()
console.log(array) [ '🍊' ]

Заключение

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

Хотя они могут показаться сложными, важно помнить следующее:

• Массивы JavaScript можно определить с помощью квадратных скобок [] или new Array()
• Массивы могут содержать любые стандартные типы Javascript, например функции, объекты или наборы.
• Массивы по сути являются объектами: каждому элементу массива присваивается нумерованный индекс, позволяющий нам обращаться к нему с помощью нотации obj[key]
• Массивы повторяемы, то есть их можно повторять в циклах for.
• Массивы имеют ряд стандартных методов и свойств, например - split(), concat(), some(), < code>pop(), shift() и длина.

Также опубликовано здесь