Массивы

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Массивы очень похожи на нумерованные списки.

Как пишется

Секция статьи "Как пишется"

Создадим массив с помощью квадратных скобок [].

К примеру, можно создать пустой массив:

        
          
          const guestList = [] // 😭 гостей нет
          const guestList = [] // 😭 гостей нет

        
        
          
        
      

А можно создать сразу с элементами внутри:

        
          
          const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']
          const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']

        
        
          
        
      

Элементы могут быть разных типов:

        
          
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]// внутри массива могут быть другие массивы:const arrayOfArrays = [  'Россия',  ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'],  [true, true, false, true]]
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]

// внутри массива могут быть другие массивы:
const arrayOfArrays = [
  'Россия',
  ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'],
  [true, true, false, true]
]

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Массивы хранят элементы в пронумерованных «ячейках». Нумерация начинается с нуля. Первый элемент массива будет иметь номер 0, второй — 1 и так далее. Номера называют индексами.

Количество доступных ячеек называют размером или длиной массива. В JavaScript длина массива обычно совпадает с количеством элементов в нем. Массивы хранят свой размер в свойстве length:

        
          
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]console.log(infoArray.length)// 5
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]
console.log(infoArray.length)
// 5

        
        
          
        
      

💡 Чтение

Секция статьи "💡 Чтение"

Обратись к конкретному индексу, чтобы получить содержимое ячейки с этим номером. Если ячейка пустая или такой ячейки нет, то JavaScript вернёт undefined:

        
          
          const guestList = ['Маша', 'Леонард', 'Шелдон', 'Джон Сноу']const firstGuest = guestList[0]console.log(firstGuest)// Машаconsole.log(guestList[3])// Джон Сноуconsole.log(guestList[999])// undefined
          const guestList = ['Маша', 'Леонард', 'Шелдон', 'Джон Сноу']

const firstGuest = guestList[0]
console.log(firstGuest)
// Маша

console.log(guestList[3])
// Джон Сноу

console.log(guestList[999])
// undefined

        
        
          
        
      

💡 Запись

Секция статьи "💡 Запись"

Используй комбинацию чтения и оператора присваивания:

        
          
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]console.log(episodesPerSeasons[5])// 9// запись в ячейку с индексом 5:episodesPerSeasons[5] = 10console.log(episodesPerSeasons[5])// 10
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]

console.log(episodesPerSeasons[5])
// 9

// запись в ячейку с индексом 5:
episodesPerSeasons[5] = 10
console.log(episodesPerSeasons[5])
// 10

        
        
          
        
      

💡 Добавление элементов

Секция статьи "💡 Добавление элементов"

Частая операция. Используй методы:

  • push — для добавления в конец массива
  • unshift — для добавления в начало массива

Лучше использовать push, он работает быстрее. Оба принимают произвольное количество аргументов. Все аргументы будут добавлены в массив. Методы возвращают размер массива после вставки:

        
          
          const watched = ['Властелин Колец', 'Гарри Поттер']// добавляем в конецwatched.push('Зеленая Книга')console.log(watched)// ['Властелин Колец', 'Гарри Поттер', 'Зеленая книга']let newLength = watched.push('Мстители', 'Король Лев')console.log(newLength)// 5// добавляем в началоnewLength = watched.unshift('Грязные танцы')console.log(newLength)// 6console.log(watched)// ['Грязные танцы', 'Властелин Колец', 'Гарри Поттер', 'Зеленая книга', 'Мстители', "Король Лев']
          const watched = ['Властелин Колец', 'Гарри Поттер']

// добавляем в конец
watched.push('Зеленая Книга')
console.log(watched)
// ['Властелин Колец', 'Гарри Поттер', 'Зеленая книга']

let newLength = watched.push('Мстители', 'Король Лев')
console.log(newLength)
// 5

// добавляем в начало
newLength = watched.unshift('Грязные танцы')
console.log(newLength)
// 6
console.log(watched)
// ['Грязные танцы', 'Властелин Колец', 'Гарри Поттер', 'Зеленая книга', 'Мстители', "Король Лев']

        
        
          
        
      

💡 Создать большой массив из чисел

Секция статьи "💡 Создать большой массив из чисел"

С помощью цикла и метода push можно быстро создать большой массив с числами.

Создадим массив чисел от 1 до 1000:

        
          
          const numbers = []for (let i = 1; i <= 1000; ++i) {  numbers.push(i)}
          const numbers = []
for (let i = 1; i <= 1000; ++i) {
  numbers.push(i)
}

        
        
          
        
      

Создадим массив чётных чисел от 0 до 1000:

        
          
          const evenNumbers = []for (let i = 0; i <= 1000; i += 2) {  evenNumbers.push(i)}
          const evenNumbers = []
for (let i = 0; i <= 1000; i += 2) {
  evenNumbers.push(i)
}

        
        
          
        
      

💡 Поиск по массиву

Секция статьи "💡 Поиск по массиву"

Используй indexOf, чтобы найти, под каким индексом хранится элемент.

Используйте includes, чтобы проверить, что элемент есть в массиве:

        
          
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]console.log(episodesPerSeasons.includes(8))// falseconsole.log(episodesPerSeasons.includes(6))// true
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]

console.log(episodesPerSeasons.includes(8))
// false
console.log(episodesPerSeasons.includes(6))
// true

        
        
          
        
      

На практике

Секция статьи "На практике"

Николай Лопин

Секция статьи "Николай Лопин"

🛠 Копирование массива

Секция статьи "🛠 Копирование массива"

С копированием есть хитрость. Массив — большая структура, и она не вмещается в одну переменную. Переменная хранит адрес, где находится массив. Если этого не знать, то результат такого кода будет выглядеть странно:

        
          
          const iWatched = ['GameOfThrones', 'Breaking Bad']const vitalikWatched = iWatchedvitalikWatched.push('American Gods')console.log(iWatched)// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 🤷‍♂️
          const iWatched = ['GameOfThrones', 'Breaking Bad']
const vitalikWatched = iWatched

vitalikWatched.push('American Gods')
console.log(iWatched)
// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 🤷‍♂️

        
        
          
        
      

Хитрость в том, что во второй строке происходит копирование адреса, где находится массив, а не самого массива. В итоге получаем ситуацию, когда две переменные iWatched и vitalikWatched работают с одним массивом, так как хранят один адрес. Это особенность работы со значениями, которые хранятся по ссылке.

Копия массива создаётся с помощью метода slice. Нужно вызвать его без аргументов и сохранить результат в новую переменную:

        
          
          const iWatched = ['GameOfThrones', 'Breaking Bad']const vitalikWatched = iWatched.slice()vitalikWatched.push('American Gods')console.log(iWatched)// ['GameOfThrones', 'Breaking Bad'] 👍console.log(vitalikWatched)// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 💪
          const iWatched = ['GameOfThrones', 'Breaking Bad']
const vitalikWatched = iWatched.slice()

vitalikWatched.push('American Gods')
console.log(iWatched)
// ['GameOfThrones', 'Breaking Bad'] 👍
console.log(vitalikWatched)
// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 💪

        
        
          
        
      

🛠 Деструктуризация массива

Секция статьи "🛠 Деструктуризация массива"

В современном JavaScript очень популярна деструктуризация массивов. Этот подход позволяет создавать переменные из элементов массива в одну строку:

        
          
          const catProfile = [  'Maru',  'Scottish Fold',  true,  'https://youtu.be/ChignoxJHXc']
          const catProfile = [
  'Maru',
  'Scottish Fold',
  true,
  'https://youtu.be/ChignoxJHXc'
]

        
        
          
        
      

В старом подходе, если из массива нужна пара значений, то их читают и сохраняют в переменные:

        
          
          const catName = catProfile[0]const catBreed = catProfile[1]
          const catName = catProfile[0]
const catBreed = catProfile[1]

        
        
          
        
      

Новый подход делает то же самое, но короче:

        
          
          const [name, breed] = catProfileconsole.log(name)// Maru
          const [name, breed] = catProfile
console.log(name)
// Maru