Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Введение в Массивы Работа с Массивами Массивы - Метод splice

Свойство length - добавление/удаление элементов в Массив

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

Урок №2 Работа с Массивами

Количество просмотров: 706

Массивы в JavaScript - добавление/удаление элементов

На этой странице была рассмотрена тема введение в Массивы в JavaScript. Здесь мы продолжим знакомство с Массивами. Поговорим о свойстве length – как узнать: сколько же элементов содержит Массив?

Научимся добавлять элементы в начало и конец Массива - это методы unshift и push соответственно.

А также с помощью методов shift и pop сможем удалить элементы также из начала и конца Массива!

Свойство length - число элементов в Массиве

Свойство length - число элементов в Массиве

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

Свойство length позволят узнать количество элементов в Массиве.

Для примера давайте возьмём Массив семи дней недели знакомый нам по прошлой теме.

<script type="text/javascript">

var days = ["Пон.", "Вт.", "Ср.", "Чт.", "Пят.", "Суб.", "Вс."];

</script>

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

array.length – такой код даёт нам число элементов Массива (где array - имя Массива).

<script type="text/javascript">

var days = ["Пон.", "Вт.", "Ср.", "Чт.", "Пят.", "Суб.", "Вс."];

var count = days.length; /*Создаём переменную count в которую заносим число элементов Массива days*/

document.write("Количество элементов в Массиве days равно " + count);

</script>

Количество элементов в Массиве days равно 7

Таким образом, в переменную count мы поместили число, равное количеству элементов Массива.

Вот так работает свойство length.

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

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

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

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

Ниже я создал Массив «Друзья» - friends.

<script type="text/javascript">

var friends = ["Настя", "Григорий", "Вячеслав", "Алексей"];

</script>

Сейчас нам необходимо добавить элемент, то есть ещё одно Имя в конец Массива.

Для этого существует метод push - он добавляет элемент в конец Массива. Это выглядит следующим образом:

<script type="text/javascript">

var friends = [" Настя", " Григорий", " Вячеслав", " Алексей"];

friends.push(" Яков"); /*Добавляем элемент в конец Массива*/

document.write("Количество элементов в Массиве равно " + friends.length);

document.write("<p>" + friends); /*Выводим весь Массив*/

document.write("<p>" + friends[4]); /*Выводим последний 5-ый элемент Массива*/

</script>

Количество элементов в Массиве равно 5

Настя, Григорий, Вячеслав, Алексей, Яков

Яков

Для проверки работы метода push в примере выше, мы вывели количество элементов Массива friends при помощи свойства length - их стало 5. Затем вывели весь Массив friends, а также последний элемент Массива (напоминаем, что нумерация элементов Массива начинается с 0).

Теперь Вы можете сами убедиться, что элемент добавлен в конец Массива!

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

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

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

Здесь мы снова обратимся к Массиву friends.

<script type="text/javascript">

var friends = ["Настя", "Григорий", "Вячеслав", "Алексей"];

</script>

Теперь нам нужно добавить элемент в начало Массива. Для этого существует метод unshift.

<script type="text/javascript">

var friends = [" Настя", " Григорий", " Вячеслав", " Алексей"];

friends.unshift(" Борис"); /*Добавляем элемент в начало Массива*/

document.write("Количество элементов в Массиве равно " + friends.length);

document.write("<p>" + friends); /*Выводим весь Массив*/

document.write("<p>" + friends[0]); /*Выводим первый элемент Массива*/

</script>

Количество элементов в Массиве равно 5

Борис, Настя, Григорий, Вячеслав, Алексей

Борис

Для проверки работы метода unshift мы вывели количество элементов Массива friends при помощи свойства length, потом вывели весь Массив friends, а также первый элемент Массива (напоминаем, что нумерация элементов Массива начинается с 0).

Теперь, как видите, элемент добавлен в начало Массива!

Удаление последнего элемента из Массива - метод pop

Удаление последнего элемента из Массива - метод pop

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

И снова работаем с Массивом «Друзья»

<script type="text/javascript">

var friends = ["Настя", "Григорий", "Вячеслав", "Алексей"];

</script>

Используя метод pop - удаляем последний элемент из Массива:

 

<script type="text/javascript">

var friends = [" Настя", " Григорий", " Вячеслав", " Алексей"];

friends.pop(); /*Удаляем последний элемент из Массива*/

document.write("Количество элементов в Массиве равно " + friends.length);

document.write("<p>" + friends); /*Выводим весь Массив*/

document.write("<p>" + friends[friends.length - 1]); /*Выводим последний элемент Массива. Для этого берём общее число элементов Массива - friends.length и, так как, нумерация в массиве начинается с нуля, то из этого числа вычитаем 1*/

</script>

Количество элементов в Массиве равно 3

Настя, Григорий, Вячеслав

Вячеслав

Для наглядности работы метода pop мы снова вывели количество элементов Массива при помощи свойства length, затем вывели весь Массив friends - уже без удалённого последнего элемента.

А также вывели последний элемент вновь получившегося Массива. Для вывода последнего элемента, воспользовавшись свойством length, мы взяли общее число оставшихся элементов в Массиве (3) и вычли из него 1. Таким образом, мы вывели последний элемент массива под номером 2. Но это третий элемент, так как нумерация в Массиве начинается с 0!!!

Удаление первого элемента из Массива - метод shift

Удаление первого элемента из Массива - метод shift

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

Перед нами, как и ранее, Массивом «Друзья»

<script type="text/javascript">

var friends = ["Настя", "Григорий", "Вячеслав", "Алексей"];

</script>

С помощью метода shift - удаляем первый элемент из Массива:

<script type="text/javascript">

var friends = [" Настя", " Григорий", " Вячеслав", " Алексей"];

friends.shift(); /*Удаляем первый элемент из Массива*/

document.write("Количество элементов в Массиве равно " + friends.length);

document.write("<p>" + friends); /*Выводим весь Массив*/

document.write("<p>" + friends[0]); /*Выводим первый элемент Массива.*/

</script>

Количество элементов в Массиве равно 3

Григорий, Вячеслав, Алексей

Григорий

И, наконец, для проверки работы метода shift мы вывели количество элементов вновь получившегося Массива при помощи свойства length, затем вывели весь Массив friends - уже без удалённого первого элемента.

А также вывели первый элемент Массива. Нумерация в Массиве начинается с 0!!!

Стоит отметить - индекс последнего элемента Массива!!!

Стоит отметить - индекс последнего элемента Массива!!!

Напомню для Вас и для себя один интересный момент этой статьи!

Для того чтобы узнать номер/индекс последнего элемента Массива, нужно из числа его элементов (т.е. из длины Массива) Вычесть единицу!!!

Мы уже работали с этим в пункте темы Удаление последнего элемента из Массива - метод pop.

Хорошим вариантом иллюстрации этого момента будет продолжение примера из пункта Свойство length - число элементов в Массиве темы, где мы рассматривали Массив семи дней недели.

<script type="text/javascript">

var days = ["Пон.", "Вт.", "Ср.", "Чт.", "Пят.", "Суб.", "Вс."];

var count = days.length; /*Создаём переменную count в которую заносим число элементов Массива days*/

document.write("Количество элементов в Массиве days равно " + count);

document.write("<p> Номером последнего элемента Массива days является число " + (count - 1));

</script>

Количество элементов в Массиве days равно 7

Номером последнего элемента Массива является число 6

Итак, этим примером мы заодно ещё раз отметили тот факт, что нумерация в Массиве начинается с 0. И, как видно из этого примера, номером 7-го элемента массива является число 6.

Домашнее задание - Удаление/Добавление элементов в Массив

Домашнее задание - Удаление/Добавление элементов в Массив

В конце этой темы также выполним домашнее задание. И снова попробуйте решить его самостоятельно.

Домашнее задание по удалению из ... и добавлению элементов в Массив в Javascript имеет следующее содержание:

1. Создайте массив с фруктами: апельсин, банан, груша.
2. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
3. С помощью методов, изученных в предыдущем уроке, добавьте в конец массива два фрукта - яблоко и ананас, а в начало массива - грейпфрут.
4. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
5. С помощью методов, изученных в предыдущем уроке, удалите из массива последний и первый элемент.
6. Выведите на экран, сколько на данный момент у вас фруктов в массиве.

<script type="text/javascript">

var fruit = [" Апельсин"," Банан"," Груша"];
document.write(fruit + "<p>")
document.write("Сейчас в моей корзине " + fruit.length + " фрукта" + "<p>");

fruit.push(" Яблоко", " Ананас"); // Добавляем элементы в КОНЕЦ массива
fruit.unshift(" Грейпфрут"); // Добавляем элементы в НАЧАЛО массива
document.write(fruit + "<p>")
document.write("Сейчас в моей корзине " + fruit.length + " фруктов" + "<p>");

fruit.pop(); // Удаляем ПОСЛЕДНИЙ элемент из Массива
fruit.shift(); // Удаляем ПЕРВЫЙ элемент из Массива
document.write(fruit + "<p>")
document.write("Сейчас в моей корзине " + fruit.length + " фрукта");

</script>

Апельсин, Банан, Груша

Сейчас в моей корзине 3 фрукта

Грейпфрут, Апельсин, Банан, Груша, Яблоко, Ананас

Сейчас в моей корзине 6 фруктов

Апельсин, Банан, Груша, Яблоко

Сейчас в моей корзине 4 фрукта

Главная Изучаем JavaScript Работа с Массивами Массивы - Метод splice

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru