Массивы. Создание массива

1. Массивы

2.

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

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

• через вызов конструктора Array():
• литеральный

4. Литералы

Легче всего создать массив с помощью литерала,
который представляет собой простой список
разделенных запятыми элементов массива в
квадратных скобках. Например:
var empty = [ ]; // Пустой массив
var primes = [2, 3, 5, 7, 11]; // Массив с пятью
числовыми элементами
var misc = [ 1.1, true, "a" ]; // 3 элемента разных
типов
Значения в литерале массива не обязательно должны
быть константами – это могут быть любые
выражения:
var base = 1024;
var table = [base, base+1, base+2, base+3];

5.

Во вновь созданном массиве первое значение
литерала массива сохраняется в элементе с
индексом 0, второе значение – в элементе с
индексом 1, и т. д. Для индексов
используются 32-битные значения. Если в
литерале значение элемента опущено, будет
создан элемент с неопределенным
значением:
var count = [1,,3]; // Массив из 3 элементов,
средний элемент не определен.
var undefs = [,,]; // Массив из 3 элементов, не
определены.

6. Создание массива через вызов конструктора Array()

1 Вызов конструктора без аргументов:
var a = new Array();
В этом случае будет создан пустой массив,
эквивалентный литералу [].
2. Конструктору явно указываются значения
первых n элементов массива:
var a = new Array(5, 4, 3, 2, 1, "testing,
testing");
Свойство length (длина) массива
устанавливается равным количеству
элементов, переданных конструктору.

7.

. Создание массива с заданной
длиной.
var a = new Array(10);
Эта форма позволяет создать массив
с заданным количеством элементов
(каждый из которых имеет значение
undefined) и устанавливает свойство
length массива равным указанному
значению.
3

8. Использование метода Array.of():

4. Array.of(): добавлен в ECMAScript 6
(ES6) в 2015 году. Используется для
создания нового массива с заданным
количеством аргументов. Рекомендуется
применять, когда нужно создать массив
из элементов, переданных в качестве
аргументов.
const array = Array.of(1, 2, 3); // [1, 2, 3]

9. Использование метода Array.from()

5. Array.from(): добавлен в ECMAScript 6
(ES6) в 2015 году. Используется для
создания нового массива из
массивоподобных или итерируемых
объектов. Рекомендуется применять,
когда нужно преобразовать объекты,
такие как строки или наборы, в массив.
const str = 'hello';
const charArray = Array.from(str); // ['h', 'e',
'l', 'l', 'o']

10. Создание массива с помощью метода fill(

6. Array.prototype.fill(): добавлен в
ECMAScript 6 (ES6) в 2015 году.
Используется для заполнения всех
элементов массива статическим
значением. Рекомендуется применять,
когда нужно инициализировать массив
одинаковыми значениями.
• const filledArray = new Array(5).fill(0); //
[0, 0, 0, 0, 0]

11. Создание массива с использованием оператора расширения (spread operator)

7. Оператор расширения (spread operator):
добавлен в ECMAScript 6 (ES6) в 2015 году.
Используется для расширения итерируемых
объектов (например, массивов) в местах, где
ожидаются ноль или более аргументов.
Рекомендуется применять для объединения
массивов или создания новых массивов из
существующих.
const array1 = [1, 2];
const array2 = [3, 4];
const combined = [...array1, ...array2]; // [1, 2, 3,
4]

12. Использование метода map() для создания массива

8. Array.prototype.map(): добавлен в ECMAScript
5 (ES5) в 2009 году. Используется для создания
нового массива, заполняя его результатами
вызова функции для каждого элемента
исходного массива. Рекомендуется применять,
когда необходимо преобразовать данные в
массиве.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
// [2, 4, 6]

13. Чтение и запись элементов массива

Доступ к элементам массива осуществляется с помощью
оператора []. Внутри скобок должно находиться произвольное
выражение, имеющее неотрицательное целое значение. Этот
синтаксис пригоден как для чтения, так и для записи значения
элемента массива.
Приведенные далее JavaScript-инструкции допустимы:
value = a[0];
a[1] = 3.14;
i = 2;
a[i] = 3;
a[i + 1] = "hello";
a[a[i]] = a[0];

14.

• Массивы в JavaScript являются
динамическими, т.е.они могут
увеличиваться или уменьшаться в
размерах. Объявлять заранее
фиксированные размеры при их
создании, а также перераспределять
память при изменении размеров, как
это делается в некоторых других языках
- не нужно.
• Массивы в JavaScript являются
объектами!

15.

Массивы в JavaScript могут быть
разреженными. Это значит, что индексы
массива не обязательно принадлежат
непрерывному диапазону чисел;
Поэтому в результате выполнения следующего
фрагмента интерпретатор JavaScript скорее
всего выделит память только для элементов
массива с индексами 0 и 10000, но не
выделит ее для 9999 элементов,
находящихся между ними:
a[0] = 1;
a[10000] = "это элемент 10 000";

16. Специальное свойство length в массивах

• Свойство length возвращает количество
элементов в массиве. Оно является
динамическим, что означает, что его
значение автоматически обновляется при
добавлении или удалении элементов из
массива.
• Оно всегда на единицу больше, чем самый
большой номер элемента массива.
• Максимально возможное значение свойства
length равно 232–1, т.е. 4,294,967,295
элементов.

17.

var a = new Array(); // a.length == 0 (ни один элемент не
определен)
a = new Array(10); // a.length == 10 (определены пустые
элементы 0–9)
a = new Array(1,2,3); // a.length == 3 (определены
элементы 0–2)
a = [4, 5]; // a.length == 2 (определены элементы 0 и 1)
a[5] = -1; // a.length == 6 (определены элементы 0, 1 и 5)
a[49] = 0; // a.length == 50 (определены элементы 0, 1, 5 и
49)

18.

Наиболее часто свойство length используется для перебора
элементов массива в цикле:
var fruits = ["манго", "банан", "вишня", "персик"];
for(var i = 0; i < fruits.length; i++)
alert(fruits[i]);
Конечно, в этом примере предполагается, что элементы массива
расположены непрерывно и начинаются с элемента 0. Если это
не так, перед обращением к каждому элементу массива нужно
проверять, определен ли он:
for(var i = 0; i < fruits.length; i++)
if (fruits[i] != undefined) alert(fruits[i]);
Аналогичный подход может использоваться для инициализации
элементов массива, созданного вызовом конструктора Array():
var lookup_table = new Array(1024);
for(var i = 0; i < lookup_table.length; i++)
lookup_table[i] = i * 512;
Свойство length массива доступно как для чтения, так и для
записи.

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

• Многомерные массивы в JavaScript
представляют собой массивы,
содержащие другие массивы в качестве
своих элементов. Наиболее
распространёнными являются
двумерные массивы, которые можно
представить в виде таблицы или
матрицы. Каждый элемент двумерного
массива может быть доступен по двум
индексам: строке и столбцу. достаточно
использовать оператор [] дважды

20. Создание многомерного массива

• Для создания многомерного массива
можно использовать литерал массива.
Например, чтобы создать двумерный
массив 3x3, можно сделать следующее:
В этом примере matrix
let matrix = [
представляет собой массив,
[1, 2, 3],
содержащий три подмассива,
каждый из которых содержит три
[4, 5, 6],
элемента. Доступ к элементам
[7, 8, 9]
осуществляется через индексы:
console.log(matrix[0][0]); // 1
];
console.log(matrix[1][2]); // 6

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

Пример, в котором двухмерный массив используется в качестве
таблицы умножения:
// Создать многомерный массив
var table = new Array(10); // В таблице 10 строк
for(var i = 0; i < table.length; i++)
table[i] = new Array(10); // В каждой строке 10 столбцов
for(var row = 0; row < table.length; row++) {
for(col = 0; col < table[row].length; col++) {
table[row][col] = row*col; // Инициализация массива
}}
// Расчет произведения 5*7 с помощью многомерного массива
var product = table[5][7]; // 35

22.

Типичным примером двухмерного
массива является массив опций меню.
menu = new Array()
menu[0] = new Array ("Меню 1.1", "Меню 1.2",
"Меню 1.3")
menu[1] = new Array("Меню 2.1", "Меню 2.2 " )
menu[2] = new Array ("Меню 3.1", "Меню 3.2 ",
"Меню 3.3", "Меню 3.4")
Чтобы обратиться ко 2-й опции 3-го подменю,
следует написать:
menu[2][1] // значение равно "Меню 3.2 "

23.

Усложним нашу конструкцию, чтобы она содержала не только
названия опций подменю, но и названия опций главного меню:
menu = new Array()
/* Массив опций главного меню: */
menu[0] = new Array("Меню1", "Меню2", "МенюЗ")
menu[l] = new Array()
menu[l][0] = new Array("Меню 1.1". "Меню 1.2", "Меню 1.3")
menu[l][l] = new Array("Меню 2.1", "Меню 2 . 2 " )
menu[l][2] = new Array("Меню 3.1", "Меню 3 . 2 " , "МенюЗ.3",
"Меню 3.4")
menu[0][l] // значение равно "Меню 2"
menu[0][2] // значение равно "Меню 3"
menu[l][1][0] // значение равно "Меню 2.1"
menu[1][2][3] // значение равно "Меню 3 . 4 "

24. Методы массивов

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

25. Методы

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. slice()
7. forEach()
8. map()
9. filter()
10. reduce()
11. find()
12. indexOf()
13. includes()
14. join()
15. sort()
16. reverse()
17. concat()
18. flat()
19. fill()
20. some()
21. every()
22. keys()
23. values()
24. entries()

26.

Метод join()
Метод Array.join() преобразует все элементы массива в
строки и объединяет их.
Можно указать необязательный строковый аргумент,
предназначенный для разделения элементов в
результирующей строке. Если разделитель не задан,
используется запятая.
var a = [1, 2, 3]; // Создает новый массив с
указанными тремя элементами
var s = a.join(); // s == "1,2,3"
В следующем примере задается необязательный разделитель, что
приводит к несколько иному результату:
s = a.join(", "); // s == "1, 2, 3"
Обратите внимание на пробел после запятой.
Метод Array.join() является обратным по отношению к методу
String.split(), создающему массив путем разбиения строки на
фрагменты.

27.

Метод reverse()
Метод Array.reverse() меняет порядок следования
элементов в массиве на противоположный и
возвращает массив с переставленными элементами.
Этот метод не создает новый массив с
переупорядоченными элементами, а
переупорядочивает их в уже существующем
массиве.
Например, следующий фрагмент, где используются
методы reverse() и join(), дает в результате строку
"3,2,1":
var a = new Array(1,2,3);
// a[0] = 1, a[1] = 2, a[2] =3
a.reverse();
// теперь a[0] = 3, a[1] = 2,
a[2] = 1
var s = a.join();
// s == "3,2,1"

28.

Метод sort()
Метод Array.sort() на месте сортирует элементы
массива и возвращает отсортированный
массив. Если метод sort() вызывается без
аргументов, то он сортирует элементы
массива в алфавитном порядке(в порядке
следования символов в Unicode), путем
преобразования всего, что возможно в
строковый тип. Все, что привести к строкам
невозможно - помещается в конец массива.
var a = new Array("banana", "cherry", "apple");
a.sort();
var s = a.join(", "); // s == "apple, banana,
cherry"
Неопределенные элементы переносятся в конец массива.

29.

Для сортировки в каком-либо ином порядке, отличном
от алфавитного, можно передать методу sort() в
качестве аргумента функцию сравнения. Эта
функция устанавливает, какой из двух ее аргументов
должен присутствовать раньше в отсортированном
списке.
Если первый аргумент должен предшествовать
второму, функция сравнения возвращает
отрицательное число. Если первый аргумент в
отсортированном массиве должен следовать за
вторым, то функция возвращает число, большее
нуля.
А если два значения эквивалентны (т. е. порядок их
расположения не важен), функция сравнения
возвращает 0.

30.

Для сортировки элемента в числовом порядке, а не в
алфавитном, можно сделать следующее:
var a = [33, 4, 1111, 222];
a.sort();
// Алфавитный порядок:
“1111", “222”, “33”, “4”
a.sort(function(a,b) {
// Числовой порядок: 4, 33,
222, 1111
return a-b;
// Возвращает значение < 0, 0,
или > 0
});
// в зависимости от порядка
сортировки a и b
Обратите внимание, насколько удобно использовать в
этом фрагменте функциональный литерал. Функция
сравнения вызывается только один раз, поэтому нет
необходимости давать ей имя.

31.

Для вывода значения , отсортированного в обратном алфавитном
порядке можем воспользоваться командой:
alert(myArray.sort(function(a, b) {return b - a;}));
Однако надо отметить, что такая функция сравнения сработает
только если элементы нашего массива состоят из цифр. Если мы
хотим изменить направление сортировки для строковых
элементов, функция сравнения должна будет выглядеть чуть
иначе, например вот так:
alert(myArray.sort(function(a, b) {return b.localeCompare(a);}));
В данном случае мы использовали
метод localeCompare() объекта String, позволяющий сравнивать
объекты типа String или строковые литералы.
В качестве еще одного примера сортировки элементов массива
можно выполнить алфавитную сортировку массива строк без учета
регистра символов, передав методу функцию сравнения,
преобразующую перед сравнением оба своих аргумента в нижний
регистр (с помощью метода toLowerCase()).
Можно придумать и другие функции сортировки, сортирующие числа
в различном экзотическом порядке: обратном числовом, нечетные
числа перед четными и т. д.

32.

Метод concat()
Метод Array.concat() объединяет массив с
переданными аргументами. Исходный массив a
остается без изменений, так как concat не изменяет
оригинальный массив.
Вот несколько примеров:
var a = [1,2,3];
a.concat(4, 5) // Возвращает [1,2,3,4,5]
a.concat([4,5]); // Возвращает [1,2,3,4,5]
a.concat([4,5],[6,7]) // Возвращает [1,2,3,4,5,6,7]
a.concat(4, [5,[6,7]]) // Возвращает [1,2,3,4,5,[6,7]]

33.

Метод splice()
Метод Array.splice() – это универсальный метод для
изменения содержимого массива путем добавления,
удаления или замены элементов. Этот метод
изменяет оригинальный массив и возвращает массив
удаленных элементов.
Синтаксис
array.splice(start, deleteCount, item1, item2, ...)
1. start (обязательный): Индекс, по которому начинается
изменение массива. Если значение отрицательное, start будет
считаться от конца массива.
2. deleteCount (необязательный): Количество элементов, которые
нужно удалить из массива, начиная с индекса start. Если
deleteCount не указан, все элементы от start до конца массива
будут удалены. Если deleteCount равен 0, элементы не будут
удалены.
3. item1, item2, ... (необязательные): Элементы,
которые будут добавлены в массив, начиная с
индекса start. Если указаны элементы, они будут
вставлены в массив на место удаленных элементов.

34. Важные моменты

• Метод splice() изменяет оригинальный
массив и не создает новый.
• Возвращаемое значение — массив
удаленных элементов. Если ничего не
было удалено, возвращается пустой
массив.
• Метод может использоваться для
различных манипуляций с массивами:
удаление, добавление и замена
элементов.

35.

Метод splice() возвращает массив удаленных
элементов или (если ни один из элементов не был
удален) пустой массив. Например:
var a = [1,2,3,4,5,6,7,8];
a.splice(4); // Возвращает [5,6,7,8]; a равно [1,2,3,4]
a.splice(1,2); // Возвращает [2,3]; a равно [1,4]
a.splice(1,1); // Возвращает [4]; a равно [1]
Первые два аргумента splice() задают элементы
массива, подлежащие удалению. За этими
аргументами может следовать любое количество
дополнительных аргументов, задающих элементы,
которые будут вставлены в массив, начиная с
позиции, заданной первым аргументом.

36.

Например:
var a = [1,2,3,4,5];
a.splice(2,0,'a','b'); // Возвращает [] (пустой
массив); a равно [1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3); // Возвращает ['a','b']; a
равно [1,2,[1,2],3,3,4,5]
Обратите внимание, что, в отличие от concat(),
метод splice() не разбивает на отдельные
элементы вставляемые аргументымассивы. То есть если методу передается
массив для вставки, он вставляет сам
массив, а не элементы этого массива.

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

1. Удаление элементов
let fruits = ['apple', 'banana', 'cherry', 'date'];
let removed = fruits.splice(1, 2);
console.log(fruits); // ['apple', 'date']
console.log(removed); // ['banana', 'cherry']
2. Добавление элементов
let numbers = [1, 2, 3];
numbers.splice(1, 0, 4, 5);
console.log(numbers); // [1, 4, 5, 2, 3]

38.

Методы push() и pop()
Методы push() и pop() позволяют работать с
массивами как со стеками.
Метод push() добавляет один или несколько
новых элементов в конец массива и
возвращает его новую длину.
Метод pop() выполняет обратную операцию –
удаляет последний элемент массива,
уменьшает длину массива и возвращает
удаленное им значение.
Обратите внимание: оба эти метода изменяют
массив на месте, а не создают его
модифицированную копию.

39.

Комбинация push() и pop() позволяет в
JavaScript с помощью массива реализовать
стек с дисциплиной обслуживания «первым
вошел – последним вышел». Например:
var stack = []; // стек: []
stack.push(1,2); // стек: [1,2] Возвращает 2
stack.pop();
// стек: [1] Возвращает 2
stack.push(3); // стек: [1,3] Возвращает 2
stack.pop();
// стек: [1] Возвращает 3
stack.push([4,5]); // стек: [1,[4,5]] Возвращает 2
stack.pop()
// стек: [1] Возвращает [4,5]
stack.pop();
// стек: [] Возвращает 1

40.

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

41.

Например:
var a = [];
// a:[]
a.unshift(1);
// a:[1] Возвращает: 1
a.unshift(22);
// a:[22,1] Возвращает: 2
a.shift();
// a:[1] Возвращает: 22
a.unshift(3,[4,5]);
// a:[3,[4,5],1] Возвращает: 3
a.shift();
// a:[[4,5],1] Возвращает: 3
a.shift();
// a:[1] Возвращает: [4,5]
a.shift();
// a:[] Возвращает: 1
Обратите внимание на поведение метода unshift() при
вызове с несколькими аргументами. Аргументы
вставляются не по одному, а все сразу (как в случае
с методом splice()). Это значит, что в
результирующем массиве они будут следовать в том
же порядке, в котором были указаны в списке
аргументов.

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

Удалить элемент массива можно с помощью оператора delete,
как обычное свойство.
delete myArray[2]; // значение 3-го элемента массива будет
установлено в undefined, т.е. очищено, однако количество
элементов в массиве не изменится, все остальные элементы
останутся на своих местах.
Для удаления элементов в конце массива можно прекрасно
воспользоваться командой установки длины массива изменение свойства length, например
myArray.length = 4;
Также удалить элемент в конце массива можно с помощью
метода pop() (противоположного методу push), который уменьшает
длину массива на 1 и возвращает значение удаленного элемента.
Также есть метод shift() (противоположный методу unshift)
который удаляет элемент в начале массива и сдвигает все элементы
на 1 позицию в начало.

43.

Методы toString() и toLocaleString()
У массива, как и у любого другого объекта в JavaScript,
имеется метод toString().
Для массива этот метод преобразует каждый из его
элементов в строку и выводит список этих строк
через запятую. Например:
[1,2,3].toString()
// Получается '1,2,3'
["a", "b", "c"].toString() // Получается 'a,b,c'
[1, [2,'c']].toString()
// Получается '1,2,c'
Обратите внимание: toString() возвращает ту же
строку, что и метод join() при вызове его без
аргументов.
Метод toLocaleString() – это локализованная версия
toString(). Каждый элемент массива преобразуется в
строку вызовом метода toLocaleString() элемента, а
затем результирующие строки конкатенируются с
использованием специфического для региона (и
определенного реализацией) разделителя.