/ ↲
    Расширенный поиск

    JavaScript

    Массив

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

    1. Кратко
    2. Как пишется
    3. Как это понять
      1. 💡 Чтение
      2. 💡 Запись
      3. 💡 Добавление элементов
      4. 💡 Создать большой массив из чисел
      5. 💡 Поиск по массиву
    4. На практике
      1. nlopin
      2. 🛠 Копирование массива
      3. 🛠 Деструктуризация массива

    Кратко

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

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

    Как пишется

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

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

            
          
          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

    На практике

    nlopin

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

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

            
          
          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