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

Оцените материал
(0 голосов)

Здравствуйте! В этом уроке продолжим изучение массивов, начатое в уроке по массивам и рассмотрим методы массивов. Некоторые из этих методов мы сами того не подозревая рассмотрели в прошлом уроке. Это такие методы как push, shift, unshift, pop и другие. А сегодня продолжим ведь у массивов есть еще очень много интересных методов. Итак пожалуй начнем.

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

Метод split.

Данный метод позволяет преобразовать строку в массив по определенному разделителю. Зачем это надо, а вот представьте такую ситуацию вам надо обработать список строк, но ведь удобнее хранить эти строки в массиве. Вот тут и приходит на помощь метод split.

 var name = 'Маша, Нина, Ирина, Василий';
var mas = name.split(', ');//преобразуем строку в массив по разделителю ","
for (var i = 0; i < mas.length; i++) {
  document.write( 'Вам сообщение ' + mas[i] );

Просмотреть  пример

Здесь в примере строку разделяем по разделителю запятая и сохраняем в массив, а затем в цикле выводим массив на экран.

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

  alert( "1,2,3,4".split(',', 2) ); // 1,2

Разбивка на буквы.

Еще одной интересно особенностью метода split является то, что если в качестве разделителя указать пустую строку то данный метод разобьет строку на буквы

 var str = "строка";
document.write(str.split('') ); // с,т,р,о,к,а

Метод join

Этот метод работает обратно методу split, то есть он массив преобразует в строку по разделителю, который надо указывть в самом методе.

 var mas = ['Миша', 'Петр', 'Мария', 'Вася'];
 var names  = mas.join(';');
document.write( names ); // Миша;Петр;Мария;Вася

Просмотреть  пример

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

Для удаления элемента из массива используется метод delete. Он удаляет и индекс элемента и сам элемент, при этом в массиве образуется дырка:

var mas = ["Мы", "едем", "отдыхать"];
delete mas[1]; // элемент с индексом 1 удален
// теперь mas = ["Мы", undefined, "отдыхать"];
document.write( mas[1] ); // undefined

Как видно delete удаляет пару индкс-элемент, при этом элементы не сдвигаются и длина массива не изменяется. Отсюда можно сделать вывод, что для корректного удаления элементов массива лучше использовать методы pop, unshift, рассмотренные нами ранее.

Метод splice

Это швейцарский нож по работе с массивами умеет все и удалять элементы с любого места в массиве и вставлять элементы ну и конечно же заменять одни элементы другими. Ну давайте рассмотрим на примерах.

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

var mas = ["Мы", "учим", "JavaScript"];
mas.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
document.write( mas ); //  результат ["Мы", "JavaScript"]

Просмотреть  пример

Замена элементов на другие:

 var mas = ["груша", "банан", "апельсин", "мандарин"];
// удаляем 3 первых элемента и добавляем другие вместо них
mas.splice(0, 3, "авокадо", "арбуз", "дыня")
document.write( mas ) // теперь ["авокадо", "арбуз", "дыня", "мандарин"]

Просмотреть  пример

Вставка элементов без удаления.

 var mas = ["Мы", "изучаем", "JavaScript"];
// с позиции 2
// удалить 0
// вставить "язык", "программрования"
mas.splice(2, 0, "язык", "программрования");
document.write( mas ); // "Мы", "изучаем", "язык", "программирования", "JavaScript"

Просмотреть  пример

Метод slice

Метод slice копирует участок массива mas(start, end) начиная с позиции start, и до позиции end не включая ее причем сам исходный массив не изменяется. И опять будем разбираться на примерах.

var mas = ["Зачем", "нужно", "учить", "JavaScript"];
var mas2 = mas.slice(1, 3); // элементы 1, 2 (а вот 3 не будет включен)
document.write( mas2 ); // нужно, учить

Просмотреть  пример

Причем возможны варианты:

Если не указать второй аргумент скопируется массив до конца.

var mas = ["Зачем", "нужно", "учить", "JavaScript"];
alert( mas.slice(1) ); // взять все элементы, начиная с номера 1

Можно указывать отрицательные индексы, тогда отсчет будет вестись с конца массива.

 var mas2 = mas.slice(-2); // копировать от 2-го элемента с конца и дальше

А вот если вообще не указать аргументов, то скопируется весь массив.

 var polnaya_copia = mas.slice();

Сортировка массивов. Метод sort(fn)

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

var mas = [ 1, 2, 17 ];
mas.sort();
document.write( mas );  // 1, 17, 2

Просмотреть  пример

Как видно из примера результат сортировки  немного не тот как мы ожидали, а все оттого что данный метод приводит числа к строкам и потом их уже сортирует. Этот момент следует учитывать.

Своя  сортировка

Для использования своей сортировки в методе sort в него надо передать функцию, которая будет сортировать элементы массива. Вот пример:

 function sortNumeric(num1, num2) {
  if (num1 > num2) return 1;
  if (num1 < num2) return -1;
}
var mas = [ 1, 2, 17 ];
mas.sort(sortNumeric);
document.write(mas);  // 1, 2, 17

Просмотреть  пример

Хочу обратить ваше внимание на одну деталь свою функцию  сортировки надо передавать в метод sort без круглых скобок, иначе будет ошибка.  Как нетрудно заметить из примера, передаваемая функция в метод sort имеет 2 аргумента и возвращает:

положительное значение, если num1>num2 и отрицательное значение если наоборот, а если числа равны то возвращается 0 и тут уже сортировка идет как надо, то есть сортируются именно числа, а не строки.

Метод reverse

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

var mas = [4, 5, 6];
mas.reverse();
document.write( mas ); // 6,5,4

Просмотреть  пример

Метод concat

Метод concat копирует исходный массив с массивом или элементами, которые передаются методу concat. Вот пример:

var mas = [3, 4];
var newMas = mas.concat(5, 6);
document.write( newMas ); // 3,4,5,6

Просмотреть  пример

Методы поиска элемента в массиве indexOf/lastIndexOf

Данные методы ищут в массиве указанный элемент если находят возвращают индекс этого элемента, а если нет то -1. Отличаются они только тем, что indexOf возвращает первую позицию, а lastIndexOf последнюю. Вот пример:

var mas =["Vasya", "petya", "Gerasim"];
if(mas.indexOf("Vasya") == -1){
  document.write("Элемента  нет в массиве");
}
else {
 document.write("Элемент есть в массиве");
}

Просмотреть  пример

Итоги:

 

Методы массивов:

  • push/pop, shift/unshift, splice – служат для добавления/удаления элементов массива.
  • join/split – для преобразования строки в массив и массив в строку соответственно.
  • slice –  используется для копирования части массива.
  • sort –  сортирует массив, если не передать свою функцию, то элементы будут отсортированы как строки.
  • reverse –  переворачивает массив вверх ногами.
  • concat –  склеивает или объединяет, как массивы так и отдельные элементы.
  • indexOf/lastIndexOf –  ищет и находит индекс массива, если не находит, то возвращает -1. Используется для проверки присутствует ли элемент в массиве.

Задания

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

var mas = [5, 2, 1, -10, 8];

Найти уникальные элементы в массиве.

var mas = ["дришна", "дришна", "маре", "маре", "харе", "харе", "кришна", "кришна", "10-()" ];

Должно получиться alert( (strings) ); // дришна, кришна, харе, 10-()

Замена элементов в массиве

Пусть дан массив с числами от 1 до 100 ваша задача состоит в слдующем: надо пройтись по массиву и заменить число, если оно делится на 3 без остатка на слово "тузик", а если делится на 5 без остатка на "бобик".

Ну и в заключение смотрите видео по методам массивов в JavaScript.

 

 

Прочитано 306 раз Последнее изменение Суббота, 02 сентября 2017 16:08
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+