Массивы

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

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

Видео

Создание

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

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

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко', 'Апельсин', 'Слива'] return fruits.toString() }

function learnJavaScript() {
  let fruits = ['Яблоко', 'Апельсин', 'Слива']

  return fruits.toString()
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко', 'Апельсин', 'Слива'] return fruits[0] }

function learnJavaScript() {
  let fruits = ['Яблоко', 'Апельсин', 'Слива']

  return fruits[0]
}

Результат

Loading...

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

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

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко ', 'Апельсин ', 'Слива '] fruits[2] = 'Груша ' fruits[3] = 'Лимон ' // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"] return fruits }

function learnJavaScript() {
  let fruits = ['Яблоко ', 'Апельсин ', 'Слива ']
  fruits[2] = 'Груша '
  fruits[3] = 'Лимон ' // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]

  return fruits
}

Результат

Loading...

length

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко', 'Апельсин', 'Слива'] return fruits.length }

function learnJavaScript() {
  let fruits = ['Яблоко', 'Апельсин', 'Слива']

  return fruits.length
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let fruits = [] fruits[155] = 'Яблоко' return fruits.length // 156 }

function learnJavaScript() {
  let fruits = []
  fruits[155] = 'Яблоко'

  return fruits.length // 156
}

Результат

Loading...

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

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

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

Интерактивный редактор

function learnJavaScript() { let arr = [1, 2, 3, 4, 5] arr.length = 2 // укорачиваем до двух элементов //console.log( arr ) // [1, 2] arr.length = 5 // возвращаем length как было //console.log( arr[3] ) // undefined: значения не восстановились! return 'Реальный массив укоротился:' + arr }

function learnJavaScript() {
  let arr = [1, 2, 3, 4, 5]

  arr.length = 2 // укорачиваем до двух элементов
  //console.log( arr )  // [1, 2]

  arr.length = 5 // возвращаем length как было
  //console.log( arr[3] )  // undefined: значения не восстановились!

  return 'Реальный массив укоротился:' + arr
}

Результат

Loading...

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

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

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

Например :

Интерактивный редактор

function learnJavaScript() { let arr = [ 'Яблоко', { name: 'Никита' }, true, function () { return 'Привет' } ] // получить элемент с индексом 1 {объект} и затем считать его свойство let x = arr[1].name // имя Никита // получить элемент с индексом 3 (функция) и выполнить её let result1 = arr[3] // Сама функция let result2 = arr[3]() // 'Привет' return 'Значение 4-го элемента с 3-м индексом: ' + result2 // + '. Сама функция: ' + result1 }

function learnJavaScript() {
  let arr = [
    'Яблоко',
    { name: 'Никита' },
    true,
    function () {
      return 'Привет'
    }
  ]
  // получить элемент с индексом 1 {объект} и затем считать его свойство
  let x = arr[1].name // имя Никита
  // получить элемент с индексом 3 (функция) и выполнить её
  let result1 = arr[3] // Сама функция
  let result2 = arr[3]() // 'Привет'

  return 'Значение 4-го элемента с 3-м индексом: ' + result2
  // + '. Сама функция: ' + result1
}

Результат

Loading...

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

Методы push/pop

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

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

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

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

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

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

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

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

push

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

Интерактивный редактор

function learnJavaScript() { let fruits = [' Яблоко', ' Апельсин'] fruits.push(' Груша') return 'Массив: ' + fruits // Яблоко, Апельсин, Груша }

function learnJavaScript() {
  let fruits = [' Яблоко', ' Апельсин']

  fruits.push(' Груша')

  return 'Массив: ' + fruits // Яблоко, Апельсин, Груша
}

Результат

Loading...

pop

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

Интерактивный редактор

function learnJavaScript() { let fruits = [' Яблоко', ' Апельсин', ' Груша'] let delFruits = fruits.pop() // удаляем "Груша" и возвращаем его в переменную delFruits return 'Удален элемент = ' + delFruits + '. Остался массив: ' + fruits // Яблоко, Апельсин }

function learnJavaScript() {
  let fruits = [' Яблоко', ' Апельсин', ' Груша']

  let delFruits = fruits.pop() // удаляем "Груша" и возвращаем его в переменную delFruits

  return 'Удален элемент = ' + delFruits + '. Остался массив: ' + fruits // Яблоко, Апельсин
}

Результат

Loading...

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

shift

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко ', 'Апельсин ', 'Груша '] fruits.shift() // удаляем Яблоко return fruits }

function learnJavaScript() {
  let fruits = ['Яблоко ', 'Апельсин ', 'Груша ']
  fruits.shift() // удаляем Яблоко

  return fruits
}

Результат

Loading...

unshift

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко ', 'Апельсин ', 'Груша '] fruits.unshift('Абрикос ') return fruits }

function learnJavaScript() {
  let fruits = ['Яблоко ', 'Апельсин ', 'Груша ']
  fruits.unshift('Абрикос ')

  return fruits
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { let fruits = ['Яблоко'] fruits.push('Апельсин', 'Груша') fruits.unshift('Ананас', 'Лимон') return 'В массиве ' + fruits.length + ' элементов. ' + ' Массив: ' + fruits // ["Ананас", "Лимон", "Яблоко", "Апельсин", "Груша"] }

function learnJavaScript() {
  let fruits = ['Яблоко']

  fruits.push('Апельсин', 'Груша')
  fruits.unshift('Ананас', 'Лимон')

  return 'В массиве ' + fruits.length + ' элементов. ' + ' Массив: ' + fruits // ["Ананас", "Лимон", "Яблоко", "Апельсин", "Груша"]
}

Результат

Loading...

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

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

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

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

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

Интерактивный редактор

function learnJavaScript() { let fruits = [' Лимон'] let copy = fruits // копируется по ссылке (две переменные ссылаются на один и тот же массив) copy.push(' Груша') // массивы меняются по ссылке одной командой return '1 массив: ' + fruits + ' 2 массив: ' + copy // Лимон, Груша - теперь два элемента }

function learnJavaScript() {
  let fruits = [' Лимон']

  let copy = fruits // копируется по ссылке (две переменные ссылаются на один и тот же массив)

  copy.push(' Груша') // массивы меняются по ссылке одной командой

  return '1 массив: ' + fruits + ' 2 массив: ' + copy // Лимон, Груша - теперь два элемента
}

Результат

Loading...

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

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

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

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

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

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

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

Варианты неправильного применения массива!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерактивный редактор

// prettier-ignore function learnJavaScript() { let result = '' let arr = ['Яблоко', 'Апельсин', 'Киви'] for (let i = 0; i < arr.length; i++) // проходит по элементам через for( ) result += arr[i] + ' ' return result // Яблоко, Апельсин, Киви }

// prettier-ignore
function learnJavaScript() {
  let result = ''
  let arr = ['Яблоко', 'Апельсин', 'Киви']
  
  for (let i = 0; i < arr.length; i++) // проходит по элементам через for( )
  result += arr[i] + ' '

  return result // Яблоко, Апельсин, Киви
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { let result = '' let fruits = ['Яблоко', 'Апельсин', 'Слива'] for (let fruit of fruits) { // проходит по значениям через `for..of` result += fruit + ' ' } return result // Яблоко, Апельсин, Слива }

function learnJavaScript() {
  let result = ''
  let fruits = ['Яблоко', 'Апельсин', 'Слива']

  for (let fruit of fruits) {
    // проходит по значениям через `for..of`
    result += fruit + ' '
  }
  return result // Яблоко, Апельсин, Слива
}

Результат

Loading...

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

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

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

Интерактивный редактор

function learnJavaScript() { let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] return matrix[1][1] // 5, центральный элемент }

function learnJavaScript() {
  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]

  return matrix[1][1] // 5, центральный элемент
}

Результат

Loading...

Итого

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

Объявление:

// квадратные скобки (обычно)
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. Детальней с ними мы познакомимся позже, главное сейчас вам понять, что на вход они принимают массив, который рендерит на экране.

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

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

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. "возвращать / удалять"

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

Ссылки

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 🖋 🐛 🎨