Методы массива в JS
У массива на JavaScript, существует много методов взаимодействия с ним. Наиболее часто востребованные, мы и рассмотрим сейчас.
Добавить элемент в массив
Метод push() добавляет элементы в конец массива. Допустим, у нас уже есть массив dogs и мы хотим туда добавить новый компонент. Сначала пишем название массива, куда будем добавлять, название метода и название элемента.
let dogs = ["мопс", "бульдог", "такса", "йорк"];
dogs.push("лабрадор");
document.getElementById("demo_dogs").innerHTML = dogs;
В HTML-документе:
<p id="demo_dogs"></p>
В документе выведется так, лабрадор появится последним в списке:
мопс,бульдог,такса,йорк,лабрадор
Метод unshift() добавляет компонент в начало массива.
dogs.unshift("лабрадор");
Выведется:
лабрадор,мопс,бульдог,такса,йорк
Удалить элемент из массива
Метод pop() удаляет последний компонент из массива.
let plan = ["Венера", "Марс", "Сатурн", "Меркурий"];
plan.pop(); // Удалил ("Меркурий")
Выведется:
Венера,Марс,Сатурн
Метод shift() удаляет первый компонент массива.
plan.shift(); // Удалил ("Венера")
Выведется:
Марс,Сатурн,Меркурий
При удалении или добавлении элемента в начало массива, все остальные элементы увеличивают свой индекс на единицу, это может привести к более длительному времени выполнения кода. По возможности рекомендуется использовать методы push() и pop().
Разбить строку на массив в JS
Метод split() разбивает строку на массив. Допустим, что пользователь в поле формы ввел через запятую е-мейлы друзей, это строка.
let email = '[email protected], [email protected], [email protected]';
Но нам удобнее работать с массивами, метод split разобьет строку на массив через разделитель.
let user = email.split(', ');
["[email protected]", "[email protected]", "[email protected]"];
Объединить массивы в JS
Метод join(), наоборот объединяет элементы массива в строку с помощью указанного разделителя.
let helen = ["Елена", "прекрасная", "хозяйка"];
helen.join(" "); // указываем разделитель - пробел
alert( helen ); // Елена прекрасная хозяйка
Создание нового массива на JS
Метод slice(5, 10) клонирует указанный в скобках участок массива от 5 до 10, создавая новый массив, не меняя исходного массив. Можно клонировать полный массив или только часть.
let clone = ["Вы", "хорошо", "знаете", "JavaScript"];
let clone2 = clone.slice(1, 3); // элементы 1, 2 (не включая 3)
alert( clone2 ); // хорошо, знаете
Сортировка массива на JS
По умолчанию метод sort() сортирует элементы по алфавиту, как строку.
let cars = ["Mazda", "Opel", "Audi", "Honda"];
cars.sort();
document.getElementById("demo_sort").innerHTML = cars;
В параграфе на HTML-странице выведет:
<p id="demo_sort"></p> // html разметка
Audi,Honda,Mazda,Opel // выведет на странице
Комбинация двух методов сразу sort() и reverse() отсортирует марки автомобилей в обратном порядке.
cars.sort();
cars.reverse();
Выведет на странице:
Opel,Mazda,Honda,Audi
Метод сортировки sort() function
Через функцию, можно задать свои правила сортировки, но надо указать ей, каким образом сравнивать два элемента массива.
function(a, b){return a-b}
Итоги
Мы изучили далеко не все методы массива в JS, однако поняв логику в принципе, не стоит слишком зацикливаться на теории. По мере необходимости, недостающие знания по JavaScript, нужно уметь брать из документации. Невозможно, да и не нужно, знать и помнить наизусть все функции или методы. О том, как применять полученную теорию на практике, расскажет мой уникальный видео-курс по JavaScript.
-
Создано 14.01.2019 10:36:51
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.