Массивы
— это упорядоченная коллекция значений. Значения в массиве называются , и каждый элемент характеризуется числовой позицией в массиве, которая называется . Массивы в языке JavaScript являются нетипизированными: элементы массива могут иметь любой тип, причем разные элементы одного и того же массива могут иметь разные типы. Элементы массива могут даже быть объектами или другими массивами, что позволяет создавать сложные структуры данных, такие как массивы объектов и массивы массивов.
Отсчет индексов массивов в языке JavaScript начинается с нуля и для них используются 32-битные целые числа — первый элемент массива имеет индекс 0. Массивы в JavaScript являются динамическими: они могут увеличиваться и уменьшаться в размерах по мере необходимости; нет необходимости объявлять фиксированные размеры массивов при их создании или повторно распределять память при изменении их размеров.
Массивы в языке JavaScript — это специализированная форма объектов, а индексы массивов означают чуть больше, чем просто имена свойств, которые по совпадению являются целыми числами.
Создание массивов
Легче всего создать массив с помощью литерала, который представляет собой простой список разделенных запятыми элементов массива в квадратных скобках. Значения в литерале массива не обязательно должны быть константами — это могут быть любые выражения, в том числе и литералы объектов:
var empty = []; // Пустой массив var numbers = [2, 3, 5, 7, 11]; // Массив с пятью числовыми элементами var misc = [ 1.1, true, "a", ]; // 3 элемента разных типов + завершающая запятая var base = 1024; var table = [base, base+1, base+2, base+3]; // Массив с переменными var arrObj = [[1,], [2, ]]; // 2 массива внутри, содержащие объекты
Синтаксис литералов массивов позволяет вставлять необязательную завершающую запятую, т.е. литерал [,,] соответствует массиву с двумя элементами, а не с тремя.
Другой способ создания массива состоит в вызове конструктора Array(). Вызвать конструктор можно тремя разными способами:
-
Вызвать конструктор без аргументов:
var arr = new Array();
var arr = new Array(10);
var arr = new Array(5, 4, 3, 2, 1, "тест");
Чтение и запись элементов массива
Доступ к элементам массива осуществляется с помощью оператора []. Слева от скобок должна присутствовать ссылка на массив. Внутри скобок должно находиться произвольное выражение, возвращающее неотрицательное целое значение. Этот синтаксис пригоден как для чтения, так и для записи значения элемента массива. Следовательно, допустимы все приведенные далее JavaScript-инструкции:
// Создать массив с одним элементом var arr = ["world"]; // Прочитать элемент 0 var value = arr[0]; // Записать значение в элемент 1 arr[1] = 3.14; // Записать значение в элемент 2 i = 2; arr[i] = 3; // Записать значение в элемент 3 arr[i + 1] = 'привет'; // Прочитать элементы 0 и 2, записать значение в элемент 3 arr[arr[i]] = arr[0];
Напомню, что массивы являются специализированной разновидностью объектов. Квадратные скобки, используемые для доступа к элементам массива, действуют точно так же, как квадратные скобки, используемые для доступа к свойствам объекта. Интерпретатор JavaScript преобразует указанные в скобках числовые индексы в строки — индекс 1 превращается в строку «1» — а затем использует строки как имена свойств.
В преобразовании числовых индексов в строки нет ничего особенного: то же самое можно проделывать с обычными объектами:
var obj = <>; // Создать простой объект obj[1] = "one"; // Индексировать его целыми числами
Особенность массивов состоит в том, что при использовании имен свойств, которые являются неотрицательными целыми числами, массивы автоматически определяют значение свойства length. Например, выше был создан массив arr с единственным элементом. Затем были присвоены значения его элементам с индексами 1, 2 и 3. В результате этих операций значение свойства length массива изменилось и стало равным 4.
Следует четко отличать индексы в массиве от имен свойств объектов. Все индексы являются именами свойств, но только свойства с именами, представленными целыми числами являются индексами. Все массивы являются объектами, и вы можете добавлять к ним свойства с любыми именами. Однако если вы затрагиваете свойства, которые являются индексами массива, массивы реагируют на это, обновляя значение свойства length при необходимости.
Обратите внимание, что в качестве индексов массивов допускается использовать отрицательные и не целые числа. В этом случае числа преобразуются в строки, которые используются как имена свойств.
Добавление и удаление элементов массива
Мы уже видели, что самый простой способ добавить элементы в массив заключается в том, чтобы присвоить значения новым индексам. Для добавления одного или более элементов в конец массива можно также использовать метод push():
var arr = []; // Создать пустой массив arr.push('zero'); // Добавить значение в конец arr.push('one',2); // Добавить еще два значения
Добавить элемент в конец массива можно также, присвоив значение элементу arr[arr.length]. Для вставки элемента в начало массива можно использовать метод unshift(), при этом существующие элементы в массиве смещаются в позиции с более высокими индексами.
Удалять элементы массива можно с помощью оператора delete, как обычные свойства объектов:
var arr = [1,2,'three']; delete arr[2]; 2 in arr; // false, индекс 2 в массиве не определен arr.length; // 3: оператор delete не изменяет свойство length массива
Удаление элемента напоминает (но несколько отличается) присваивание значения undefined этому элементу. Обратите внимание, что применение оператора delete к элементу массива не изменяет значение свойства length и не сдвигает вниз элементы с более высокими индексами, чтобы заполнить пустоту, оставшуюся после удаления элемента.
Кроме того имеется возможность удалять элементы в конце массива простым присваиванием нового значения свойству length. Массивы имеют метод pop() (противоположный методу push()), который уменьшает длину массива на 1 и возвращает значение удаленного элемента. Также имеется метод shift() (противоположный методу unshift()), который удаляет элемент в начале массива. В отличие от оператора delete, метод shift() сдвигает все элементы вниз на позицию ниже их текущих индексов.
Наконец существует многоцелевой метод splice(), позволяющий вставлять, удалять и замещать элементы массивов. Он изменяет значение свойства length и сдвигает элементы массива с более низкими или высокими индексами по мере необходимости. Все эти методы мы разберем чуть позже.
Многомерные массивы
JavaScript не поддерживает «настоящие» многомерные массивы, но позволяет неплохо имитировать их при помощи массивов из массивов. Для доступа к элементу данных в массиве массивов достаточно дважды использовать оператор [].
Например, предположим, что переменная matrix — это массив массивов чисел. Каждый элемент matrix[x] — это массив чисел. Для доступа к определенному числу в массиве можно использовать выражение matrix[x][y]. Ниже приводится конкретный пример, где двумерный массив используется в качестве таблицы умножения:
// Создать многомерный массив var table = new Array(10); // В таблице 10 строк for(var i = 0; i < table.length; i++) table[i] = new Array(10); // В каждой строке 10 столбцов // Инициализировать массив и вывести на консоль for(var row = 0, str = ''; row < table.length; row++) < for(var col = 0; col < table[row].length; col++) < table[row][col] = (row+1)*(col+1); str += table[row][col] + ' '; >console.log(str + '\n'); str = ''; >
Методы класса Array
Стандарт ECMAScript 3 определяет в составе Array.prototype множество удобных функций для работы с массивами, которые доступны как методы любого массива. Эти методы будут представлены в следующих подразделах.
Метод join()
Метод Array.join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку. В необязательном аргументе методу можно передать строку, которая будет использоваться для отделения элементов в строке результата. Если строка-разделитель не указана, используется запятая. Например, следующий фрагмент дает в результате строку «1,2,3»:
var arr = [1,2,3]; arr.join(); // '1,2,3' arr.join("-"); // '1-2-3'
Метод reverse()
Метод Array.reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив. Перестановка выполняется непосредственно в исходном массиве, т.е. этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве. Например, следующий фрагмент, где используются методы reverse() и join(), дает в результате строку «3,2,1»:
var arr = [1,2,3]; arr.reverse().join(); // "3,2,1"
Метод sort()
Метод Array.sort() сортирует элементы в исходном массиве и возвращает отсортированный массив. Если метод sort() вызывается без аргументов, сортировка выполняется в алфавитном порядке (для сравнения элементы временно преобразуются в строки, если это необходимо). Неопределенные элементы переносятся в конец массива.
Для сортировки в каком-либо ином порядке, отличном от алфавитного, методу sort() можно передать функцию сравнения в качестве аргумента. Эта функция устанавливает, какой из двух ее аргументов должен следовать раньше в отсортированном списке. Если первый аргумент должен предшествовать второму, функция сравнения должна возвращать отрицательное число. Если первый аргумент должен следовать за вторым в отсортированном массиве, то функция должна возвращать число больше нуля. А если два значения эквивалентны (т.е. порядок их следования не важен), функция сравнения должна возвращать 0:
var arr = [33, 4, 1111, 222]; arr.sort(); // Алфавитный порядок: 1111, 222, 33, 4 arr.sort(function(a,b) < // Числовой порядок: 4, 33, 222, 1111 return a-b; // Возвращает значение < 0, 0 или >0 // в зависимости от порядка сортировки a и b >); // Сортируем в обратном направлении, от большего к меньшему arr.sort(function(a,b) );
Обратите внимание, насколько удобно использовать в этом фрагменте неименованную функцию. Функция сравнения используется только здесь, поэтому нет необходимости давать ей имя.
Метод concat()
Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), и значения всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, его элементы добавляются в возвращаемый массив. Следует, однако, отметить, что рекурсивного превращения массива из массивов в одномерный массив не происходит. Метод concat() не изменяет исходный массив. Ниже приводится несколько примеров:
var arr = [1,2,3]; arr.concat(4, 5); // Вернет [1,2,3,4,5] arr.concat([4,5]); // Вернет [1,2,3,4,5] arr.concat([4,5],[6,7]) // Вернет [1,2,3,4,5,6,7] arr.concat(4, [5,[6,7]]) // Вернет [1,2,3,4,5,[6,7]]
Метод slice()
Метод Array.slice() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе.
Если указан только один аргумент, возвращаемый массив содержит все элементы от начальной позиции до конца массива. Если какой-либо из аргументов имеет отрицательное значение, он определяет номер элемента относительно конца массива. Так, аргументу -1 соответствует последний элемент массива, а аргументу -3 — третий элемент массива с конца. Вот несколько примеров:
var arr = [1,2,3,4,5]; arr.slice(0,3); // Вернет [1,2,3] arr.slice(3); // Вернет [4,5] arr.slice(1,-1); // Вернет [2,3,4] arr.slice(-3,-2); // Вернет [3]
Метод splice()
Метод Array.splice() — это универсальный метод, выполняющий вставку или удаление элементов массива. В отличие от методов slice() и concat(), метод splice() изменяет исходный массив, относительно которого он был вызван. Обратите внимание, что методы splice() и slice() имеют очень похожие имена, но выполняют совершенно разные операции.
Метод splice() может удалять элементы из массива, вставлять новые элементы или выполнять обе операции одновременно. Элементы массива при необходимости смещаются, чтобы после вставки или удаления образовывалась непрерывная последовательность.
Первый аргумент метода splice() определяет позицию в массиве, начиная с которой будет выполняться вставка и/или удаление. Второй аргумент определяет количество элементов, которые должны быть удалены (вырезаны) из массива. Если второй аргумент опущен, удаляются все элементы массива от указанного до конца массива. Метод splice() возвращает массив удаленных элементов или (если ни один из элементов не был удален) пустой массив.
Первые два аргумента метода splice() определяют элементы массива, подлежащие удалению. За этими аргументами может следовать любое количество дополнительных аргументов, определяющих элементы, которые будут вставлены в массив, начиная с позиции, указанной в первом аргументе.
var arr = [1,2,3,4,5,6,7,8]; arr.splice(4); // Вернет [5,6,7,8], arr = [1,2,3,4] arr.splice(1,2); // Вернет [2,3], arr = [1,4] arr.splice(1,1); // Вернет [4]; arr = [1] arr = [1,2,3,4,5]; arr.splice(2,0,'a','b'); // Вернет []; arr = [1,2,'a','b',3,4,5]
Методы push() и pop()
Методы push() и pop() позволяют работать с массивами как со стеками. Метод push() добавляет один или несколько новых элементов в конец массива и возвращает его новую длину. Метод pop() выполняет обратную операцию — удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Обратите внимание, что оба эти метода изменяют исходный массив, а не создают его модифицированную копию.
Методы unshift() и shift()
Методы unshift() и shift() ведут себя почти так же, как push() и pop(), за исключением того, что они вставляют и удаляют элементы в начале массива, а не в конце. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места, добавляет элемент или элементы в начало массива и возвращает новую длину массива. Метод shift() удаляет и возвращает первый элемент массива, смещая все последующие элементы на одну позицию вниз, чтобы занять место, освободившееся в начале массива.
Массивы
Для хранения набора данных в языке JavaScript предназначены массивы. Массивы в JavaScript представлены объектом Array . Объект Array предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом и его элементами.
Создание массива
Можно создать пустой массив, используя квадратные скобки или конструктор Array:
const users = new Array(); const people = []; console.log(users); // Array[0] console.log(people); // Array[0]
Можно сразу же инициализировать массив некоторым количеством элементов:
const users = new Array("Tom", "Bill", "Alice"); const people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]
Можно определить массив и по ходу определять в него новые элементы:
const users = []; users[1] = "Tom"; users[2] = "Kate"; console.log(users[1]); // "Tom" console.log(users[0]); // undefined
При этом не важно, что по умолчанию массив создается с нулевой длиной. С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.
Еще один способ инициализации массивов представляет метод Array.of() — он принимает элементы и инициизирует ими массив:
const people = Array.of("Tom", "Bob", "Sam"); console.log(people); // ["Tom", "Bob", "Sam"]
Array.from
И еще один способ представляет функция Array.from() . Она имеет много вариантов, рассмотрим самые распространенные:
Array.from(arrayLike) Array.from(arrayLike, function mapFn(element) < . >) Array.from(arrayLike, function mapFn(element, index) < . >)
В качестве первого параметра — arrayLike функция принимает некий объект, который, условно говоря, «похож на массив», то есть может быть представлен в виде набора элементов. Это может быть и другой массив, это может быть и строка, которая по сути предоставляет набор символов. Вообщем какой-то набор элементов, который можно преобразовать в массив. Кроме того, это может и некий объект, в котором определено свойство length . Например:
const array = Array.from("Hello"); console.log(array); // ["H", "e", "l", "l", "o"]
В данном случае в функцию передается строка и возвращается массив, каждый элемент которого предоставляет один из символов этой строки.
В качестве второго параметра передается функция преобразования, которая через первый параметр получает текущий элемент набора и возвращает некоторый результат его трансформации. Например:
const numbers = [1, 2, 3, 4]; const array = Array.from(numbers, n => n * n); console.log(array); // [1, 4, 9, 16]
В данном случае в функцию Array.from() передается массив чисел. Второй параметр — функция (в данном случае в ее роли выступает лямбда-выражение) запускается для каждого числа из этого массива и получает это число через параметр n . В самом лямбда-выражении возвращаем квадрат этого числа. В итоге Array.from() возвратит новый массив, в котором будут квадраты чисел из массива numbers.
И еще одна версия функции Array.from() в качестве второго параметра принимает функцию преобразования, в которую кроме элемента из перебираемого набора передается и индекс этого элемента:
Array.from(arrayLike, function mapFn(element, index) < . >)
Используем эту версию и передадим в функцию объект со свойством length :
const array = Array.from(, (element, index) => < console.log(element); // undefined return index; >); console.log(array); // [0, 1, 2]
Здесь в функцию передается объект, у которого свойство length равно 3. Для функции Array.from это будет сигналом, в возвращаемом массиве должно быть три элемента. При этом неважно, что функция преобразования из второго параметра принимает элемент набора (параметр element ) — в данном случае он будет всегда undefined , тем не менее значение length:3 будет указателем, что возвращаемый массив будет иметь три элемента с соответственно индексами от 0 до 2. И через второй параметр функции преобразования — параметр index мы можем и получить текущий индекс элемента.
Тем не менее мы можем передать объект, где в качестве названий свойств применяются индексы. В этом случае объект превратится в массивоподобный объект, который можно перебрать:
const array = Array.from(, (element) => < console.log(element); return element; >); console.log(array); // ["Tom", "Sam", "Bob"]
length
Чтобы узнать длину массива, используется свойство length :
const fruit = []; fruit[0] = "яблоки"; fruit[1] = "груши"; fruit[2] = "сливы"; console.log("В массиве fruit ", fruit.length, " элемента"); for(let i=0; i < fruit.length; i++) console.log(fruit[i]);
По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:
const users = []; // в массиве 0 элементов users[0] = "Tom"; users[1] = "Kate"; users[4] = "Sam"; for(let i=0; i Tom Kate undefined undefined SamНесмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined .
Массив
Ни один язык программирования не обходится без хранения списков значений. JavaScript не исключение.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Как понять
- Чтение
- Запись
- Добавление элементов
- Создать большой массив из чисел
- Поиск по массиву
- Николай Лопин советует
Контрибьюторы:
Обновлено 18 июля 2022
Кратко
Скопировать ссылку "Кратко" Скопировано
Массив — это структура, в которой можно хранить коллекции элементов — чисел, строк, других массивов и так далее. Элементы нумеруются и хранятся в том порядке, в котором их поместили в массив. Элементов может быть сколько угодно, они могут быть какими угодно.
Массивы очень похожи на нумерованные списки.
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Создадим массив с помощью квадратных скобок [ ] .
К примеру, можно создать пустой массив:
const guestList = [] // гостей нет
const guestList = [] // гостей нет
А можно создать сразу с элементами внутри:
const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']
const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']
Элементы могут быть разных типов:
const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]
const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]
Внутри массива могут быть другие массивы:
const arrayOfArrays = [ 'Россия', ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'], [true, true, false, 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 numbers.push(i)>
const numbers = [] for (let i = 1; i 1000; ++i) numbers.push(i) >
Создадим массив чётных чисел от 0 до 1000:
const evenNumbers = []for (let i = 0; i evenNumbers.push(i)>
const evenNumbers = [] for (let i = 0; i 1000; i += 2) evenNumbers.push(i) >
Поиск по массиву
Скопировать ссылку " Поиск по массиву" Скопировано
Используйте index Of ( ) , чтобы найти, под каким индексом хранится элемент.
Используйте 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 = iWatched vitalikWatched.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'] ♂️
Хитрость в том, что во второй строке происходит копирование адреса, где находится массив, а не самого массива. В итоге получаем ситуацию, когда две переменные i Watched и vitalik Watched работают с одним массивом, так как хранят один адрес. Это особенность работы со значениями, которые хранятся по ссылке.
Копия массива создаётся с помощью метода 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
Array
Массив ( Array ) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.
Создание массива
var fruits = ["Яблоко", "Банан"]; console.log(fruits.length); // 2Доступ к элементу массива по индексу
var first = fruits[0]; // Яблоко var last = fruits[fruits.length - 1]; // БананИтерирование по массиву
.forEach(function (item, index, array) console.log(item, index); >); // Яблоко 0 // Банан 1Добавление элемента в конец массива
var newLength = fruits.push("Апельсин"); // ["Яблоко", "Банан", "Апельсин"]Удаление последнего элемента массива
var last = fruits.pop(); // удалим Апельсин (из конца) // ["Яблоко", "Банан"];Удаление первого элемента массива
var first = fruits.shift(); // удалим Яблоко (из начала) // ["Банан"];Добавление элемента в начало массива
var newLength = fruits.unshift("Клубника"); // добавляет в начало // ["Клубника", "Банан"];Поиск номера элемента в массиве
.push("Манго"); // ["Клубника", "Банан", "Манго"] var pos = fruits.indexOf("Банан"); // 1Удаление элемента с определённым индексом
var removedItem = fruits.splice(pos, 1); // так можно удалить элемент // ["Клубника", "Манго"]Удаление нескольких элементов, начиная с определённого индекса
var vegetables = ["Капуста", "Репа", "Редиска", "Морковка"]; console.log(vegetables); // ["Капуста", "Репа", "Редиска", "Морковка"] var pos = 1, n = 2; var removedItems = vegetables.splice(pos, n); // так можно удалить элементы, n определяет количество элементов для удаления, // начиная с позиции(pos) и далее в направлении конца массива. console.log(vegetables); // ["Капуста", "Морковка"] (исходный массив изменён) console.log(removedItems); // ["Репа", "Редиска"]Создание копии массива
var shallowCopy = fruits.slice(); // так можно создать копию массива // ["Клубника", "Манго"]Синтаксис
[element0, element1, . elementN] new Array(element0, element1[, . [, elementN]]) new Array(arrayLength)Массив в JavaScript инициализируется с помощью переданных элементов, за исключением случая, когда в конструктор Array передаётся один аргумент и этот аргумент является числом (см. ниже). Стоит обратить внимание, что этот особый случай применяется только к JavaScript-массивам, создаваемым с помощью конструктора Array , а не к литеральным массивам, создаваемым с использованием скобочного синтаксиса.
Если конструктору Array передаётся единственный аргумент, являющийся целым числом в диапазоне от 0 до 232-1 (включительно), будет возвращён новый пустой JavaScript-массив, длина которого установится в это число (примечание: это означает массив, содержащий arrayLength пустых ячеек, а не ячеек со значениями undefined ). Если аргументом будет любое другое число, возникнет исключение RangeError .
Описание
Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт undefined . В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.
Некоторые полагают, что вы не должны использовать массив в качестве ассоциативного массива. В любом случае, вместо него вы можете использовать простые объекты , хотя у них есть и свои подводные камни. Смотрите пост Легковесные JavaScript-словари с произвольными ключами(англ.) в качестве примера.
Доступ к элементам массива
Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный 0 , а индекс последнего элемента равен значению свойства массива length минус 1.
var arr = ["первый элемент", "второй элемент", "последний элемент"]; console.log(arr[0]); // напечатает 'первый элемент' console.log(arr[1]); // напечатает 'второй элемент' console.log(arr[arr.length - 1]); // напечатает 'последний элемент'Элементы массива являются свойствами, точно такими же, как, например, свойство toString , однако попытка получить элемент массива по имени его свойства приведёт к синтаксической ошибке, поскольку имя свойства не является допустимым именем JavaScript:
.log(arr.0); // синтаксическая ошибкаЭто не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным '3d' , вы сможете обратиться к нему только посредством скобочной нотации. Примеры:
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; console.log(years.0); // синтаксическая ошибка console.log(years[0]); // работает как положено.3d.setTexture(model, 'character.png'); // синтаксическая ошибка renderer['3d'].setTexture(model, 'character.png'); // работает как положеноОбратите внимание, что во втором примере 3d заключено в кавычки: '3d' . Индексы можно заключать в кавычки (например years['2'] вместо years[2] ), но в этом нет необходимости. Значение 2 в выражении years[2] будет неявно приведено к строке движком JavaScript через метод преобразования toString . Именно по этой причине ключи '2' и '02' будут ссылаться на два разных элемента в объекте years и следующий пример выведет true :
.log(years["2"] != years["02"]);Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:
var promise = var: "text", array: [1, 2, 3, 4], >; console.log(promise["array"]);Взаимосвязь свойства length с числовыми свойствами
Свойство массивов length взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, join , slice , indexOf и т.д.) учитывают значение свойства length при своём вызове. Другие методы (например, push , splice и т.д.) в результате своей работы также обновляют свойство length массива.
var fruits = []; fruits.push("банан", "яблоко", "персик"); console.log(fruits.length); // 3При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length :
[5] = "манго"; console.log(fruits[5]); // 'манго' console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 6Увеличиваем свойство length
.length = 10; console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 10Однако, уменьшение свойства length приведёт к удалению элементов.
.length = 2; console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2Более подробно эта тема освещена на странице, посвящённой свойству Array.length .
Создание массива с использованием результата сопоставления
Результатом сопоставления регулярного выражения строке является JavaScript-массив. Этот массив имеет свойства и элементы, предоставляющие информацию о сопоставлении. Подобные массивы возвращаются методами RegExp.exec , String.match и String.replace . Чтобы было проще понять, откуда и какие появились свойства и элементы, посмотрите следующий пример и обратитесь к таблице ниже:
// Сопоставляется с одним символом d, за которым следует один // или более символов b, за которыми следует один символ d // Запоминаются сопоставившиеся символы b и следующий за ними символ d // Регистр игнорируется var myRe = /d(b+)(d)/i; var myArray = myRe.exec("cdbBdbsbz");Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже:
Свойство/Элемент Описание Пример input Свойство только для чтения, отражающее оригинальную строку, с которой сопоставлялось регулярное выражение. cdbBdbsbz index Свойство только для чтения, являющееся индексом (отсчёт начинается с нуля) в строке, с которого началось сопоставление. 1 [0] Элемент только для чтения, определяющий последние сопоставившиеся символы. dbBd [1], . [n] Элементы только для чтения, определяющие сопоставившиеся подстроки, заключённые в круглые скобки, если те включены в регулярное выражение. Количество возможных подстрок не ограничено. [1]: bB [2]: d Свойства
Значение свойства length конструктора массива равно 1.
Позволяет добавлять свойства ко всем объектам массива.
Методы
Array.from() Экспериментальная возможность
Создаёт новый экземпляр Array из массивоподобного или итерируемого объекта.
Возвращает true , если значение является массивом, иначе возвращает false .
Асинхронно наблюдает за изменениями в массиве, подобно методу Object.observe() для объектов. Метод предоставляет поток изменений в порядке их возникновения.
Создаёт новый экземпляр Array из любого количества аргументов, независимо от их количества или типа.
Экземпляры массива
Все экземпляры массива наследуются от Array.prototype . Изменения в объекте прототипа конструктора массива затронет все экземпляры Array .