Главная » Массивы и псевдомассивы

Массивы и псевдомассивы


12.03.2021, 17:45
Массивы

Массив - упорядоченная нетипизированная коллекция значений (элементов), где каждое из них имеет свою числовую позицию (индекс).

Элементы массива могут относиться к любому типу, в том числе быть объектами и массивами (массивы объектов и массивы массивов).

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

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

Для массивов характерно возможное наличие брешей, так как элементы не обязаны иметь смежные индексы. Такие массивы называются разреженными.

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

Массивы - это специализированная форма объектов, где в качестве имен свойств объекта выступают индексы элементов.

Массивы наследуют свойства от Array.prototype

В ES6 был введён набор новых классов типа массивов (типизированные массивы), имеющих фиксированную длину и числовой тип элементов.

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

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

- с помощью литералов типа массивов;

- с помощью операции распространения . . . на итерируемом объекте;

- с помощью конструктора Array();

- с помощью методов Array.of() и Array.from()

Литерал типа массива представляет собой список элементов массива, разделённых между собой запятыми, который заключён в квадратные скобки:

Код

let writers = ['Тургенев', 'Гоголь', 'Толстой', 'Достоевский'];

Код

let empty = []; /* пустой массив */
let numbersList = [3, 5, 7, 9]; /* массив из чисел */
let multi = [3, 'один', true]; // массив из различных типов данных

Элементами массива могут быть и произвольные выражения:

Код

let a = 10;
let arr = [a + 1, a + 2, a + 3];

А также массивы и объекты:

Код

let arr = [ [2, 4, 6, 8, {a: 1, b: 2}], {x: 2, y: 4}];

Пример разреженного массива:

Код

let count = [1, , 3]; // элементы имеют индексы 0 и 2, элемент с индексом 1 отсутствует

Массив, не содержащий элементов, с длиной 2 (т.к. допустимо наличие хвостовой запятой):

Код

let count = [ , , ]; // элементы массива не существуют, но при их запросе получим undefined

Операция распространения

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

Код

let a = [1, 2, 3, 4];
let b = [0, ...a, 5]; // => b == [0, 1, 2, 3, 4, 5]

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

Код

let a = [1, 2, 3];
let copy = [...a]; // => [1, 2, 3]

При этом изменения в копии не отражаются на оригинальном массиве:

Код

let a = [1, 2, 3];
let copy = [...a]; /* => [1, 2, 3] */

copy[0] = 0;

console.log(a); /* => [1, 2, 3] */
console.log(copy); // => [0, 2, 3]

Операция распространения работает с любым итерируемым объектом.

Итерируемые объекты - это объекты, по которым выполняет проход цикл for/of

Таким образом можно превратить строку в массив из односимвольных строк:

Код

let arr = [..."ARRAY"];
console.log(arr); // => [ 'A', 'R', 'R', 'A', 'Y' ]

Конструктор Array()

Ещё один метод создания массивов - использовать конструктор Array(), вызвать его можно разными способами.

без аргументов (создастся пустой массив):

Код

let arr = new Array(); // => эквивалент []

с одиночным числовым аргументом (создаст массив указанной аргументом длины):

Код

let arr = new Array(5);

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

Код

let arr = new Array('Вася', 'Маша', 2, 3); // => аналогично ['Вася', 'Маша', 2, 3]

Метод Array.of() (ES6)

Для понимания разницы между Array() и Array.of() зададим им одинаковый аргумент, число 5:

Код

let a = new Array(5); /* => создаст массив с 5 пустыми слотами */

let b = Array.of(5); // => создаст массив с единственным числовым элементом => [5]

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

Поэтому с помощью конструктора Array() невозможно создать массив с одним числовым элементом.

Метод Array.of() в версии ES6 решил эту проблему:

Код

let a = Array.of(); /* вернет пустой массив [] */
let b = Array.of(5); /* вернет [5] */
let c = Array.of(1, 2, 3); // => вернёт [1, 2, 3]

Метод Array.from() (ES6)

Этот метод в качестве аргумента принимает итерируемый, либо массивоподобный объект и возвращает новый массив, содержащий элементы переданного в аргумент объекта.

Так, например, можно получить копию массива:

Код

let original = [1, 2, 3];

let copy = Array.from(original);

console.log(copy); // => [ 1, 2, 3 ]

В данном случае Array.from(original) работает подобно операции распространения [...original].

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

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

Доступ к элементам массива осуществляется с помощью квадратных скобок:

Код

let arr = [1, 2, 3, 4, 5];

console.log(arr[1]); // => 2

Перезаписать значение элемента:

Код

let arr = [1, 2, 3, 4, 5];

arr[0] = 'one';

console.log(arr); // => [ 'one', 2, 3, 4, 5 ]

Добавить элемент в массив по индексу:

Код

let arr = [1, 2, 3, 4, 5];

arr[5] = 6;

console.log(arr); // => [ 1, 2, 3, 4, 5, 6 ]

Разреженные массивы

Это массивы, в которых элементы не имеют непрерывных индексов, начинающихся с 0.

У разреженного массива значение свойства length будет больше количества элементов.

Создать разреженный массив можно:

- с помощью конструктора Array() :

Код

let a = new Array(5); // => элементов нет, но a.length равно 5

- добавлением элемента с индексом, большим текущего значения свойства length массива

Код

let arr = [1, 2, 3, 4, 5];  

console.log(arr.length); /* => 5 */

arr[1000] = 0;

console.log(arr.length); // => длина массива стала равной 1001

В случае пропуска значения в литерале массива конечный массив будет разреженным:

Код

let arr = [,]; /* длина массива равна 1 */

let nextArray = [1, , 3]; // => длина массива равна 3

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

Длина неразреженного массива равна числу его элементов и её значение всегда на единицу больше самого высокого индекса массива.

Код

let arr = [];
arr.length; // => 0 , пустой массив без элементов

Код

let names = ['Alex', 'Micle', 'John'];  
names.length; // => 3 (самый высокий индекс у элемента 'John', равен 2)

Индекс элемента массива не может иметь значение большее или равное значению свойства length

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

Если установить значение n свойства length меньшим текущего, то из массива удалятся все элементы, чьи индексы больше или равны n

Код

let numbers = [1, 2, 3, 4, 5];

numbers.length = 3; /* Устанавливаем новую длину массива */

console.log(numbers); // => [ 1, 2, 3 ]


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

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

- присваиванием значений по новым индексам

Код

let arr = []; /* создали пустой массив */

arr[0] = 1; /* добавили первый элемент массива */
arr[1] = 4; /* добавили второй элемент массива */

console.log(arr); // => [ 1, 4 ]

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

Код

let arr = [1, 2, 3];

arr.push(4);
arr.push(5,6);

console.log(arr); // => [ 1, 2, 3, 4, 5, 6 ]

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

Код

let arr = [1, 2, 3];

arr.unshift(0);

console.log(arr); // => [ 0, 1, 2, 3 ]

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

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

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

С помощью операции delete также можно удалять элементы массива, при этом длина массива не изменяется, а сам массив становится разреженным:

Код

let arr = [1, 2, 3];

delete arr[1];

console.log(arr.length); /* => 3 */
console.log(arr); // => [ 1, <1 empty item>, 3 ]  

Итерация по массивам

Начиная с ES6, наиболее легкий способ перебора массива - использование цикла for/of.

Код

for(let element of arr) {
  исполняемый код
}

здесь element - каждый из перебираемых элементов массива
arr - перебираемый массив

Пример:

Код

let arr = [1, 2, 3, 4, 5];

for(let num of arr) {
  console.log('Элемент ' + num);
}


Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5

Массивы можно перебирать также с помощью метода forEach, синтаксис данного метода:

Код

arr.forEach( function(elem, i, mass) {
  исполняемый код
});

здесь
arr - имя массива
elem - каждый элемент массива
i - индекс элемента массива
mass- сам массив

Пример:

Код

let fruit = ['Ананас','Банан','Виноград'];

fruit.forEach(function(elem, i, arr) {
  console.log('Элемент №' + (i + 1) + ' ' + elem + ' принадлежит массиву ' + arr);
});


Элемент №1 Ананас принадлежит массиву Ананас,Банан,Виноград
Элемент №2 Банан принадлежит массиву Ананас,Банан,Виноград
Элемент №3 Виноград принадлежит массиву Ананас,Банан,Виноград

Еще пример:

Код

let letters = [..."Hello, World"];

let every = '';

letters.forEach(function(i) {
  every = every + i.toUpperCase();
});

console.log(every); // => HELLO, WORLD

Метод forEach не предполагает использования какого-то завершения итерации, в нём не предусмотрено никакого эквивалента оператора break как в обычном цикле for

И конечно же, перебор массива с помощью цикла for

Код

let arr = ['Alex','John','Ivan','Bob'];

for (let i = 0; i < arr.length; i++) {
  console.log('Пользователь ' + arr[i] + ' покинул чат');
}


Пользователь Alex покинул чат
Пользователь John покинул чат
Пользователь Ivan покинул чат
Пользователь Bob покинул чат

Методы split(), join() и sort()

Метод split(s) - превращает строку в массив, здесь s - разделитель

К примеру, ответ от пользователя мы получаем в виде строки, которую затем преобразуем в массив:

Код

const answer = prompt('Перечислите через запятую ваши любимые блюда', '');

const arr = answer.split(',');

console.log(arr); // => в консоли браузера!


0: "шашлык"
1: "суп"
2: "щи"
3: "борщ"

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

Код

let writers = ['Тургенев','Дюма','Сенкевич'];

console.log(writers.join('; ')); // => Тургенев; Дюма; Сенкевич

Метод sort() сортирует в алфавитном порядке элементы массива, преобразуя их в строки

Код

let writers = ['Тургенев','Дюма','Сенкевич'];

writers.sort();

console.log(writers); // => [ 'Дюма', 'Сенкевич', 'Тургенев' ]

Если вызвать метод sort() без аргументов для массива из чисел, то они также отсортируются как строки:

Код

let numbers = [2, 12, 8, 23, 3, 14];

numbers.sort();

console.log(numbers); // => [ 12, 14, 2, 23, 3, 8 ]

Чтобы провести сортировку в обычном числовом порядке, необходимо методу sort() передать функцию сравнения в виде аргумента:

Код

let numbers = [2, 12, 8, 23, 3, 14];

function compareNum(a,b) {
  return a - b;
}

numbers.sort(compareNum);

console.log(numbers); // => [ 2, 3, 8, 12, 14, 23 ]

Можно сделать обратную сортировку:

Код

let numbers = [2, 12, 8, 23, 3, 14];

function compareNum(a,b) {
  return b - a;
}

numbers.sort(compareNum);

console.log(numbers); // => [ 23, 14, 12, 8, 3, 2 ]

Или тоже самое, но в более короткой записи:

Код

let numbers = [2, 12, 8, 23, 3, 14];

numbers.sort((a,b) => b - a);

console.log(numbers); // => [ 23, 14, 12, 8, 3, 2 ]

Псевдомассивы

Это объекты, структура которых похожа на структуру массива и хранит данные по порядку, при этом псевдомассивы не имеют никаких методов, а есть числовые свойства (индексы элементов) и свойство length.

КОММЕНТАРИИ (0)