Массивы

Создание массива и объект Array

Для хранения набора данных в языке 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({length:3}, (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({length:3, "0": "Tom", "1": "Sam", "2": "Bob"}, (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<users.length;i++)
	console.log(users[i]);

Вывод браузера:

Tom
Kate
undefined
undefined
Sam

Несмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined.