«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на 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

На практике, в фронт-энд разработке, псевдомассивы встречаются очень часто. Работая с элементами на веб-страницах, разработчику приходится иметь дело именно с псевдомассивами.

По факту псевдомассив - это объект, структура которого совпадает со структурой массива. Но у псевдомассивов НЕТ никаких методов (смотрите выше - методы массивов). Псевдомассив - это просто структура, которая хранит данные по порядку.

Очень скоро о псеводмассивах пойдет речь и на практике работа будет проводиться именно с ними.

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Методы массивов - Перебор элементов массива - Псевдомассивы
2182
Условия if else - Конструкция switch case - Тернарный оператор
720
Циклы while и for - Операторы break и continue
944
Практика часть 2 – Циклы и Условия
4580
Объявление функций – Стрелочные функции ES6
1152
Методы и свойства строк и чисел - Метод substr - Индекс строки
570
Практика часть 3 - Используем функции
1522
Что такое callback-функция - Аргумент другой функции
2223
Свойства и методы объектов - Деструктуризация объектов ES6
2880
Передача данных по ссылке и по значению – Клонирование объекта
537
Метод assign() – Копирование исходных объектов в целевой объект
593
Копирование массивов - Оператор spread
2026
Прототипное Программирование - Прототип и Экземпляр Объекта
522
Свойство proto - Методы Object.create и Object.setPrototypeOf
725
Практика часть 4 - Используем функции как методы объекта
10989
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки