Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 11. Массивы и массивоподобные объекты в JavaScript

Содержание курса

Массивы

Массивы представляют собой упорядоченные коллекции значений (в отличии от объектов, которые представляют собой просто коллекции значений.).

Массивы могут быть "статическими" - заданными литералом через синтаксис квадратных скобок или вызовом конструктора Array.

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

var arr = new Array();
arr[0] = "Элемент 1";
arr[1] = "Элемент 2";
arr[2] = "Элемент 3";

alert(arr[2]);
alert("Число элементов: " + arr.length);

Квадратные скобки в JS [] - это постфиксный оператор индексирования.

Массивы могут быть также динамическими, т.е. конструироваться в результате работы различных функций, таких как метод split или метод map или просто добавления элементов методом push.

В отличие от строк, массивы являются мутабельными, т.е. изменяемыми.

Сравнение массивов в JS происходит по ссылке, т.е. сравнение a==b вернёт true только если в переменных a и b находятся ссылки на один и тот же массив.

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

Метод split

split - возвращает новый массив.

Синтаксис метода: var arr = string.split('separator', limit); где -

string - исходная строка
separator - регулярное выражение или строка, по которой будет делиться исходная строка string
limit - задаёт маскимальное количество кусков, на которые может быть разбита исходная строка

В следующем примере мы создаём массив из строки "1, 2, 3, 4, 5". В методе split укажем деление строки на куски по знаку запятая и лимитом укажем только три куска - остальные куски в этом случае будут отброшены:

	"1, 2, 3, 4, 5".split(',', 3);
	
	/* получим массив, состоящий из трёх элементов - (3) ["1", "2", "3"] */
	

Результат отображения в консоли браузера (ctrl+shift+i):


Метод join

Метод join - осуществляет обратное действие - склеивает все элементы массива в одну строку.

Синтаксис метода: arr.join('glue'); где -

arr - массив, из всех элементов которого будет склеена строка
glue - строковый аргумент, при помощи которого будут соединены в строку все элементы массива. Если этот аргумент не задан, будет использована запятая.

Рассмотрим пример - вначале создадим массив "arr" при помощи метода split, а затем проделаем с ним обратную операцию - склеим строку из элементов этого массива, указав в качестве строкового аргумента метода join знак плюса:

/* создаём массив arr */
var arr = "1,2,3,4,5".split(',', 3);

/* создаём строку из массива arr */
arr.join('+');

/* "1+2+3" */

Метод push

push - добавляет новые элементы в массив.

Синтаксис метода: array.push(elem1, elem2, ...); где -

array - исходный массив, к которому будет применён метод push
elem1, elem2 - элементы, которые будут добавлены в коней массива

В следующем примере мы создадим массив из трёх элементов при помощи постфиксного оператора индексирования [], а затем добавим в этот массив ещё два элемента, используя метод push:

/* Создаём массив */
var array = ["Яблоко", "Апельсин", "Гранат"];

/* Добавляем два новых элемента в массив array */
array.push("Груша", "Лимон");

console.log(array);

Результат отображения в консоли браузера:


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

/* Создаём массив */
var array = ["Яблоко", "Апельсин", "Гранат"];

/* Добавляем два новых элемента в массив array */
array.push("Груша", "Лимон");

/* Выводим в консоль 4-ый элемент массива */
console.log(array[4]);

/* Выведет: "Лимон" (отсчёт ведётся от 0) */

Метод reverse

Метод reverse() выводит массив в обратном порядке. Такой метод будет полезен, например, при выводе комментариев на сайте, когда требуется, чтобы самый последний комментарий (самый новый) в массиве выводился первым, а первый (самый старый) - последним:

var arr = ["Коммент 1", "Коммент 2", "Коммент 3", "Коммент 4", "Коммент 5"];

console.log(arr.reverse());

/* Выведет:
(5) ["Коммент 5", "Коммент 4", "Коммент 3", "Коммент 2", "Коммент 1"]*/

Метод sort

Метод sort() выполняет сортировку строк в массиве в алфавитном порядке. Для чисел он непригоден:

var arr = ["Яблоко", "Вишня", "Банан", "Апельсин", "Гранат", "Дыня", "Мандарин"];

console.log(arr.sort());

/* Выведет:
(7) ["Апельсин", "Банан", "Вишня", "Гранат", "Дыня", "Мандарин", "Яблоко"]*/

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

var arr = [6, 4, 12, 34, 5, 6, 67, 9, 0, 55, 82, 56, 74, 23];

function compareNumbers(n1, n2){
	if (n1 == n2) {return 0;};
	if (n1 > n2) {
		return 1;} else return -1;
}

console.log(arr.sort(compareNumbers));

/* Выведет:
(14) [0, 4, 5, 6, 6, 9, 12, 23, 34, 55, 56, 67, 74, 82]*/

для сортировки чисел в обратном порядке поменяйте 1 и -1 местами в функции compareNumbers. Управляя функцией compareNumbers вы можете вообще осуществить сортировку так, как считаете нужным.

Метод push

Метод push() добавляет новый элемент существующему массиву:

var arr = ["один", "два", "три"];

arr.push("четыре");
arr.push(5);

console.log(arr);

/* Выведет:
(5) ["один", "два", "три", "четыре", 5]*/

Массивоподобные объекты (сущности)

Есть сущности, которые ведут себя как массивы, но, в то же время сильно от них отличаются. Первым примером такого объекта приходит на ум arguments, доступный внутри функции.

А корневое отличие состоит в следующем: если внутри функции уменьшить значение arguments.length, то само это свойство изменится, а элементы этого массивоподобного объекта - нет. Если же уменьшить значение свойства length массива, то он будет реально обрезан. Кроме того, у массивоподобных объектов нет методов, которые есть у настоящих массивов.

Интерфейсы HTMLCollection и NodeList также являются такими массивоподобными сущностями. Когда мы пишем

var elems = document.querySelectorAll('li');

то мы получаем именно такой массивоподобный объект, у которого также есть индексы, по которым можно обратиться к конкретному элементу, есть свойство length - количество элементов и метод item.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля