Объект Array. Работа с массивами

Последнее обновление: 25.07.2021

Объект 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"]

Еще один способ инициализации массивов представляет метод Array.of() - он принимает элементы и инициизирует ими массив:

const people = Array.of("Tom", "Bob", "Sam");
console.log(people); // ["Tom", "Bob", "Sam"]

Можно определить массив и по ходу определять в него новые элементы:

const users = [];
users[1] = "Tom";
users[2] = "Kate";
console.log(users[1]); // "Tom"
console.log(users[0]); // undefined

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

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.

Копирование массива. slice()

Копирование массива может быть поверхностным или неглубоким (shallow copy) и глубоким (deep copy).

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

const users = ["Tom", "Sam", "Bill"];
console.log(users);		//	["Tom", "Sam", "Bill"]
const people = users;		//	неглубокое копирование

people[1] = "Mike";		//	изменяем второй элемент
console.log(users);		//	["Tom", "Mike", "Bill"]

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

Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае можно использовать глубокое копирование с помощью метода slice():

const users = ["Tom", "Sam", "Bill"];
console.log(users);				//	["Tom", "Sam", "Bill"]
const people = users.slice();		//	глубокое копирование

people[1] = "Mike";				//	изменяем второй элемент
console.log(users);				//	["Tom", "Sam", "Bill"]
console.log(people);			//	["Tom", "Mike", "Bill"]

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

Также метод slice() позволяет скопировать часть массива. Для этого он принимает два параметра:

slice(начальный_индекс, конечный_индекс)

Первый параметр указывает на начальный индекс элемента, с которого которые используются для выборки значений из массива. А второй параметр - конечный индекс, по который надо выполнить копирование.

Например, выберем в новый массив элементы, начиная с 1 индекса по индекс 4 не включая:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(1, 4);
console.log(people);		// ["Sam", "Bill", "Alice"]

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

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

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(2);  // со второго индекса до конца
console.log(people);		// ["Bill", "Alice", "Kate"]

push()

Метод push() добавляет элемент в конец массива:

const people = [];
people.push("Tom");
people.push("Sam");
people.push("Bob","Mike");

console.log("В массиве people элементов: ", people.length);
console.log(people); // ["Tom", "Sam", "Bob", "Mike"]

pop()

Метод pop() удаляет последний элемент из массива:

const people = ["Tom", "Sam", "Bob", "Mike"];

const lastPerson = people.pop(); // извлекаем из массива последний элемент
console.log(lastPerson );	// Mike
console.log(people);	// ["Tom", "Sam", "Bob"]

shift()

Метод shift() извлекает и удаляет первый элемент из массива:

const people = ["Tom", "Sam", "Bob", "Mike"];

const firstPerson = people.shift(); // извлекаем из массива первый элемент
console.log(firstPerson);	// Tom
console.log(people);	// ["Sam", "Bob", "Mike"]

unshift()

Метод unshift() добавляет новый элемент в начало массива:

const people = ["Tom", "Sam", "Bob"];

people.unshift("Alice");
console.log(people);	// ["Alice", "Tom", "Sam", "Bob"]

Удаление элемента по индексу. splice()

Метод splice() удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(3);
console.log(deleted);       // [ "Alice", "Kate" ]
console.log(people);         // [ "Tom", "Sam", "Bill" ]

Метод splice возвращает удаленные элементы в виде нового массива.

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

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(-1);
console.log(deleted);       // [ "Kate" ]
console.log(people);         // ["Tom", "Sam", "Bill", "Alice"]

Дополнительная версия метода позволяет задать количество элементов для удаления. Например, удалим с первого индекса три элемента:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(1, 3);
console.log(deleted);       // ["Sam", "Bill", "Alice"]
console.log(people);         // ["Tom", "Kate"]

Еще одна версия метода splice позволяет вставить вместо удаляемых элементов новые элементы:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(1, 3, "Ann", "Bob");
console.log(deleted);       // ["Sam", "Bill", "Alice"]
console.log(people);         // ["Tom", "Ann", "Bob", "Kate"]

В данном случае удаляем три элемента с 1-го индекса и вместо них вставляем два элемента.

concat()

Метод concat() служит для объединения массивов. В качестве результата он возвращает объединенный массив:

const men = ["Tom", "Sam", "Bob"];
const women = ["Alice", "Kate"];
const people = men.concat(women);
console.log(people);         // ["Tom", "Sam", "Bob", "Alice", "Kate"]

join()

Метод join() объединяет все элементы массива в одну строку, используя определенный разделитель, который передается через параметр:

const people = ["Tom", "Sam", "Bob"];

const peopleToString = people.join("; ");
console.log(peopleToString);         // Tom; Sam; Bob

В метод join() передается разделитель между элементами массива. В данном случае в качестве разделителя будет использоваться точка с запятой и пробел ("; ").

sort()

Метод sort() сортирует массив по возрастанию:

const people = ["Tom", "Sam", "Bob"];

people.sort();
console.log(people);         // ["Bob", "Sam", "Tom"]

Стоит отметить, что по умолчанию метод sort() рассматривает элементы массива как строки и сортирует их в алфавитном порядке. Что может привести к неожиданным результатам, например:

const numbers = [200, 15, 5, 35];

numbers.sort();
console.log(numbers);         // [15, 200, 35, 5]

Здесь мы хотим отсортировать массив чисел, но результат может нас обескуражить: [15, 200, 35, 5]. В этом случае мы можем настроить метод, передав в него функцию сортировки. Логику функции сортировки мыы определяем сами:

const numbers = [200, 15, 5, 35];

numbers.sort( (a, b) =>  a - b);
console.log(numbers);         // [5, 15, 35, 200]

Функция сортировки получает два рядом расположенных элемента массива. Она возвращает положительное число, если первый элемент должен находится перед вторым элементом. Если первый элемент должен располагаться после второго, то возвращается отрицательное число. Если элементы равны, возвращается 0.

reverse()

Метод reverse() переворачивает массив задом наперед:

const people = ["Tom", "Sam", "Bob"];

people.reverse();
console.log(people);         // ["Bob", "Sam", "Tom"]

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

Методы indexOf() и lastIndexOf() возвращают индекс первого и последнего включения элемента в массиве. Например:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];

const firstIndex = people.indexOf("Tom");
const lastIndex = people.lastIndexOf("Tom");
const otherIndex = people.indexOf("Mike");
console.log(firstIndex); // 0
console.log(lastIndex);  // 3
console.log(otherIndex); // -1

firstIndex имеет значение 0, так как первое включение строки "Tom" в массиве приходится на индекс 0, а последнее на индекс 3.

Если же элемент отсутствует в массиве, то в этом случае методы indexOf() и lastIndexOf() возвращают значение -1.

every()

Метод every() проверяет, все ли элементы соответствуют определенному условию:

const numbers = [ 1, -12, 8, -4, 25, 42 ];
const passed = numbers.every(n => n > 0);
console.log(passed); // false

В метод every() в качестве параметра передается функция, которая представляет условие. Эта функция в качестве параметра принимает элемент и возвращает true (если элемент соответствует условию) или false (если не соответствует).

Если хотя бы один элемент не соответствует условию, то метод every() возвращает значение false.

В данном случае условие задается с помощью лямбда-выражения n => n > 0, которое проверяет, больше ли элемент нуля.

some()

Метод some() похож на метод every(), только он проверяет, соответствует ли хотя бы один элемент условию. И в этом случае метод some() возвращает true. Если элементов, соответствующих условию, в массиве нет, то возвращается значение false:

const numbers = [ 1, -12, 8, -4, 25, 42 ];
const passed = numbers.some(n => n > 0);
console.log(passed); // true

filter()

Метод filter(), как some() и every(), принимает функцию условия. Но при этом возвращает массив тех элементов, которые соответствуют этому условию:

const numbers = [ 1, -12, 8, -4, 25, 42 ];
const filteredNumbers = numbers.filter(n => n > 0);
console.log(filteredNumbers); // [1, 8, 25, 42]

forEach() и map()

Методы forEach() и map() осуществляют перебор элементов и выполняют с ними определенный операции. Например, используем метод метода forEach() для вычисления квадратов чисел в массиве:

const numbers = [ 1, 2, 3, 4, 5, 6];

numbers.forEach(n => 
	console.log("Квадрат числа", n, "равен", n * n )
);

Метод forEach() в качестве параметра принимает функцию, которая имеет один ппараметр - текущий перебираемый элемент массива. А в теле функции над этим элементом можно выполнить различные операции.

Консольный вывод программы:

Квадрат числа 1 равен 1
Квадрат числа 2 равен 4
Квадрат числа 3 равен 9
Квадрат числа 4 равен 16
Квадрат числа 5 равен 25
Квадрат числа 6 равен 36

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

Например, применим метод map к вычислению квадратов чисел массива:

const numbers = [ 1, 2, 3, 4, 5, 6];

const squares = numbers.map(n => n * n);
console.log(squares);	//  [1, 4, 9, 16, 25, 36]

Функция, которая передается в метод map() получает текущий перебираемый элемент, выполняет над ним операции и возвращает некоторое значение. Это значение затем попадает в результирующий массив squares

Поиск в массиве

Метод find() возвращает первый элемент массива, который соответствует некоторому условию. В качестве параметр метод find принимает функцию условия:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];

// получаем первый элемент, который больше 10
let found = numbers.find(n => n > 10 );
console.log(found);	// 13

В данном случае получаем первый элемент, который больше 10. Если элемент, соответствующий условию, не найден, то возвращается undefined.

Метод findIndex также принимает функцию условия, только возвращает индекс первого элемента массива, который соответствует этому условию:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];

// получаем индекс первого элемента, который больше 10
let foundIndex = numbers.findIndex(n => n > 10 );
console.log(foundIndex);	// 5

Если элемент не найден, то возвращается число -1.

Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850