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

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

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

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

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

Урок №3 Массивы - Метод splice

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

Продолжаем изучать JavaScript. Здесь мы поговорим о методе splice, который позволяет удалять, добавлять и даже проводить замену элементов в Массиве.

Для изучения данного метода нам понадобиться Массив. Из предыдущей темы мы можем взять Массив «Друзья».

<script type="text/javascript">

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

</script>

Метод splice - удаление элементов из Массива

Метод splice - удаление элементов из Массива

Первым делом при помощи метода splice научимся удалять элементы из Массива. Для этого нужно в методе splice указать два числовых параметра.

1-е число будет говорить о том, с какого элемента (включительно) Массива следует начать удаление. Здесь мы указываем индекс/порядковый номер элемента Массива (Напоминаю, что нумерация элементов Массива начинается с 0).

2-е число указывает на количество удаляемых элементов.

<script type="text/javascript">

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

document.write(friends + "<p>");

friends.splice(3, 2); // Начинаем удалять с 3-го элемента, удаляем 2 элемента Массива...

document.write(friends);

</script>

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

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

В данном примере при помощи метода splice мы удалили из Массива два элемента, начиная с элемента №3 (с индексом 3).

Метод splice - добавление элементов в Массив

Метод splice - добавление элементов в Массив

Теперь при помощи метода splice мы будем добавлять элементы в Массив. Для примера берём всё тот же Массив «Друзья».

Чтобы добавить элементы в Массив при помощи метода splice необходимо так же , как и при удалении элементов указать два числовых параметра.

1-е число будет говорить о том, перед каким элементом Массива следует начать добавление. Здесь мы указываем индекс/порядковый номер элемента Массива (Напоминаю, что нумерация элементов Массива начинается с 0).

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

После нуля указываем элементы, которые необходимо добавить в Массив.

<script type="text/javascript">

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

document.write(friends + "<p>");

friends.splice(3, 0, " Дмитрий", " Евгений");

document.write(friends);

</script>

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

Алексей, Вячеслав, Григорий, Дмитрий, Евгений, Настя, Павел

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

Метод splice - замена элементов в Массиве

Метод splice - замена элементов в Массиве

Рассмотрим третий вариант работы с методом splice. С помощью него можно проводить замену элементов в Массиве.

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

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

<script type="text/javascript">

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

document.write(friends + "<p>");

friends.splice(1, 2, " Дмитрий", " Евгений");

document.write(friends);

</script>

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

Алексей, Дмитрий, Евгений, Настя, Павел

Итак, в этом примере мы указали, что нужно сначала удалить два элемента Массива, начиная с элемента с индексом 1. После этого вместо удалённых, указали два элемента, которые нужно добавить.

Домашнее задание - Метод splice

Домашнее задание - Метод splice

Рассмотрев метод splice, реализующий добавление, удаление и замену элементов в Массиве, можно выполнить Домашнее задание на эту тему.

Смотрите ниже его условие.

У Вас есть массив, про который заранее известно, что в нем точно больше одного элемента. Но сколько именно - неизвестно. Пусть это будет такой массив с фруктами: var fruits = ["яблоко", "апельсин", "груша", "гранат"];

Напомню, что по условиям Вы не знаете сколько точно в нем элементов, их может быть и 100 и 200. Ваша задача состоит в том, чтобы с помощью метода splice заменить в массиве предпоследний фрукт на "ананас" и вывести весь массив на экран.

Когда это будет сделано, проверьте свой код на таком массиве: var fruits = ["банан", "мандарин", "манго"]; В этом массиве у Вас мандарин должен будет замениться на ананас.

Чтобы решить это домашнее задание, предлагаю сначала немного поразмыслить.

Итак, рассуждаем:

1. Мы не знаем, сколько элементов в Массиве!

2. Но мы можем посчитать число элементов Массива при помощи свойства length.

3. Зная число элементов Массива, мы можем узнать порядковый номер/индекс предпоследнего элемента Массива, если вычтем из количества его элементов число 2. (См. индекс последнего элемента Массива)!!!

4. И затем, уже при помощи метода splice, можно удалить предпоследний элемент Массива, и заменить его на «Ананас». Замену элементов в Массиве мы проводили в предыдущем пункте это темы...

Для примера берём массив с четыремя фруктами из Задания: var fruits = ["яблоко", "апельсин", "груша", "гранат"];

И в этом же примере проверим код для второго указанного в задании Массива var fruits = ["банан", "мандарин", "манго"];

<script type="text/javascript">

var fruits = [" Яблоко"," Апельсин"," Груша"," Гранат"];
fruits.splice(fruits.length - 2, 1, " Ананас"); /* Узнаем Индекс предпоследнего элемента Массива, удаляем его и меняем на Ананас */
document.write("<p>" + fruits); // Выводим массив

document.write("<p>");

var fruits = [" Банан"," Мандарин"," Манго"];
fruits.splice(fruits.length - 2, 1, " Ананас");
document.write("<p>" + fruits);

</script>

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

Банан, Ананас, Манго

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

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

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

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

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

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