Массивы. Часть 4
Вторник, 2 августа 2011 г.Рубрика: JavaScript -> Массивы
Метки: array | concat | javascript | join | reverse | slice | массивы
Просмотров: 474
Подписаться на комментарии по RSS
В этом уроке мы с Вами рассмотрим несколько новых методов массива.
reverse () - реверс
sort () - сортировка
join () - разделитель в массиве
concat () - соединение массивов
slice () - вырезаем элементы из массива
Метод reverse ().
Этот метод переворачивает все элементы массива - то есть был массив таким - 1 2 3 4 - а станет таким - 4 3 2 1 - то есть последний элемент станет первым, предпоследний вторым и т.д. Будет массив как бы наизнанку.
Рассмотрим пример - возьмём массив с фруктами и используем метод reverse ();
Значения массива будут такими - киви, мандарин, ананас, авакадо, яблоко.
После обработки методом reverse () массив будет таким - яблоко, авакадо, ананас, мандарин, киви.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; document.write ( fruits.reverse () ); </script> </body> </html>
Мы просто пишем массив.reverse () - и у нас получается перевёрнутый массив.
Метод sort ().
Этот метод сортирует массив по буквам.
То есть у нас есть массив с фруктами, если к нему применить метод sort, то все значения отсортируются по алфавиту, сначала на букву а, потом на б и т.д.
Допустим был массив - fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"];
То после обработки методом sort () он будет таким - авакадо, ананас, киви, мандарин, яблоко.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; document.write ( fruits.sort () ); </script> </body> </html>
Метод join ().
Этот метод изменяет разделитель в массиве между значениями.
Изначально разделитель равен - ",".
Но мы можем задать любой, более подходящий на наш взгляд разделитель.
Допустим мы хотим чтобы между элементами был знак ".", то мы передадим нашему методу такие данные - join ( "." );
Давайте рассмотрим пример, где разделителем будет - " ... " - можно задавать любую строку.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; document.write ( fruits.join ( " ... " ) ); </script> </body> </html>
Метод concat ().
Этот метод соединяет два массива в один.
Допустим мы хотим соединить два массива с фруктами.
Мы можем написать так fruits + fruitsNew - но мы просто выведем элементы первого массива через запятую пробел элементы второго массива через запятую - то есть между массивами будет пробел, а не разделитель.
Для того чтобы два массива стали одним целым, нужно использовать метод concat ().
Мы пишем имя массива = concat ( имя массива для соединения );
Рассмотрим на примере.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; var fruitsNew = ["апельсин", "персик", "гранат"]; document.write ( fruits.concat ( fruitsNew ) ); </script> </body> </html>
Метод slice ().
Этот метод позволяет вырезать какие-то значения из массива.
Сначала мы передаём методу с какого элемента вырезать, после до какого элемента.
Вырезанное можно занести в переменную.
Вырезается так - если мы вырезаем с 1 по 3, то будут вырезаны с 2 и 3, то есть если заключить в скобки - (1, 3] - с 1 не включительно по 3 включительно.
Давайте рассмотрим на примере.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; document.write ( fruits.slice ( 1, 3 ) ); </script> </body> </html>
У нас будет выведено мандарин, ананас.
Значит мы вывели элементы массива - 2 и 3.
Давайте попробуем вырезать все элементы.
<html> <head> <title>JavaScript</title> </head> <body> <script type = "text/javascript"> var fruits = ["киви", "мандарин", "ананас", "авакадо", "яблоко"]; document.write ( fruits.slice ( 0, fruits.length ) ); </script> </body> </html>
