Далее на странице...
- Методы добавления и удаления элементов из массива
- Методы shift и unshift
- Перебор элементов массива - Цикл for
- Перебор элементов массива - Конструкция for-of
- Перебор массива - Метод forEach()
- Другие методы перебора - Модификация массива
- Метод split - Массив из частей строки
- Метод join - Объединение элементов массива в строку
- Метод sort - Сортировка элементов массива
- Псевдомассивы в JavaScript
Продолжается тема массивов в JavaScript. О них уже шла речь здесь. Здесь же немного будет сказано о псевдомассивах – в конце статьи.
Массивы могут содержать любы типы данных: строки, числа, функции. Бывают смешанные массивы.
У массивов есть свойства (например, свойство length) и методы. Здесь будут рассмотрены основные методы, которые используются для работы с массивами.
Для получения всей информации можно обратиться к документации о массивах, а также использовать консольную команду console.dir(Array).
Методы добавления и удаления элементов из массива
Добавление элементов в массив:
- добавление в начало массива - метод unshift;
- добавление в конец массива - метод push.
Удаление элементов из массива:
- удаление первого элемента - метод shift;
- удаление последнего элемента - метод pop.
Методы shift и unshift
Методы shift и unshift в реальной практике (когда ведется работа с большими массивами - несколько тысяч элементов) используются не часто.
Ведь при удалении первого элемента из массива (метод shift) или при добавлении элемента в начало массива (метод unshift) меняется индекс (порядковый номер) всех остальных элементов массива. И в том случае, если массив большой, то эта операции может занять много времени.
Перебор элементов массива - Цикл for
Для перебора элементов массива используется цикл.
Пример 1.1
const arr = [2, 4, 7, 10, 5];
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
Результат
2
4
7
10
5
Пока переменная i (счетчик цикла) меньше числа элементов массива arr.length --> выполняется действие (в данном случае вывод элементов массива в консоль).
Перебор элементов массива - Конструкция for-of
Помимо цикла, для перебора элементов массива используется конструкция for-of.
Пример 2.1
const arr = [2, 4, 7, 10, 5];
for(let value of arr){
console.log(value);
}
Результат
2
4
7
10
5
В переменную value (произвольное название) поочередно будут записываться значения элементов массива. Результат тот же, что и в примере 1.1.
Конструкция for of - работает как цикл, но это НЕ цикл. Это метод перебора.
Перебор массива - Метод forEach()
Метод forEach() используется для перебора массива.
Метод forEach() дает больше возможностей, чем использование циклов или конструкция for-of.
Как работает метод forEach() - он принимает в качестве своего параметра callback-функцию, которая будет выполняться для каждого элемента массива.
Callback-функция для метода forEach() может принимать 3 аргумента:
callback(item, i, arr).
- item - элемент массива (item - не обязательное имя аргумента);
- i - номер (индекс) элемента массива;
- arr - массив, который перебирается.
Напомним, что callback-функция выполняется строго после определенных действий. И в данном случае она выполняется после метода forEach().
Пример 3.1
const arr = [2, 4, 7, 10, 5];
arr.forEach(function(item, i, arr){
console.log(`${i}: значение ${item} внутри массива ${arr} `);
});
Результат
0: значение 2 внутри массива 2,4,7,10,5
1: значение 4 внутри массива 2,4,7,10,5
2: значение 7 внутри массива 2,4,7,10,5
3: значение 10 внутри массива 2,4,7,10,5
4: значение 5 внутри массива 2,4,7,10,5
Вот такой интересный результат получился в результате перебора массива при помощи метода forEach().
На практике для перебора массива в основном используется метод forEach(), но у конструкции for of есть одна возможность, которой нет у метода forEach().
Конструкция for of допускает использование ключевых слов break и continue, чтобы полностью или частично прервать цикл.
Другие методы перебора - Модификация массива
Помимо конструкции for of и метода forEach() существуют и другие методы перебора массивов, но они кроме этого модифицируют массив.
Например метод filter() занимается фильтрацией массива по заданным параметрам: у него есть возможность оставить в массиве только четные числа или только строки.
Ниже на иллюстрации приведены все методы перебора массивов (они будут рассматриваться в дальнейшем). Из них все, кроме метода forEach() не только перебирают но и занимаются трансформацией массивов.
Далее будут рассмотрены еще три метода, которые часто используются при работе с массивами.
Метод split - Массив из частей строки
Метод split возвращает массив из частей строки.
В качестве параметра метода split указывается разделитель - это символ, как правило, присутствующий в строке.
При этом строка разбивается на части (элементы массива) по указанному разделителю.
let str = "one two three four five six"; // Исходная строка
let strSplit = str.split(" "); /* разделитель строки - пробел */
console.log(strSplit);
strSplit = str.split("t"); /* разделитель строки - t */
console.log(strSplit);
strSplit = str.split(")"); /* разделитель ) - НЕ существующий в строке символ */
console.log(strSplit);
strSplit = str.split(""); /* разделитель НЕ указан */
console.log(strSplit);
Результат
(6)[ 'one', 'two', 'three', 'four', 'five', 'six' ]
(3)[ 'one ', 'wo ', 'hree four five six' ]
[ 'one two three four five six' ]
(27)["o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e", " ", "f", "o", "u", "r", " ", "f", "i", "v", "e", " ", "s", "i", "x"]
Если разделитель не указан, то метод split разбивает всю строку по символам, включая пробелы.
Если разделитель - это НЕ существующий в строке символ, то метод split возвращает массив из всей строки (с одним элементом).
Метод split может содержать два параметра.
Метод join - Объединение элементов массива в строку
Метод join противоположен методу split - он служит для объединения элементов массива в строку.
При этом, по умолчанию элементы массива отделены друг от друга запятой.
Метод join позволяет указать иной разделитель между элементами массива.
let letters = ["С", "А", "К", "В", "О", "Я", "Ж"];
console.log(letters);
console.log(letters.join()); // Разделитель не указан
console.log(letters.join(" ")); // Разделитель - Пробел
console.log(letters.join(", ")); // Разделитель - Запятая и пробел
console.log(letters.join("_")); /* Разделитель - Символ подчёркивания */
Результат
(7) ["С", "А", "К", "В", "О", "Я", "Ж"]
С,А,К,В,О,Я,Ж
С А К В О Я Ж
С, А, К, В, О, Я, Ж
С_А_К_В_О_Я_Ж
Метод sort - Сортировка элементов массива
Метод sort сортирует элементы массива как строки.
То есть строковые элементы метод sort сортирует в алфавитном порядке - пример смотрите здесь.
А числовые элементы метод sort сортирует (тоже как строки), сравнивая их по первому знаку (что в основном не удобно) - об этом здесь.
Чтобы числовые элементы сортировать как числа, существует шаблонный скрипт.
Метод sort в качестве параметра может принимать callback-функцию, которая вместе с методом sort позволит сортировать числа по возрастанию.
Итак, рассмотрим, как сортировать числа по возрастанию в JavaScript.
let number = [2, 13, 144, 25, 7, 61];
console.log(number.sort());
function compareNumber(a, b){
return(a - b);
}
console.log(number.sort(compareNumber));
Результат
[ 13, 144, 2, 25, 61, 7 ]
[ 2, 7, 13, 25, 61, 144 ]
В первом случае метод sort рассортировал числовые элементы массива как строки (привычным для себя образом).
Во втором случае метод sort принимает в качестве параметра специальную callback-функцию и уже сортирует числовые элементы массива как числа: по возрастанию.
В чем здесь специфика? Почему функция с двумя аргументами, которая возвращает их разницу, заставляет метод sort сортировать числа по возрастанию? Для тех, кому это интересно - читайте об этом здесь.
Псевдомассивы в JavaScript
На практике, в фронт-энд разработке, псевдомассивы встречаются очень часто. Работая с элементами на веб-страницах, разработчику приходится иметь дело именно с псевдомассивами.
По факту псевдомассив - это объект, структура которого совпадает со структурой массива. Но у псевдомассивов НЕТ никаких методов (смотрите выше - методы массивов). Псевдомассив - это просто структура, которая хранит данные по порядку.
Очень скоро о псеводмассивах пойдет речь и на практике работа будет проводиться именно с ними.
