В этой части учебника, мы разберём, создание массива в JavaScript и работа с ним, думаю вам понравится.
Что такое массив:
Для начала посмотрим что такое массив, если кратко говоря, то это место, где хранятся несколько данных, каждое из которых можно получить по индексу.
Объявление массива в JS:
Объявление или создание массива происходит также, как и создание переменной, единственное вы вместо значений пишете квадратные скобки.
1 2 | let arr1 = [] // Объявление пустого массива let arr2 = ["Яблоко", "Банан", "Персик"] // Объявляем массив с данными |
Как видите, вы можете создать пустой массив или уже наполнить его данными, при чём, вы можете использовать любой тип и даже их перемешивать, например, как то так.
1 | let arr = ["Яблоко", 835, true, function() {alert("Привет")}] |
То есть можно даже функции хранить таким образом, о функциях вы прочитаете в следующей части.
Также для создания массива, вы можете использовать класс Array, вот как это делается.
1 2 | Let arr1 = new Array(); // Объявление пустого массива Let arr2 = new Array("Персик", "Яблоко", "Банан"); // Объявление массива с данными |
Работа с массивами в JS:
Теперь перейдём к работе с массивом, для начала посмотрим как получить элемент массива, его можно взять ро индексу.
Важно:
В JavaScript индексация начинается с нуля.
1 2 3 4 5 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Выводим элемент по индексу console.log(arr[1]); |
Тут просто создаём массив и выводим в консоль его значение по индексу один, вот что вывелось.
Как видите, у нас вывелся второй элемент, хоть и использовали индекс один, это всё потому что, индексация начинается с нуля.
Также мы можете вывести все элементы массива, для этого нужно использовать цикл.
1 2 3 4 5 6 7 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Пишем цикл for for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // Выводим элемент в консоль } |
Здесь всё крайне просто, в цикле мы выводим каждый элемент, самое интересное, это условие, при котором он должен работать, там мы используем метод length, который возвращает количество данных.
То есть цикл будет работать, пока i строга меньше трёх, в нашем случае.
Также вы можете изменять элемент массива как вам надо, для этого просто используете нужный индекс и присваиваете ему значение на которое нужно изменить.
1 2 3 4 5 6 7 8 9 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; arr[1] = "Киви"; // Пишем цикл for for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // Выводим элемент в консоль } |
Вот что выведется:
Методы работы с массивами в JS:
Также кроме length есть другие методы для работы с массивами в JavaScript, здесь покажу только самые основные, их четыре.
- push() — Добавляет элемент в конец массива;
- pop() — Удаляет элемент в конце массива;
- unshift() — Добавляем элемент в начала массива;
- shift() — Удаляем из массива первый элемент;
- splice() — Заменяет или удаляет элементы
- concat() — Объединяет массивы;
- farEach() — Перебор массива;
Это те методы которые вы будите пользоваться чаще всего, вот пару примеров работы с ними.
1 2 3 4 5 6 7 8 9 10 11 12 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Добавляем элемент в конец массива arr.push("Киви") // Удаляем элемент в начале массива arr.shift() // Пишем цикл for for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // Выводим элемент в консоль } |
Здесь мы просто не много изменяем массив, сначала добавляем в конец слово «Киви», а потом удаляем элемент из начала, вот что должно получится.
Как видите вывод массива изменился, в конец добавилось слово, а в начала удалилось.
Вот этот пример покажет как происходит в JavaScript удаление элемента массива или его замена.
1 2 3 4 5 6 7 8 9 10 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Удаляем из массива второй элемент arr.splice(1, 1); // Пишем цикл for for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // Выводим элемент в консоль } |
Здесь мы уже используем метод splice(), первый параметр, это с какого индекса удалять элемент, второй, количество удаляемых элементов.
Ещё благодаря этому методу, можете заменять элементы.
1 2 3 4 5 6 7 8 9 10 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Замена элементов arr.splice(1, 2, "Груша", "Киви"); // Пишем цикл for for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // Выводим элемент в консоль } |
Тут после параметра который отвечает за количество заменяемых элементов, просто перечисляем все элементы которые мы хотим добавить, и даже не важно какого типа.
Последнее что мы рассмотрим, это как в JavaScript перебрать массив и объединить его с другим массивом.
1 2 3 4 5 6 7 8 9 10 11 | // Создаём массив let arr = ["Яблоко", "Персик", "Банан"]; // Объединяем два массива arr = arr.concat(["Груша", "Киви"]) // Перебор массива arr.forEach(function(item, key) { // Вывод элемента и его индекса в консоль console.log(`${item} имеет индекс ${key}`); }) |
В начале мы как всегда создаём новый массив, потом с помощью метода concat(), который приминается к массиву, внутри в качестве параметра принимает ещё один массив, возвращает уже объединённый массив данных, мы же присваиваем это значение уже созданному.
Дальше с помощью метода forEach() мы перебираем, внутри в качестве параметра используем функцию, которая принимает в себя ещё два параметра, это item, значение элемента и key, его индекс.
Выводим весь массив в консоль, вот что получилось.
Как видите, у нас вывелся объединённый массив, то есть, всё правильно работает.
Вывод:
В этой части вы прочитали о создание массива в JavaScript и узнали что это вообще такое, ну и конечно, поняли как с этим работать.
Подписываетесь на соц-сети:
Оценка:
Загрузка...