Как объявить массив в javascript
Перейти к содержимому

Как объявить массив в javascript

  • автор:

5 способов создать массив в JavaScript

elementN — элементы, из которых создаётся массив.

  • Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенный в квадратные скобки ( [] ). Когда вы создаете массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.
  • Создание пустого массива
const array = [];
  • Создание массива и инициализация (создание одного элемента не имеет особенностей)
const array = [0, false, ''];
  • Можно указывать не все значения, пропущенные элементы будут иметь значение undefined
const array = [0, ,2];

1.2. Через конструктор Array()

new Array(element0, element1[, . [, elementN]])
new Array(arrayLength)

elementN — элементы, из которых создаётся массив.

arrayLength длина массива (количество элементов )

  • создание пустого массива
const array = new Array();
  • массив с инициализацией (в примере массив с двумя элементами. Значение первого элемента — 1, значение второго элемента — 2). Данная запись возможна только при числе элементов от двух.
const array = new Array(1,2);
  • массив с заданной длинной, но не инициализированным(-и) значением(-ями). В данном примере длина массива (array.length) будет 3 элемента, значение элементов — undefined.
const array = new Array(3);

1.3. Объявление массива как функцию

  • Если вызовем Array как функцию, будет создан новый объект Array. Этот метод вызывает конструктор Array, поэтому примеры выше будут выглядеть следующим образом:
//создание пустого массива
const array1 = Array();
//создание массива и инициализация
const array2 = Array(1,2);
//создание массива с заданной длинной
const array3 = Array(3);

1.4. С помощью метода Array.of()

Array.of(element0[, element1[, . [, elementN]]])

elementN — элементы, из которых создаётся массив.

  • Этот метода создаёт новый экземпляр массива Array из произвольного числа аргументов.

Формальные способы закончены, но … есть способы создания массива из другого массива

Способ № 2 (копирование)

2.1. Создание массива с помощью копирования — метод slice(begin, end).

arr.slice([begin[, end]])

begin — индекс, с которого начинается извлечение.Если индекс отрицательный, begin указывает смещение от конца последовательности. Если begin опущен, slice() начинает работать с индекса 0 .

end — индекс, по которому заканчивается извлечение. Если индекс отрицательный, end указывает смещение от конца последовательности. Если end опущен, slice() извлекает все элементы до конца последовательности ( arr.length ).

Возвращает новый массив, старый не изменяется

  • Метод slice() позволяет копировать массив полностью или частично. Этот метод принимает два аргумента slice(begin, end). Первый — begin указывает на индекс элемента с которого будет копирование массива, второй — end до какого индекса (не включительно). Если второй аргумент не определён (undefined), то копирование до конца массива. slice() — частный случай, где begin и end — не определены. В примере array2 — получит все элементы массива array
const array = [1, 2, 3];
const array2 = array.slice();
//array [1, 2, 3]
//array2 [1, 2, 3]

2.2. Создание массива с помощью копирования — метод concat()

var new_array = old_array.concat(value1[, value2[, . [, valueN]]])

valueN — массивы и/или значения, соединяемые в новый массив.

Возвращает новый массив, старый не изменяется

  • Метод concat() без аргументов — копирует массив полностью. Принимает множество аргументов, которые добавляются значениями в новый массив в конец. Если значение массив, то будет добавлены значения этого массива (но, не объекты).
const array = [1, 2, 3];
const array2 = array.concat()
//array2 [1, 2, 3]

Способ № 3 (изменение существующего)

3.1. Создание массива из другого путём изменения первого — метод splice().

array.splice(start, deleteCount[, item1[, item2[, . ]]])

start — индекс, по которому начинать изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.

deleteCount — целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. Если deleteCount больше количества элементов, начиная с индекса start будут удалены все элементы до конца массива.

itemN — необязательные параметры. Добавляемые к массиву элементы.

  • Без аргументов метод splice() возвращает пустой массив. Когда указан первый аргумент — splice(1) — удаляет все элементы базового массива, начиная с указанного индекса и массив из удалённых элементов. Второй аргумент в методе splice(1, 2) указывает на количество удаляемых элементов. Если указано 0- удалять не будет. Все последующие аргументы этого метода будут добавлены как элементы массива на место удалённых элементов
const array = [1, 2, 3];
const array2 = array.splice();
const array3 = array.splice(0, 3, 5, 2, 3)
//array = [1, 2, 3]
//array2 = []
//array3 = [1, 2, 3], но array имеет новые значения [5, 2, 3]

Способ № 4. (из объекта)

4.1. Создание массива с помощью метода from()

Нужно оговорить, что объект, из которого создаём массив должен быть массивоподобным или инерируемым

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike — массивоподобный или итерируемый объект, преобразуемый в массив.

mapFn — необязательный параметр. Отображающая функция, вызываемая для каждого элемента массива.

thisArg — необязательный параметр. Значение, используемое в качестве this при выполнении функции mapFn .

  • Простой пример создания с помощью этого метода массива из строки
const array = Array.from('text'); //array = ['t','e','x','t']

Способ № 5. Array comprehension

Этот способ назвала синтаксисом, который был доступен в черновике ECMAScript2015. Array comprehension — это JavaScript-выражение, которое позволяет быстро создавать новый массив из существующего. Данный синтаксис не стандартен, поэтому вместо него рекомендованы следующие:

5.1. Создание нового массива с помощью метода filter()

var newArray = arr.filter(callback[, thisArg])

callback — функция, которая будет вызвана для каждого элемента массива. Если функция возвращает true , то элемент добавляется в новый массив, если false , то не добавляется. В функцию будет передано три аргумента: element , index , array .

element — текущий обрабатываемый элемент в массиве.

index — необязательный параметр. Индекс текущего обрабатываемого элемента в массиве.

array — необязательный параметр. Массив, по которому осуществляется проход.

thisArg — необязательный параметр. Значение, используемое в качестве this при вызове функции callback .

  • Способ создания нового массива из существующего с элементами, для которых результат выполнения функции (передали первым аргументом) будет true .
const array = ['t', 'e', 'x', 'text'];
const array2 = array.filter(char => char.length < 2);
//array2 = ['t', 'e', 'x']

5.2. Создание нового массива с помощью метода map()

var new_array = arr.map(function callback(currentValue, index, array) < 
// Возвращает элемент для new_array
>[, thisArg])

callback — функция, создающая элемент в новом массиве, принимает три аргумента: currentValue — текущий обрабатываемый элемент массива. index — индекс текущего обрабатываемого элемента в массиве. array — массив, по которому осуществляется проход.

thisArg — необязательный параметр. Значение, используемое в качестве this при вызове функции callback .

  • Метод вызывает функцию один раз для каждого элемента базового массива и результат выполнения будет элементом нового массива. В примере каждый элемент массива возводиться степень 2 (умножается сам на себя). Если функция из примера будет возвращать return elem; , то мы просто с помощью этого метода скопируем базовый массив.
const array = [1, 2, 3, 4];
const array2 = array.map(elem =>elem ** 2);
//array2 = [1, 4, 9, 16];

5.3. С помощью оператора расширения spread

  • в литерах массива:
[. iterableObj, 4, 5, 6]
  • при деструктурирующем присваивании
[a, b, . iterableObj] = [1, 2, 3, 4, 5];

iterableObj — обязательный. Итерируемый объект.

  • Пример для деструктурирующего присваивания. Вообщем-то, это оператор rest — противоположность spread — собирает множество в один массив. В данном случае, множество, это всё, кроме первого элемента (index ==0), которое решили присвоить переменной name.
const array = ['Olga', 't', 'e', 'x', 't'];
const [name, . restElement] = array;
const array2 = restElement;
//array без изменения, name = 'Olga', array2 = ['t', 'e', 'x', 't']
  • А в этом примере получилось копирование, аналогично методу slice():
const array = [1, 2, 3];
const array2 = [. array];
//array [1, 2, 3]
//array2 [1, 2, 3]

5.4. С помощью стрелочных функций

Синтаксис очень объемный, поэтому оставлю ссылку на него

  • Стрелочные функции отличаются от обычных тем, что у них нет собственного объекта аргумента и контекста this.
  • В примере создали функцию, которая возвращает массив элементов, которые передали аргументами с помощью оператора rest
const array = (. rest) => rest;
array(1, 2, 3);
//array [1, 2, 3]
  • С помощью стрелочной функции и метода from() можно получить результат примера с методом map():
const array = Array.from([1, 2, 3, 4], x => x ** 2);
// [1, 4, 9, 16]

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

['Спасибо','за','внимание'].join(' ');

Что такое массивы в JavaScript

Массивы в JavaScript являются особым подвидом объектов, в котором ключи это цифры, начиная с нуля. Такие “ключи” обычно называют индексами и они присваиваются элементом массива автоматически при добавлении. Мы можем обратиться к любому элементу массива почти так же как обращаемся к свойствам объекта, но в случае с массивами, индекс элемента нужно указывать в квадратных скобках или с помощью нового метода at , который в отличии от первого способа, может принимать и отрицательные значения. Это удобно, если нужно найти последний элемент массива, для чего нужно передать в метод at значение -1. Раньше для такой операции приходилось вычислять индекс последнего элемента отнимая единицу от длинны массива: const lastItem = arr[arr.length -1] .

const myArr = [1, 2, 3, 4, 5]; console.log(myArr[1]); // 2 console.log(myArr[-2]); // undefined console.log(myArr.at(1)); // 2 console.log(myArr.at(-2)); // 4 const myObj = < . myArr >; console.log(myObj); //

Способы создания

Массив можно объявить двумя способами: с помощью конструктора ( const myArr = new Array() ) или просто обернув нужные значения в квадратные скобки ( const myArr = [] ). Первый способ практически не используется в реальной жизни, а глобальный объект Array в основном полезен благодаря своим методам isArray , который проверяет является ли переданный параметр массивом и возвращает результат проверки в виде булева значения, а так же from , который, в отличии от конструктора, не просто принимает набор значений, а создает новый массив из итерируемого или псевдомассива (например, строки или объекта). При этом метод from может принимать необязательными параметрами функцию, которая будет вызвана для каждого элемента нового массива перед добавлением и аргумент, который будет использоваться в качестве this при выполнении такой функции:

const myArr = [1, 2, 3, 4, 5]; console.log(Array.isArray(myArr)); //true console.log(Array.from("string")); //[ 's', 't', 'r', 'i', 'n', 'g' ] function multiply(value) < return value * this.multiplier; >console.log(Array.from(myArr, multiply, < multiplier: 3 >)); // [ 3, 6, 9, 12, 15 ]

Вложенность и клонирование

Массивы — ссылочный тип данных JavaScript т.е. они могут содержать любые типы данных включая ссылки на другие массивы или объекты. Такие массивы называются вложенными и глубина вложенности не ограничена. Механизм ссылок позволяет экономить память, но если нам нужна не просто ссылка, а независимая копия (чаще называется клоном), мы должны убедиться, что вложенные массивы также будут скопированы и будут являться независимыми копиями. Для этого нужно использовать соответствующий подход в клонировании массива:

const nestedArr = [1, 2]; const nestedObg = < name: "John" >; const arr = ["a", nestedArr, nestedObg]; console.log(arr[1][0], arr[2].name); //1 John const clone1 = arr; //простое присвоение значения по ссылке const clone2 = JSON.parse(JSON.stringify(arr)); //а здесь созлается полностью новый массив nestedArr[0] = 3; nestedObg.name = "Stan"; console.log(arr, clone1); // Оригинал: [ 'a', [ 3, 2 ], < name: 'Stan' >] // Клон: [ 'a', [ 3, 2 ], < name: 'Stan' >] //после изменения вложенного массива эти изменения затронут и клон console.log(clone2); //[ 'a', [ 1, 2 ], < name: 'John' >] //здесь клон не зависит от оригинала

Важные особенности

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

Добавление и удаление элементов.

Производительность сильно зависит от того с какой частью массива мы работает. Если воспользоваться методами, которые изменяют первый элемент (с индексом 0), а именно unshift для добавления элемента в начало массива или shift для удаления первого элемента — индексы всех элементов массива будут перезаписаны на новые (сдвинутся на 1). Такая операция займет гораздо больше времени и ресурсов, чем добавление элемента в конец массива методом push или удаление последнего элемента с помощью метода pop . Поэтому при работе с массивами крайне желательно использовать именно push и pop .

const myArr = new Array(10000000).fill(1); for (let i in myArr) < myArr[i] = myArr[i] * 2; >//займет 1151 мс for (let i of myArr) < i = i * 2; >//займет 141 мс

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

Разряженные и плотные массивы

В примере с добавлением и удалением элементов мы создали огромный массив с помощью конструктора и заполнили его через метод fill , но что будет если не заполнять такой массив? В таком случае он будет наполнен пустыми элементами. Массивы содержащие пустые элементы называются разряженными, а те что не имеют таковых — плотными. Разряженный массив так же можно создать прямо указав длину ( arr.length = ), если присвоенное значение длинны больше количества элементов в массиве. Или даже случайно, просто поставив две запятые после очередного элемента при описании массива вручную. Ни одна IDE не подсветит этот участок кода поскольку такое описание не нарушает синтаксис.

const myArr = new Array(5); console.log(myArr); //[ ] const myArr2 = []; myArr2.length = 5; console.log(myArr2); //[ ] const myArr3 = [, , , , ,]; console.log(myArr3); //[ ] console.log(myArr[0], myArr2[1], myArr3[2]); //undefined undefined undefined myArr[0] = "value"; console.log(myArr); //[ 'value', ]

Разреженные массивы имеют свое применение в некоторых случаях, однако, следует помнить, что пустые элементы все равно получают индекс, который занимает место в памяти и итерируется при переборе. Поэтому разряженные массивы могут быть менее эффективными в использовании памяти и в производительности по сравнению с обычными массивами в JavaScript. Следовательно лучше избегать прямого указания длинны массива и быть внимательным к количеству запятых.

Перебор массивов

Вы же помните что массивы это особый подвид объектов в JavaScript? Это значит что мы можем итерировать их с помощью цикла for…in… , но для массивов существует специальный цикл for…of… . Разница между ними не только в синтаксисе (в for…in… переменная это ключ объекта, а в for…of… — элемент массива ), но и в скорости работы с массивами:

const myArr = new Array(10000000).fill(1); for (let i in myArr) < myArr[i] = myArr[i] * 2; >//займет 1151 мс for (let i of myArr) < i = i * 2; >//займет 141 мс

Нечисловые свойства

Мы уже знаем, что кроме обращения к элементам массива по индексу можно напрямую обратиться к его длине и даже изменять ее, а что будет, если прямо задать нашему массиву ключ и присвоить этому ключу значение?

const myArr = [1, 2, 3]; myArr.type = "numbers"; console.log(myArr.length); // длинна равна 3 for (let i of myArr) < console.log(i); >// в консоли будут только числовые свойства 1 2 3 for (let i in myArr) < console.log(myArr[i]); >// в консоль выведется и нечисловое свойство numbers console.log(myArr.type); // numbers myArr.push(4); //элемент с нечисловым ключем не повлияет на индексы //новых элементов массива console.log(myArr[3]); //4

Как видно из примера, не произойдет ни какой ошибки, специфичные для массивов методы и способы перебора будут просто игнорировать присвоенную нами пару ключ-значение. У массива не изменится длинна, а for. in. не проитерирует новый элемент. Казалось бы мы получили объект со всеми преимуществами массива, но без ограничений по виду ключей! Такие структуры данных называются псевдомассивами. Но на самом деле даже одно кастомное свойство ломает всю “магию” оптимизации массивов:

const myArr = new Array(10000000).fill("some value"); myArr.someKey = "some value"; myArr.push("new value");//выполнится за 28 мс

Операция добавления нового элемента в конец псевдомассива занимает больше времени, чем добавление элемента в начало настоящего массива. Интересно что цикл for…of… перебирает псевдомассивы так же быстро, как и обычные. Псевдомассивы могут найти свое применение, но только если вы точно знаете что в данной ситуации вам нужно именно такое решение, в противном случае вы получите просадку производительности.

Заключение

Давайте резюмируем что нам нужно помнить при работе с массивами JavaScript:

  • Массивы — специальный вид объектов со всеми вытекающими особенностями.
  • При копировании массива — его значение передается по ссылке, то же происходит и со вложенными в него массивами и ссылочными типами данных, поэтому для создания независимого массива его нужно клонировать специальными способами.
  • Значительно производительнее добавлять и удалять элементы в конец массива, чем в его начало или в любой другой участок.
  • Прямое указание длинны массива или лишняя запятая при перечислении элементов создадут разряженный массив, который не будет оптимален по расходу памяти и производительности.
  • Перебирать массивы быстрее с помощью цикла for…of… , чем любым другим способом.
  • Массиву можно добавить кастомное свойство, но тогда он превратится в псевдомассив и движок JavaScript не сможет так хорошо оптимизировать работу с ним.

Массивы в JavaScript

Данный тип позволяет создавать массивы пронумерованных элементов.

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

Объявление массива в JavaScript

Создание массива можно произвести с помощью конструкции следующего вида:

var имя_массива = new Array(значение1, значение2, значение3 . );\\создание массива и заполнение его значениями var имя_массива = new Array(); \\создание пустого массива 

Всем значениям массива присваивается порядковый номер (индекс). Индекс — это число по которому в любой момент можно обратиться к значению массива (элемент массива можно получить и изменить). Первому элементу массива присваивается индекс 0, второму — 1 и так далее.

Следует помнить что при использовании конструкции new Array в скобках необходимо указывать минимум два значения.

Существует еще один вариант конструкции позволяющий создать массив.

var имя_массива = [значение1, значение2, значение3, . ];

При использовании данной конструкции в квадратных скобках можно задавать как несколько значений так и одно, либо вообще пропускать значение и оставлять его неопределенным (конструкция new Array не позволяет такое сделать).

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

var mass1 = [значение1,, значение3, значение4. ]; 

В данном случае элемент массива с порядковым номером 1 будет иметь неопределенное значение.

Обращение к элементам массива

После создания массива и заполнения его элементами, в любой момент времени можно обратиться к тому или иному элементу используя его индекс. Для обращения к элементу массива необходимо указать имя массива и указать индекс элемента массива.

var myMassiv = new Array(17, 43, 78, "Hello"); vat tem = myMassiv[1]; var tem2 = myMassiv[3]; 

В нашем случае переменная tem примет значение 43, а переменная tem2 будет иметь значение «Hello». Можно отметить что массив может содержать значения различного типа, числовые, строковые и прочее. В качестве значения элемента массива может выступать и другой массив.

Присваивание значений элементам массива

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

var myMassiv = new Array(17, 43, 78, "Hello"); myMassiv[0] = 889; myMassiv[3] = 21; myMassiv[30] = 12; 

При выполнении приведенного кода будут произведены следующие изменения. Элемент со с индексом 0 примет значение 889, с индексом 3 примет значение 21 и создастся новый элемент массива с индексом 30, который будет иметь значение 12.

Длина массива

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

var myMassiv = new Array(17, 43, 78, "Hello"); var lenM = myMassiv.length // lenM будет равно 4; 

Но если мы осуществим следующее действие, то длина массива изменится

var myMassiv = new Array(17, 43, 78, "Hello"); myMassiv[22] = 45; var lenM2 = myMassiv.length; // в данном случае длина массива будет равна 23

Можно обобщить и сделать вывод:

Длина массива определяется по наибольшему индексу данного массива + 1, так как элементы нумеруются с нуля. Лучше всего при использовании массивов не перескакивать через индексы и нумеровать все элементы по порядку.

Работа с началом и концом массива

В языке JS существуют специальные методы, которые позволяют работать с началом и концом массива. Например, возникают ситуации когда необходимо получить или поместить элемент в начало или конец массива.

  • push (значение) — создает элемент в конце массива и помещает в него указанное значение;
  • pop () — возвращает значение последнего элемента массива (элемент с наибольшим индексом) и удаляет элемент этот из массива.
  • unshift (значение) — данный метод позволяет создать элемент в начале массива и помещает в него указанное значение;
  • shift () — возвращает значение первого элемента массива, удаляя его из массива.

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

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

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

var myMassiv = new Array(); // создаем обычный пустой масссив myMassiv [0] = new Array(); // присваиваем первому элементу массива значение нового массива // создание многомерного массива другим способом var myMass = [[2, 44], [99, 52]]; // мы создали двухмерный массив, элементами которого являются массивы

Чтобы обратиться к элементам многомерного массива, необходимо в отдельных квадратных скобках указать последовательно индексы всех массивов, которые в него входят.

var myMass = [[2, 44], [99, 52]]; var elem1 = myMass [0][1]; // переменная elem1 будет равна 44 

Ассоциативные массивы

Помимо обычных массивов в JS используются ассоциативные массивы. Основное отличие данного типа массивов в том что вместо индекса элемента используется ключ. Ключ в ассоциативном массиве — это строка. Ассоциативные массивы являются объектами класса Object, объявление такого типа массивов происходит следующим образом:

Имя_массива

Фигурные скобки называют инициализатором объекта.

Следует запомнить что ключ ассоциативного массива при объявлении не заключается в кавычки, а значение, которое является строкой должно быть заключено в кавычки.

myMassiv

Обращение к ассоциативному массиву происходит аналогично обращению к элементу обычного массива, с тем исключением что вместо индекса элемента (порядкового номера) указывается ключ.

myMassiv < age: 23, name: "Ivan", phonenum: "56-55-22", city: "Dubai", >var per1 = myMassiv ["name"]; \\ значение переменной per1 будет Ivan 

Массивы в JavaScript

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

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

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

const ocean1 = 'Атлантический'; const ocean2 = 'Индийский'; const ocean3 = 'Тихий'; const ocean4 = 'Северный Ледовитый'; const ocean5 = 'Южный'; // вместо них массив const oceans = ['Атлантический', 'Индийский', 'Тихий', 'Северный Ледовитый', 'Южный'];

Каждое значение в массиве имеет свой порядковый номер (индекс). Значения называются элементами. Первый элемент массива имеет индекс 0, второй – 1, третий – 2 и т.д.

На следующем рисунке показан массив, состоящий из 5 элементов: 123, 7, 50, -9, 24.

JavaScript массив и его индексы

При этом необязательно, чтобы все элементы массива имели один и тот же тип данных. Элементами могут быть любые значения – даже другие массивы. Это позволяет создавать сложные структуры данных, например, такие как массивы объектов или массивы массивов.

Создание массива

Создавать новые массивы в JavaScript можно двумя способами:

  • с использованием литерала, т.е. посредством квадратных скобок [] и перечислением в них элементов через запятую;
  • путем создания нового экземпляра класса Array .

Пример создания пустого массива:

// посредством литерала массива const arr = []; // с использованием конструктора Array() const otherArr = new Array();

Метод создания массива с помощью литерала (квадратных скобок) более предпочтителен и в большинстве случаев лучше использовать именно его.

При объявлении массива в нём можно сразу создать элементы. Для этого внутрь скобок необходимо поместить элементы, отделив их друг от друга запятой:

const numArr = [3, -5, 9, 1, 21]; // с помощью Array() // const numArr = new Array(3, -5, 9, 1, 21);

Внимание! Если конструктору Array() передать один аргумент, который является числом, то он создаст массив с указанным количеством элементов. Значения элементов при этом будут неопределёнными (пустыми):

const arr = new Array(3); // [ , , ]

При создании массивов в конец разрешается вставлять необязательную завершающую запятую:

const coffee = [ Lavazza, Nescafe, Jardin, ];

Доступ к элементам

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

Так как индексы нумеруются с 0, то для получение первого, второго и третьего элемента нужно использовать индексы 0, 1 и 2.

const colors = ['black', 'white', 'grey']; console.log( colors[0] ); // 'black' console.log( colors[1] ); // 'white' console.log( colors[2] ); // 'grey'

При попытке получить доступ к несуществующему элементу возвращается undefined :

console.log( colors[3] ); // undefined

Чтобы изменить элемент, ему нужно просто присвоить новое значение:

colors[1] = 'yellow'; // ['black', 'yellow', 'grey']

Сейчас в переменной $colors три элемента. Для добавления нового элемента в массив, можно просто присвоить нужное значение следующему индексу:

colors[3] = 'red'; // ['black', 'yellow', 'grey', 'red']

Если при добавлении элемента случайно пропустить индекс, то в массиве появится неопределенный элемент:

colors[5] = 'green'; // ['black', 'yellow', 'grey', 'red', , 'green'] console.log( colors[4] ); // undefined

Определить количество элементов в массиве можно с помощью свойства length :

console.log( colors.length ); // 6

Зная количество, получить последний элемент можно так:

const lastIndex = colors.length – 1; console.log( colors[lastIndex] ); // "green"

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

const arr = [5, {name: 'Василий', age: 35}, [7, 54, 2], true, function() { console.log('good'); }]; // получим элемент с индексом 1, который в этом примере является объектом, а затем значение его свойства age console.log(arr[1].age); // 35 // получим элемент с индексом 2, который является массивом, а затем его элемент с индексом 1 console.log(arr[2][1]); // 54 // получим элемент с индексом 4, т.е. функцию и выполним её arr[4](); // "good"

В качестве элементов массива можно использовать выражения:

const ratio = 5; const point = [3 * ration, 7 * ratio];

Массивы являются объектами

Массивы в JavaScript не являются каким-то определённым типом данных. Это объект, у которого прототипом является Array .

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

const arr = ['One', 'Two', 'Three']; console.log(typeof arr); // "object"

А так как массивы являются объектами, то при его копировании, передаётся не он сам, а ссылка на него:

const names = ['Иван', 'Вася']; const copyNames = names; copyNames[1] = 'Петр'; console.log(names); // ['Иван', 'Петр']

Создать копию массива можно следующими способами:

const names = ['Иван', 'Вася']; // клонирование массива с помощью slice const cloneNames1 = names.slice(); // с помощью оператора spread const cloneNames2 = [. names]; // с помощью Array.from const cloneNames3 = Array.from(names);

Конструктором массивов является Array :

const arr = ['One', 'Two', 'Three']; console.log(arr.constructor === Array); // true

При этом прототипом массивов является «Array.prototype»:

console.log( Object.prototype.toString.call(arr) ); // "[object Array]" console.log( Object.prototype.toString.call(Array.prototype) ); // "[object Array]"

Проверить содержит ли переменная массив можно следующим образом:

// 1 способ console.log( Array.isArray(arr) ); // true // 2 способ console.log( arr instanceof Array ); // true // 3 способ console.log( arr.constructor === Array ); // true

Перебор массива

Перебор элементов можно выполнить различными способами.

1. Использовать цикл for :

const students = ['Петя', 'Вася', 'Коля', 'Максим']; for (let i = 0, length = students.length; i < length; i++) { console.log( students[i] ); }

2. Метод forEach :

students.forEach((item) => { console.log(item); });

Этот метод является очень популярным. С помощью него можно перебрать все элементы массива и выполнить определённые действия. Методу forEach в качестве аргумента нужно передать функцию. В этом примере используется стрелочная функция. Эта функция является колбэк функцией, так как будет вызвана где-то внутри метода forEach для каждого элемента массива. В данном случае метод forEach вызовет эту функцию 4 раза и будет передавать ей в качестве аргумента значение определенного элемента массива. Получать значение аргумента будем с помощью параметра item .

for (let item of students) { console.log( item ); }

Если нужно с индексами:

const nums = ['One', 'Two', 'Three']; // 1 способ for (let i = 0, length = nums.length; i < length; i++) < console.log(`nums[$] = $`); > // 2 способ nums.forEach(function(item, index, array) { // item – элемент, index – его индекс, array – массив console.log( `nums[${index}] = ${item}` ); });

Поиск элемента в массиве

Найти элемент в массиве можно с помощью метода indexOf() :

const disks = ['500Gb', '1Tb', '2Tb']; const index = disks.indexOf('1Tb'); // 1

В качестве результата он возвращает индекс первого найденного элемента.

Если элемент не найден, то indexOf() возвращает -1 . Это можно использовать, например, чтобы проверить существует ли элемент в массиве:

const disks = ['500Gb', '1Tb', '2Tb']; if (disks.indexOf('1Tb') > -1) { console.log( 'Этот элемент в массиве есть!' ); }

Метод indexOf() позволяет искать элементы не только с начала, но и с определённого индекса. Для этого ему нужно его указать в качестве второго аргумента:

const nums = ['One', 'Two', 'One']; nums.indexOf('One', 1); // 2

Метод lastIndexOf() выполняет то же самое что indexOf() , только осуществляет это с конца:

// arr – массив, element – искомый элемент, from – индекс (по умолчанию arr.length) arr.lastIndexOf(element[, from])
const nums = ['One', 'Two', 'Three', 'One']; nums.lastIndexOf('One'); // 3 nums.lastIndexOf('Two'); // 1

Начиная с версии ECMAScript 7 появился новый метод includes() .

Он позволяет проверить содержит ли массив указанный элемент:

// arr – массив, element – искомый элемент, from – индекс (по умолчанию 0) arr.includes(element[, from])

Он похож на indexOf() , но в отличие от него возвращает true или false .

[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false

С использованием второго аргумента:

[1, 2, 3].includes(2, 1); // true [1, 2, 3].includes(2, -1); // false

При отрицательных значениях from поиск выполняется начиная с array.length + from .

В отличие от indexOf() , в котором используется строгое равенство (Strict Equality Comparison), в includes() используется алгоритм равенства SameValueZero. Это значит, что вы можете, например, определить, содержит ли массив NaN :

[1, 2, NaN].includes(NaN); // true [1, 2, NaN].indexOf(NaN); // -1

Также в отличие от indexOf() , includes() не пропускает отсутствующие элементы:

[1, , 3].includes(undefined); // true [1, , 3].indexOf(undefined); // -1

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

Удаление элемента массива с помощью delete делает его неопределённым (пустым). Длина массива при этом не изменяется.

const nums = ['One', 'Two', 'Three', 'Four', 'Five']; delete nums[2]; // ['One', 'Two', , 'Four', 'Five']

Если нужно конкретно удалить элемент из массива, то можно воспользоваться методом splice .

Пример удаления элемента массива по индексу:

const nums = ['One', 'Two', 'Three', 'Four', 'Five']; nums.splice(2, 1); // ['One', 'Two', 'Four', 'Five'] По значению это можно сделать так: const nums = ['One', 'Two', 'Three', 'Four', 'Five']; for (let i = 0; i < nums.length; i++) { if (nums[i] === 'Three') { nums.splice(i--, 1); } }

С помощью filter() :

const nums = ['One', 'Two', 'Three', 'Four', 'Five']; const result = nums.filter(value => value !== 'Three'); console.log(result); // ['One', 'Two', 'Four', 'Five']

Добавление и удаление элементов

В JavaScript для добавления и удаления элементов имеются следующие методы:

  • push() – для добавления одного или нескольких элементов в конец массива;
  • unshift() – для добавления одного или нескольких элементов в начало массива;
  • pop() – для удаления последнего элемента;
  • shift() – для удаления первого элемента.

Пример использования методов:

const planets = ['Меркурий']; // добавим в конец 2 элемента planets.push('Земля', 'Марс'); // ["Меркурий", "Земля", "Марс"] // добавим в начало 1 элемент planets.unshift('Венера'); // ["Венера", "Меркурий", "Земля", "Марс"] // удалим последний элемент planets.pop(); // ["Венера", "Меркурий", "Земля"] // удалим первый элемент planets.shift(); // ["Меркурий", "Земля"]

Методы push() и unshift() в качестве результата возвращают количество элементов в массиве, а pop и unshift - удаленный элемент:

const list = ['One']; console.log(list.push('Two', 'Three')); // 3 console.log(list.unshift('Four')); // 4 console.log(list.pop()); // "Four" console.log(list.shift()); // "One"

Функции для работы с массивами (методы объекта Array)

Объект Array содержит следующие методы (функции) для работы с массивами:

slice - копирование участка массива

Метод slice предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов.

Метод slice имеет 2 параметра:

  • 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого необходимо начать копировать элементы;
  • 2 параметр (необязательный) - предназначен для указания индекса элемента, до которого необходимо копировать (при этом он не включается в новый массив). Если его не указать, то будут скопированы элементы до конца указанного массива.
let namePlanets = ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]; let newNamePlanets = namePlanets.slice(2, 4); // ["Земля", "Марс"]

splice - изменение содержимого массива

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

Синтаксис метода splice :

array.splice(startIndex, deleteCount [, element1[, element2[, . ]]]); /* startIndex (обязательный) - стартовый индекс элемента, с которого нужно начать изменение массива. Если в качестве startIndex указать число, большее длины массива, то стартовый индекс будет установлен на конец массива. Если в качестве startIndex указать отрицательное число, то отсчет стартового элемента будет вестись с конца. deleteCount (обязательный) - число, показывающее какое количество элементов необходимо удалить из массива. Если элементы не нужно удалять из массива, то deleteCount необходимо установить 0. После этого нужно указать как минимум один новый элемент, который нужно добавить в массив. Если в качестве deleteCount указать число, которое будет превышать количество оставшихся элементов в массиве, начиная с startIndex, то в этом случае они всё равно будут удалены (т.е. все элементы до конца массива, начиная со стартового индекса) element1, element2, . (необязательные) - элементы которые нужно добавить в массив. */

Примеры использования метода splice.

Применения метода splice для удаления части элементов из массива.

let namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.splice(2, 2); //["Земля", "Марс"] console.log(namePlanets); // ["Венера", "Меркурий"]

Применение метода splice для удаления элемента из массива и добавления в него новых.

let namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.splice(1, 1, "Уран", "Нептун", "Сатурн"); // ["Меркурий"] console.log(namePlanets); // ["Венера", "Уран", "Нептун", "Сатурн", "Земля", "Марс"]

Применение метода splice только для добавления новых элементов в массив.

let namePlanets = ["Юпитер", "Сатурн", "Уран"]; namePlanets.splice(0, 0, "Венера", "Меркурий", "Земля", "Марс"); // [] console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер", "Сатурн", "Уран"]

join - преобразование массива в строку

Метод join предназначен для соединения всех элементов массива в строку.

Синтаксис метода join :

array.join([separator]); /* separator (необязательный) - разделитель, который используется в качестве соединительной строки между каждым элементом массива. Если данный параметр не указать, то в качестве соединительной строки будет использоваться ",". Если в качестве параметра указать пустую строку, то элементы массивы в возвращаемой строке между собой ничем разделены не будут */
let berries = ["Виноград", "Виноград", "Смородина", "Шиповник"]; let berriesStr1 = berries.join(); // "Виноград,Виноград,Смородина,Шиповник" let berriesStr2 = berries.join(""); // "ВиноградВиноградСмородинаШиповник" let berriesStr3 = berries.join(", "); // "Виноград, Виноград, Смородина, Шиповник" let berriesStr4 = berries.join(" + "); // "Виноград + Виноград + Смородина + Шиповник"

Если в качестве separator использовать не строку, то он будет преобразован к строке.

let berries = ["Виноград", "Виноград", "Смородина", "Шиповник"]; let berriesStr1 = berries.join(false); // "ВиноградfalseВиноградfalseСмородинаfalseШиповник" let berriesStr2 = berries.join(4/2); // "Виноград2Виноград2Смородина2Шиповник"

Элементы массива, которые имеют в качестве значения null или undefined, будут приведены к пустой строке.

let arr = [0, undefined, 5, null, -4]; let arrStr = arr.join(", "); // "0, , 5, , -4"

Преобразование строки в массив

Создание массива из строки посредством её разбивания с помощью разделителя в JavaScript осуществляется с помощью метода split() . Разделитель указывается в качестве аргумента.

const str = 'Процессоры||Материнские платы||Видеокарты'; const items = str.split('||'); // ['Процессоры', 'Материнские платы', 'Видеокарты']

Переворот массива

Перестановка элементов массива в обратном порядке осуществляется в JavaScript с помощью reverse() :

const nums = [1, 2, 3, 4, 5]; // переворачиваем массив nums.reverse(); // [5, 4, 3, 2, 1]

Сортировка элементов массива

Сортировка массива выполняется с помощью метода sort() . По умолчанию он сортирует массив в порядке следования символов в кодировке Unicode.

const auto = ['Mazda', 'Audi', 'Toyota', 'Nissan', 'Tesla']; // сортируем массив auto.sort(); // ['Audi', 'Mazda', 'Nissan', 'Tesla', 'Toyota']

В обратном порядке:

auto.sort().reverse(); // ['Toyota', 'Tesla', 'Nissan', 'Mazda', 'Audi']

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *