Массивы в Javascript
Каждый программист должен уметь работать с массивами. О том как создавать массивы в Javascript и о методах работы с массивами Javascript такими как: Reverse, Concat, Slice, Splice, Push, UnShift, Pop и другими мы поговорим в этой статье. А также мы рассмотрим циклы в javascript.
Web-hosting rating: 8 out of 10 with 325 ratings

Видео урок "Массивы в Javascript"

 

 

Чем отличается массив от переменной

Для того, чтобы лучше понять что такое массивы в Javascript, да и в любом другом языке программирования, я покажу примеры на реальных объектах из жизни.

 

arrays in javascript

 

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

У каждой ячейки есть номер. Именно по этому номеру, по окончанию покупок, вы можете понять в какой именно ячейке лежат ваши вещи.

По аналогии мы можем назвать переменной одну ячейку шкафа в котором хранятся ваши вещи, а все ячейки - это массив.

 

Как создать массив в Javascript

В языке Javascript массив можно создать разными способами. 

 

Первый способ создания массива в Javascript

 

Этот способ для числовых данных и объектов:

array = [1, 23, 15, 10, 33];

 

Этот способ для строк:

array = ["Один", "Два", "Три", "Четыре"];

 

Данным способом мы создали массив из четырех элементов.

 

Второй способ создания массива в Javascript

Второй способ создания массивов в Javascript через объекты.

 

Выглядит это так:

array = new Array(1, 23, 15, 10, 33);

 

Для строковых данных массива, строки нужно заключить в кавычки.

 

Как обратиться к массиву в Javascript

Для того, чтобы обратиться к первому элементу массива, нужно написать:

console.log(array[0])

 

где, достаем первый элемент массива - array[0]. Console.log - отображает содержимое массива. 

Нумерация массивов начинается с нуля. Именно поэтому когда мы обращаемся array[0] нам выводится значение первого элемента 1 или в примере со строками - Один.

 

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

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

 

Метод Reverse

Метод reverse изменяет массив и формирует новый массив с элементами в обратном порядке.

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.reverse();

 

Результат:

["Четыре", "Три", "Два", "Один"]

 

 

Метод Concat

Метод concat объединяет массив с другим массивом или данным. Метод concat не изменяет исходный массив. 

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.concat(12);

 

Результат:

["Один", "Два", "Три", "Четыре", 12]

 

 

Метод Slice

Метод slice обрезает часть строки и может принимать на вход как два параметра(начало и конец), так и один параметр.

Если второй параметр задать -1, тогда он вернет остальную часть строки c предпоследним элементом.

Метод slice не изменяет исходный массив. 

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.slice(1,-1);

 

Результат:

["Два", "Три"]

 

 

Метод Splice

Метод splice достаточно многофункциональный.

 

На вход он принимает три аргумента:

1. Индекс массива с которого нужно начать удаление

2. Количество элементов массива которые нужно удалить

3. Третий аргумент - это значения которые нужно вставить туда, откуда мы удалили элементы массива

 

Метод splice изменяет исходный массив. 

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.splice(1, 2, "2", "3");

 

Результат:

["Один", "2", "3", "Четыре"]

 

Третий агрумент в методе splice необязателен. Если не использовать третий агрумент, тогда метод splice удалит указанные в первых двух аргументах элементы массива и вернет новый массив без этих элементов.

 

Метод Push

Метод push вставляет элемент в конец массива

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.push("Пять");

 

Результат:

["Один", "Два", "Три", "Четыре", "Пять"]

 

Метод UnShift

Метод unshift вставляет элемент в начало массива

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.unshift("Ноль");

 

Результат:

["Ноль", "Один", "Два", "Три", "Четыре"]

 

 

Метод Pop

Метод pop удаляет последний элемент из массива и возвращает удаленный элемент. 

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.pop();
 

 

Результат:

"Четыре"

["Один", "Два", "Три"]

 

 

Метод Shift

Метод shift удаляет первый элемент из массива и возвращает удаленный элемент. 

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.shift();

 

Результат:

"Один"

["Два", "Три", "Четыре"]

 

Метод Join

Метод join в Javascript преобразует массив в строку и позволяет задать свой собственный разделитель. По умолчанию, метод join в качестве разделителя использует запятую. Давайте попробуем поставить разделитель "-".

 

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.join("-");

 

Результат:

Один-Два-Три-Четыре

 

Метод Sort

Метод Soft по умолчанию сортирует массив в алфавитном порядке. Мы можем передать ему функцию с другой логикой сортировки. Об этом поговорим в отдельной статье посвященный методам отдельно.

 

Пример:

array = ["а", "в", "б", "г"];

array.sort();

 

Результат:

["а", "б", "в", "г"]

 

 

Работа с массивами в циклах

Циклы - это очень важные методы для работы с массивами. С помощью них мы можем обращаться к отдельно взятому элементу массива и проходить по всему массиву.

 

Цикл FOR

Простой цикл для перебора массива

 

Пример:

 

Результат:

Один
Два
Три
Четыре

 

 

Цикл ForEach

Улучшенный цикл для перебора массива. На вход может принимать три элемента: element, index, array.

 

Пример 1:

 

Результат:

Один
Два
Три
Четыре

 

Пример 2:

Метод toUpperCase() делает все элементы с большой буквы

 

Результат:

["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]

 

Выводы о массивах в Javascript

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

Следите за новыми статьями и видеоуроками, подписывайтесь на наш канал YouTube и вступайте в группу VK впереди много интересного материала и видеоуроков.





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


Что такое NodeJS и npm?

XAMPP - как установить и настроить на Mac (Mojave, Sierra)

Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Постраничная ленивая загрузка (lazy load) постов

Как стать профессиональным веб-разработчиком

Методы setTimeout и setInterval в Javascript

Реализация Lazy Load на Jquery

Три полезных CSS свойства для работы с изображениями

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

Модальное окно на Jquery

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Ольга ответить
Интересно, раньше никогда не задумывалась, в чем различие Slice от Splice, спасибо, теперь поняла.
backrecdodo ответить
Thank your guys!

Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting