Перейти к основному содержимому

Массивы

@serverSerrverlesskiy

Для хранения упорядоченных коллекций существует особая структура данных, которая называется массив Array.

Storage

Массив - упорядоченная коллекция данных, в которой присутствуют 1-й, 2-й, 3-й элементы и т.д. Например, она понадобится нам для хранения списка чего-либо: пользователей, товаров, элементов сайта и т.д.

Видео

Создание

create

Существует два 2️⃣ варианта для создания пустого массива:

let arr = new Array(5)
// new Array(5) - создаёт массив без элементов (к которым просто так нельзя обратится), но с заданной длиной.
let arr = []

Практически всегда используется второй вариант 2️⃣ синтаксиса . В скобках мы можем указать начальные значения элементов:

Интерактивный редактор
Результат
Loading...

Элементы массива нумеруются, начиная с нуля 0️⃣ .

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

Интерактивный редактор
Результат
Loading...

Мы можем заменить элемент:

fruits[2] = 'Груша' // теперь ["Яблоко", "Апельсин", "Груша"]

…Или добавить новый к существующему массиву :

Интерактивный редактор
Результат
Loading...

length

Общее число элементов массива содержится в его свойстве .length:

Интерактивный редактор
Результат
Loading...

Свойство length автоматически обновляется при изменении массива. Если быть точными, это не количество элементов массива, а наибольший цифровой индекс плюс один.

Update

Например, единственный реальный элемент, имеющий большой индекс, даёт наибольшую возможную длину массиву :

Интерактивный редактор
Результат
Loading...

Обратите внимание, что обычно мы не используем массивы таким образом.

Ещё один интересный факт о свойстве length – его можно перезаписать.

Если мы вручную увеличим ➕ его, ничего интересного не произойдёт. Зато, если мы уменьшим➖ его, массив станет короче. Этот процесс необратим, как мы можем понять из примера :

Интерактивный редактор
Результат
Loading...

Таким образом, самый простой способ очистить массив – это arr.length = 0 .

Типы элементов

Storage

В массиве могут храниться элементы любого типа - число, булевое значение, строки, объекты или целые функции⚙️:

Например :

Интерактивный редактор
Результат
Loading...

Обратите внимание result1 = arr[3] содержить текст функции⚙️, а result2 = arr[3]() результат выполненной функции⚙️ - () мы её запускаем.

Методы push/pop

binarycode

Стек - вариант применения массивов как структуры данных.

Она поддерживает два 2️⃣ вида операций:

  • push добавляет ➕ элемент в конец.

Add

  • pop удаляет ➖ последний элемент.

Delete

Таким образом, новые элементы всегда добавляются или удаляются из "конца".

Примером стека обычно служит пирамидка: новые кольца кладутся наверх и берутся тоже сверху.

Очередь – один из самых распространённых вариантов применения массива. В области компьютерных ️ наук так называется упорядоченная коллекция элементов

Методы работы с концом массива:

push

Add to

Добавляет ➕ элемент в конец массива :

Интерактивный редактор
Результат
Loading...

pop

Delete

Удаляет ➖ последний элемент из массива и возвращает его :

Интерактивный редактор
Результат
Loading...

Методы работы с началом массива:

start

shift

Удаляет ➖ из массива первый и возвращает его:

delete

Интерактивный редактор
Результат
Loading...

unshift

Добавляет ➕ элемент в начало массива:

Plus

Интерактивный редактор
Результат
Loading...

Методы push и unshift могут добавлять ➕ сразу несколько элементов :

Интерактивный редактор
Результат
Loading...

Внутреннее устройство массива

cupboard

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

Массивы расширяют объекты, так как предусматривают специальные методы для работы с упорядоченными коллекциями данных, а также свойство length. Но в основе всё равно лежит объект.

Следует помнить, что в JavaScript массив является объектом и, следовательно, ведёт себя как объект.

Например, массив копируется по ссылке :

Интерактивный редактор
Результат
Loading...

Что действительно делает массивы особенными – это их внутреннее представление. Движок JavaScript старается хранить элементы массива в непрерывной области памяти, один за другим. Существуют и другие способы оптимизации, благодаря которым массивы работают очень быстро.

Но все они утратят эффективность, если мы перестанем работать с массивом как с "упорядоченной коллекцией данных" и начнём использовать его как обычный объект.

Например, технически мы можем сделать следующее:

let fruits = [] // создаём пустой массив

fruits[99999] = 5 // создаём свойство с избыточным индексом, намного превышающим необходимую длину массива

fruits.age = 25 // создаём свойство с произвольным именем

Это возможно, потому что в основе массива лежит объект. Мы можем присвоить ему любые свойства.

Варианты неправильного применения массива!
  • Добавление нечислового свойства (индекса test), например: arr.test = 5
  • Создание «дыр», например: добавление arr[0], затем arr[1000] (между ними ничего нет)
  • Заполнение массива в обратном порядке, например: arr[1000], arr[999] и т.д.

Массив следует считать особой структурой, позволяющей работать с упорядоченными данными. Если вам нужны произвольные ключи, вполне возможно, лучше подойдёт обычный объект {}.

Эффективность

Fast

Методы push/pop выполняются быстро, а методы shift/unshift – медленно.

Почему работать с концом массива быстрее, чем с его началом? Давайте посмотрим, что происходит во время выполнения:

fruits.shift() // удаляем первый элемент с начала

Просто взять и удалить элемент с номером 0 недостаточно. Нужно также заново пронумеровать остальные элементы.

Операция shift должна выполнить 3 действия:

  • Удалить элемент с индексом 0

Delete

  • Сдвинуть все элементы влево, заново пронумеровать их, заменив 1 на 0, 2 на 1 и т.д.

Move

  • Обновить свойство length

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

А что же с удалением pop? Ему не нужно ничего перемещать. Чтобы удалить элемент в конце массива, метод pop очищает индекс и уменьшает значение length. Остальные элементы остаются с теми же индексами.

fruits.pop() // удаляем один элемент с конца

Метод pop не требует перемещения. Именно поэтому он выполняется очень быстро.

Аналогично работает метод push.

Перебор элементов

Object

Одним из самых старых способов перебора элементов массива является цикл for( ) по цифровым индексам :

Интерактивный редактор
Результат
Loading...

Но для массивов возможен и другой вариант цикла, for..of :

Интерактивный редактор
Результат
Loading...

Цикл for..of не предоставляет доступа к номеру текущего элемента, только к его значению, но в большинстве случаев этого более чем достаточно, а также это короче.

Многомерные массивы

Matryoschka

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

Интерактивный редактор
Результат
Loading...

Итого

remember

Массив – это особый тип объекта, предназначенный для работы с упорядоченным набором элементов.

Объявление:

// квадратные скобки (обычно)
let arr = [item1, item2...]

// new Array (очень редко)
let arr = new Array(item1, item2...)

Вызов new Array(number) создаёт массив с заданной длиной, но без элементов.

Свойство length отражает длину массива.

Мы можем использовать массив как двустороннюю очередь, используя следующие операции:

  • push(...items) добавляет ➕ items в конец массива.
  • pop() удаляет ➖элемент в конце массива и возвращает его.
  • shift() удаляет ➖ элемент в начале массива и возвращает его.
  • unshift(...items) добавляет ➕ items в начало массива.

Чтобы перебрать элементы массива:

  • for (let i=0 i<arr.length i++) – работает быстрее всего, совместим со старыми браузерами.
  • for (let item of arr) – современный синтаксис только для значений элементов (к индексам нет доступа).
  • for (let i in arr) – никогда не используйте для массивов!

React Native

React Native предоставляет набор компонентов для представления списков данных. Как правило, вам нужно использовать либо FlatList, либо SectionList. Детальней с ними мы познакомимся позже, главное сейчас вам понять, что на вход они принимают массив, который рендерит на экране.

EnglishMoji!

Проблемы?

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Вопросы

Question

Массив – это ...

  1. Подвид объектов с "упорядоченной коллекцией данных"
  2. Внутренная функция
  3. Подвид объектов с "не упорядоченной коллекцией данных"

Пустой массив создается:

  1. let arr2 = { }
  2. let arr1 = [ ]
  3. let arr3 = ( )

Длину массива можно определить свойством:

  1. pop
  2. push
  3. length

В массиве могут храниться элементы:

  1. Любого типа
  2. Числовые
  3. Строковые

Добавление элемента в конце массива:

  1. push
  2. pop
  3. shift

Удаление элемента в начале массива:

  1. pop
  2. shift
  3. unshift

____ в массиве - это число, представляющее позицию любого заданного элемента в массиве.

  1. индекс
  2. длина
  3. функция

Какое значение следует поместить в квадратные скобки, чтобы получить первый элемент в массиве? \n myArray[]

  1. 0
  2. 1
  3. 2

Использование метода .pop() для массива будет ___ и ___ последний элемент массива.

  1. "удалять / возвращать"
  2. "возвращать / удалять"

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

EnglishMoji!

Ссылки

  1. Статья "Массивы"
  2. MDN web doc. Статья "Массивы"
  3. Статья "JavaScript массивы"
  4. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨