मुख्य कंटेंट तक स्किप करें

Массивы

@serverSerrverlesskiy

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

Storage

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

Создание#

create

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

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

length#

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Update

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Storage

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

Например 👇 :

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Методы push/pop#

binarycode

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

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

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

Add

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

Delete

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

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

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

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

push#

Add to

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

pop#

Delete

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

start

shift#

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

delete

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

unshift#

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

Plus

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

cupboard

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

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

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Что действительно делает массивы особенными – это их внутреннее представление. Движок 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( ) по цифровым индексам 👇 :

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Matryoschka

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Итого#

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) – никогда не используйте для массивов!

Проблемы?#

Problem

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

Вопросы#

Question

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

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

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

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

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

  1. pop()
  2. push()
  3. length

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

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

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

  1. push()
  2. pop()
  3. shift()

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

  1. pop()
  2. shift()
  3. unshift()

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

Sumerian school

Ссылки#

  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

🖋 🐛 🎨

Become a Patron!