Push javascript приклади. масиви

The push () method adds one or more elements to the end of an array and returns the new length of the array.

The source for this interactive example is stored in a GitHub repository. If you "d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

arr .push (element1 [... [, elementN]])

Parameters

element N The element (s) to add to the end of the array.

Return value

Examples

Adding elements to an array

The following code creates the sports array containing two elements, then appends two elements to it. The total variable contains the new length of the array.

Let sports \u003d [ "soccer", "baseball"] let total \u003d sports.push ( "football", "swimming") console.log (sports) // [ "soccer", "baseball", "football", "swimming "] console.log (total) // 4

Merging two arrays

This example uses apply () to push all elements from a second array.

Do not use this method if the second array (moreVegs in the example) is very large, because the maximum number of parameters that one function can take is limited in practice. See apply () for more details.

Let vegetables \u003d [ "parsnip", "potato"] let moreVegs \u003d [ "celery", "beetroot"] // Merge the second array into the first one // Equivalent to vegetables.push ( "celery", "beetroot") Array.prototype.push.apply (vegetables, moreVegs) console.log (vegetables) // [ "parsnip", "potato", "celery", "beetroot"]

Using an object in an array-like fashion

As mentioned above, push is intentionally generic, and we can use that to our advantage. Array.prototype.push can work on an object just fine, as this example shows.

Note that we don "t create an array to store a collection of objects. Instead, we store the collection on the object itself and use call on Array.prototype.push to trick the method into thinking we are dealing with an array-and it just works, thanks to the way JavaScript allows us to establish the execution context however we please.

Let obj \u003d (length: 0, addElem: function addElem (elem) (// obj.length is automatically incremented // every time an element is added. .Push.call (this, elem))) // Let "s add some empty objects just to illustrate. obj.addElem (()) obj.addElem (()) console.log (obj.length) // → 2

Note that although obj is not an array, the method push successfully incremented obj "s length property just like if we were dealing with an actual array.

Specifications

Specification	Status	Comment
ECMAScript 3rd Edition (ECMA-262)	Standard	Initial definition. Implemented in JavaScript 1.2.
ECMAScript 5.1 (ECMA-262)	Standard
ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Array.prototype.push" in that specification.	Standard
ECMAScript Latest Draft (ECMA-262) The definition of "Array.prototype.push" in that specification.	Draft

Browser compatibility

The compatibility table in this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
push	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5.5	Opera Full support Yes	Safari Full support 1	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support 1	Samsung Internet Android Full support Yes	nodejs Full support Yes

метод push () додає один або кілька елементів в кінець масиву і повертає нову довжину масиву.

синтаксис

arr .push (element1 [... [, elementN]])

параметри

element N Елементи для додавання в кінець масиву.

значення, що повертається

var vegetables \u003d [ "parsnip", "potato"]; var moreVegs \u003d [ "celery", "beetroot"]; // Merge the second array into the first one // Equivalent to vegetables.push ( "celery", "beetroot"); Array.prototype.push.apply (vegetables, moreVegs); console.log (vegetables); // [ "parsnip", "potato", "celery", "beetroot"]

Використання об'єкта у вигляді масиву

Як згадувалося вище, push навмисно є загальним, і ми можемо використовувати це в наших інтересах. Array.prototype.push може працювати з об'єктом просто відмінно, як показує цей приклад. Зверніть увагу: ми не створюємо масив для зберігання колекції об'єктів. Замість цього ми зберігаємо колекцію на самому об'єкті і використовуємо call Array.prototype.push щоб обдурити метод, думаючи, що ми маємо справу з масивом, і він просто працює, завдяки тому, що JavaScript дозволяє нам встановити контекст виконання, однак ми будь ласка.

Var obj \u003d (length: 0, addElem: function addElem (elem) (// obj.length is automatically incremented // every time an element is added. .Push.call (this, elem);)); // Let "s add some empty objects just to illustrate. Obj.addElem (()); obj.addElem (()); console.log (obj.length); // → 2

Зверніть увагу, що хоча obj не є масивом, метод push успішно збільшує значення length об'єкта obj ж, як якщо б ми мали справу з фактичним масивом.

Характеристики

Сумісність з браузером

особливість	Веб-перегляд Android	Chrome для Android	Edge mobile	Firefox для Android	Операційна система Android	iOS Safari	Інтернет-магазин Samsung

Стек дозволяє віднести до даних історію зміни значень змінних. Опис даних і алгоритмів лежить в основі програмування. Стек - це основа для передачі управління між функціями, організації рекурсії і посилань на параметри. Синтаксис і семантика JavaScript за допомогою методів масиву push () і pop () дають можливість маніпулювати змістом і враховувати фактор часу. Особливість мови браузера і його логіка дозволяють інакше поглянути на можливості фактора часу.

Масив даних і логіка його освіти

Просто описати змінну. Нескладно створити масив змінних. Алгоритм, що використовує дані, - це статичне і просте рішення задачі. Класична робота з даними:

описати (створити) змінну;
привласнити значення;
змінити значення;
видалити змінну.

Функції push () і pop () дозволяють змінити сутність змінних і їх використання. Ідея стека не змінилася з моменту її «народження», але особливість JS як мови браузера і сучасної концепції програмування дозволяє врахувати фактор часу і надати даними динаміку.

Функція value ") - додати щось в кінець масиву. Функція - витягти останній елемент масиву. Покажчик в контексті push / pop при додаванні переміщається на доданий елемент, при добуванні - на передостанній елемент, а останній елемент є результатом виконання операції.

Стос тарілок - традиційне опис стека в JavaScript - набуває нового значення. Нехай завжди змінна - це масив. Власне масив - це сукупність змінних, але розглядаючи змінну як масив, можна інакше подивитися на динаміку зміни її значень.

Рух за значеннями

Суть стека - прийшов останнім, пішов першим. Не можна витягти значення поза даного порядку. Строго дотримуючись цього правила, розглядаючи значення всього масиву як одну змінну, можна отримати динаміку зміни значень цієї змінної в часі.

У цьому прикладі додавання значень JS array.push (...) - це одна послідовність дій, витяг значень JS array pop () - інша послідовність. Обидва варіанти дій взаємопов'язані. Це означає, що активний елемент змінює своє значення не тільки по часу, але і за логікою свого зміни.

Рекурсія і динаміка значення

Якщо функція може викликати саму себе і безпечно виконати своє призначення - це повна функціональність. Простий приклад - таблиця. У таблиці можуть бути і інші таблиці. А кожна таблиця - це рядки, стовпці і осередки. Кожна клітинка може містити таблицю. Кілька осередків по рядку або по стовпцю можуть бути об'єднані в одну клітинку, в якій може перебувати таблиця. У таблиці, що знаходиться в осередку, може бути осередок з двома і більше таблицями.

Реалізувати сказане в класичному стилі програмування практично неможливо, але в рекурсивном - елементарно. Якщо функціональність алгоритму роботи з таблицею дозволяє реалізувати себе всередині будь-якого елементу - значить, це JS array push. На JavaScript цей «фокус» має особливий сенс. Таблиці - це призначене для користувача застосування. Дерево сторінки (DOM) - це робота на сторінці.

На елементах DOM (тегах сторінки) висять обробники. Один варіант, коли такий обробник спрацьовує один раз, зовсім інший варіант, коли він може викликати сам себе багато разів. У розрізі всіх обробників всіх елементів сторінки виходить динаміка сторінки в часі.

Push / pop і рекурсія - це дещо інше уявлення про логіку роботи сторінки: все змінюється так, як потрібно в поточній ситуації, а не програмується заздалегідь у вигляді послідовної відпрацювання дій відвідувача.

З масивами можна працювати за допомогою різних методів, що надаються конструктором Array.

Методи pop / push і shift / unshift

Розглянемо методи pop () і push (). Ці методи дозволяють працювати з масивами як зі стеками. Стек - це структура даних, в якій доступ до елементів організований за принципом LIFO (англ. Last in - first out, «останнім прийшов - першим пішов»). Принцип роботи стека можна порівняти зі стопкою тарілок: щоб взяти другу зверху, потрібно зняти верхню. Як це працює зображено на малюнку:

І так повернемося до розгляду методів push () і pop (). Метод push () додає один або кілька нових елементів в кінець масиву і повертає його нову довжину. Метод pop () - видаляє останній елемент масиву, зменшує довжину масиву і повертає віддалене їм значення. Варто звернути увагу на те, що обидва ці методу змінюють масив на місці, а не створюють його модифіковану копію.

Var foo \u003d; // foo: foo.push (1,2); // foo: Повертає 2 foo.pop (); // foo: Повертає 2 foo.push (3); // foo: Повертає 2 foo.pop (); // foo: Повертає 3 foo.push (); // foo:] Повертає 2 foo.pop () // foo: Повертає foo.pop (); // foo: Повертає 1 var fruits \u003d [ "груші", "банани", "яблука"]; var picked \u003d fruits.pop (); document.write ( "Ви зірвали мої" + picked); спробувати зараз »

Методи shift () і unshift () поводяться багато в чому так само, як pop () і push (), за винятком того, що вони вставляють і видаляють елементи на початку масиву. Метод unshift () зміщує існуючі елементи в сторону великих індексів для звільнення місця під нові елементи, додає один або кілька елементів в початок масиву і повертає нову довжину масиву. Метод shift () видаляє перший елемент масиву і повертає його значення, зміщуючи всі наступні елементи для заняття вільного місця на початку масиву.

Var f \u003d; // f: f.unshift (1); // f: Повертає: 1 f.unshift (22); // f: Повертає: 2 f.shift (); // f: Повертає: 22 f.unshift (3,); // f:, 1] Повертає: 3 f.shift (); // f: [, 1] Повертає: 3 f.shift (); // f: Повертає: f.shift (); // f: Повертає: 1

метод join

Метод Array.join () використовується для об'єднання елементів масиву в один рядок. Методу можна передати необов'язковий строкової аргумент, який буде використовуватися для поділу елементів в рядку. Якщо роздільник не заданий, то при виклику методу символом-роздільником за замовчуванням буде кома.

Var a \u003d [ "Вітер", "Дощ", "Вогонь"]; var myVar1 \u003d a.join (); // "Вітер, Дощ, Вогонь" var myVar2 \u003d a.join ( ","); // "Вітер, Дощ, Вогонь" var myVar3 \u003d a.join ( "+"); // "Вітер + Дощ + Вогонь" document.write (myVar1 + "
"+ MyVar2 +"
"+ MyVar3); Спробувати зараз»

Метод Array.join () є зворотним по відношенню до методу String.split (), який створює масив шляхом розбиття рядка на фрагменти.

метод reverse

Метод Array.reverse () змінює порядок проходження елементів в масиві на протилежний і повертає масив з переставленими елементами. Цей метод не створює новий масив з Упорядкування об'єктів, а переупорядочівать їх в уже існуючому масиві.

Var myArr \u003d [ "один", "два", "три"]; document.write (myArr.reverse ()); спробувати зараз »

метод concat

Метод Array.concat () створює і повертає новий масив, що містить елементи вихідного масиву, для якого був викликаний метод concat (), послідовно доповнений значеннями всіх аргументів, переданих методом concat (). Якщо який-небудь з цих аргументів сам є масивом, тоді будуть додані всі його елементи. Імена масивів використовуються в якості аргументів і вказуються в тому порядку, в якому потрібно об'єднати їх елементи.

Var a \u003d; a.concat (4, 5) // Повертає a.concat (); // тоже самое - повертає a.concat (,) // Повертає

метод sort

Метод Array.sort () на місці сортує елементи масиву і повертає відсортований масив. Якщо метод sort () викликається без аргументу, то він сортує елементи масиву в алфавітному порядку (тимчасово перетворює їх в рядки для виконання порівняння). Як аргумент метод sort () може приймати функцію порівняння, яка визначає порядок сортування елементів.

Var a \u003d [ "Ківі", "Апельсини", "Груші"]; a.sort (); var s \u003d a.join ( ","); // Апельсини, Груші, Ківі document.write (s); // приклад з числами var myArr \u003d; myArr.sort (); document.write (myArr); // 1,10,2 Спробувати »

Напевно від сортування чисел ви очікували побачити трохи інший результат. Таке сортування сталася тому, що метод sort () сортує елементи, перетворюючи їх в рядки. Тому і порядок у них виходить строкової - адже "10"

Для сортування в будь-якому іншому порядку, відмінному від алфавітного, можна передати методу sort () як аргумент функцію порівняння. Слід однак врахувати, що функцію порівняння доведеться писати самим. Ця функція повинна мати два параметра, так як вона встановлює, який з двох її аргументів повинен бути присутнім раніше в відсортованому списку. Щоб було легше розібратися і написати таку функцію, є кілька правил, за якими буде визначатися порядок елементів:

Якщо перший аргумент повинен передувати другому, функція порівняння повертає негативне число (якщо a
Якщо перший аргумент повинен слідувати за другим, то функція порівняння повертає позитивне число (якщо a\u003e b)
Якщо два значення еквівалентні (т. Е. Порядок їх розташування не важливий), функція порівняння повертає 0 (якщо a \u003d\u003d b)

Для порівняння в якості своїх аргументів функція використовує елементи масиву:

Function foo (a, b) (// визначаємо функцію перевірки if (a b) return 1; return 0; // якщо a \u003d\u003d b) var a \u003d; a.sort (foo); // як аргумент передається тільки ім'я функції document.write (a.join ( ",")); // тоже самое записати більш коротко var a \u003d; a.sort (function (a, b) (// використовуємо анонімну функцію return a - b; // функція повертає значення 0)); document.write (a); // 1,2,5,10 Спробувати »

Перший запис в прикладі написана так, для того, щоб було легше зрозуміти, як це працює. Зверніть увагу, наскільки зручно використовувати в другому фрагменті анонімну функцію. Вона викликається тільки один раз, тому немає необхідності давати їй ім'я.

Примітка: Якщо в масиві є невизначені елементи (undefined), вони переносяться в кінець масиву.

метод slice

Метод Array.slice () використовується для копіювання зазначеної ділянки з масиву і повертає новий масив містить скопійовані елементи. Вихідний масив при цьому не змінюється.

Синтаксис методу:

Імя_массіва.slice (begin, end);

Імя_массіва слід замінити ім'ям того масиву, з якого потрібно витягти певний набір елементів для нового масиву. Метод приймає два аргументи, які визначають початок і кінець повертається ділянки масиву. Метод копіює ділянку масиву, починаючи від begin до end, не включаючи end. Якщо вказано тільки один аргумент, що повертається масив буде містити всі елементи від зазначеної позиції до кінця масиву. Можна використовувати негативні індекси - вони відраховуються з кінця масиву.

Var arr \u003d; arr.slice (0,3); // Повертає arr.slice (3); // Повертає arr.slice (1, -1); // Повертає arr.slice (-3, -2); // Повертає

метод splice

Метод Array.splice () - це універсальний метод для роботи з масивами. Він змінює масив на місці, а не повертає новий змінений масив, як це роблять методи slice () і concat (). Метод splice може видаляти елементи з масиву, вставляти нові елементи, замінювати елементи - по черзі і одночасно. Він повертає масив, що складається з віддалених елементів, якщо жоден з елементів не був видалений, поверне порожній масив.

Синтаксис методу:

Імя_массіва.splice (index, кол-во, elem1, ..., elemN);

Перший аргумент вказує індекс в масиві, з якого починається вставка або видалення елементів. Другий аргумент задає кількість елементів, які повинні бути видалені з масиву починаючи з індексу, зазначеного в першому аргументі, якщо другий аргумент дорівнює 0, то елементи не будуть видалені. Якщо другий аргумент опущений, видаляються всі елементи масиву починаючи з зазначеного індексу до кінця масиву. При використанні негативного номера позиції, відлік елементів буде з кінця масиву.

Var fruits \u003d [ "апельсини", "яблука", "груші", "виноград"]; var deleted \u003d fruits.splice (2,2); // повертає [ "груші", "виноград"] document.write (deleted); var arr \u003d; arr.splice (4); // Повертає; масив став: arr.splice (1,2); // Повертає; масив став: arr.splice (1,1); // Повертає; масив став: Спробувати »

Перші два аргументи методу splice () задають елементи масиву, що підлягають видаленню. Наступними за цими двома аргументами може слідувати будь-яку кількість додаткових аргументів, які задають елементи, які будуть вставлені в масив, починаючи з позиції, заданої першим аргументом.

Var fruits \u003d [ "апельсини", "яблука"]; fruits.splice (2,0, "кавуни"); // повертає document.write (fruits); // стало [ "апельсини", "яблука", "кавуни"] var arr \u003d; arr.splice (2,0, "a", "b"); // Повертає; стало arr.splice (2,2,); // Повертає [ "a", "b"]; стало, 3,4,5] Спробувати »

Варто звернути увагу, що на відміну від concat (), метод splice () не розбивати на окремі елементи масиви, що передаються в якості аргументів. Тобто, якщо методу передається масив для вставки, він вставляє сам масив, а не елементи цього масиву.

метод toString

Метод toString () перетворює елементи масиву в рядок, використовуючи в якості символу-роздільника кому.

Var arr \u003d [ "Молоко", "Хліб", "Печиво"]; var food \u003d arr.toString (); document.write (food); // Молок, Хліб, Печиво Спробувати »

Зверніть увагу, метод повертає ту ж рядок, що і метод join () при виклику його без аргументів.

indexOf і lastIndexOf

Метод indexOf повертає індекс елемента, значення якого дорівнює значенню, переданому методу в якості аргументу.

Синтаксис методів indexOf () і lastIndexOf ():

Імя_массіва.indexOf (іскомий_елемент, індекс) імя_массіва.lastIndexOf (іскомий_елемент, індекс)

Перший аргумент методу вказує значення елементу, індекс якого потрібно знайти, другий аргумент (необов'язковий), вказує індекс з якого буде починатися пошук. Якщо однакових входжень декілька, вибирається найменший (перший) індекс. Якщо елемент з шуканим значенням не знайдений, метод поверне -1. Усередині методу для пошуку використовується суворе порівняння (\u003d\u003d\u003d).

Var a \u003d; a.indexOf (3); // поверне 2 a.indexOf (3,4); // поверне 6 a.indexOf (35); // поверне -1: немає елемента з таким значенням a.indexOf (2); // 1

Метод lastIndexOf () теж повертає індекс елемента, значення якого дорівнює значенню, переданому методу в якості аргументу. Різниця лише в тому, що метод lastIndexOf () вибирає найбільший (останній) індекс.

Var a \u003d; a.lastIndexOf (3); // поверне 7 a.lastIndexOf (35); // поверне -1: немає елемента з таким значенням a.lastIndexOf (2); // 6

методи ітератори

Методи, описані нижче, є ітераторами. У всіх сучасних браузерах для роботи з масивами є методи, які призначені для перебору елементів і виконання різних дій над ними. Це методи forEach (), map (), filter (), every (), some, reduce () і reduceRight ().

Вони перебирають елементи масиву починаючи з 0 до length - 1 і, якщо елемент існує, передають його в callback обробник-функцію.

forEach

Синтаксис методу:

Імя_массіва.forEach (callback, thisArg)

Як перший аргумент вказується callback-функція, яку метод forEach () буде викликати для кожного елемента масиву. Реалізацію викликається функції-обробника потрібно писати самим. Викликається, повинна мати три параметра: перший параметр приймає в якості аргументу - значення елемента масиву, другий - індекс елемента, і третій - сам масив. Однак, якщо потрібно використовувати тільки значення елементів масиву, можна написати функцію тільки з одним параметром. Другий аргумент - thisArg (необов'язковий) буде переданий в якості значення this.

Var arr \u003d; function foo (value) (var sum \u003d value * this; return document.write (sum + "
");) Arr.forEach (foo, 5); // другий аргумент буде переданий в якості значення this // приклад з трьома параметрами var a \u003d; a.forEach (function (el, idx, a) (document.write ( "a [" + idx + "] \u003d" + el + "в [" + a + "]
");)); Спробувати зараз»

filter

Синтаксис методу:

Імя_массіва.filter (callback, thisObject)

Метод filter () створює і повертає новий масив, який буде містити тільки ті елементи масиву, для яких виклик функції callback поверне true.

Function isBig (element, index, array) (// повертає числа, які більше або дорівнюють 10 return (element\u003e \u003d 10); // якщо значення елемента більше або дорівнює 10 - вираз поверне true) var filtered \u003d .filter (isBig) ; // filtered

map

Метод map () створює і повертає новий масив, який буде складатися з результатів виклику функції callback (item, idx, ar) для кожного елемента масиву.

Var a \u003d; var b \u003d a.map (function (item, idx, arr) (return item * item;)); // b \u003d

every і some

Метод every () повертає true, якщо для всіх елементів масиву зазначена функція, яка використовується для їх перевірки, поверне true.

Метод some () повертає true, якщо під час перевірки в зазначеній функції один або кілька елементів повернуть true.

Var a \u003d; a.every (function (x) (return x 10;)) // true: одне число\u003e 10

reduce і reduceRight

Синтаксис методів:

Імя_массіва.reduce (callback, initialValue) імя_массіва.reduceRight (callback, initialValue)

Метод reduce () застосовує зазначену функцію (callback) щодо відразу двох значень в масиві, перебираючи елементи зліва направо, зберігаючи при цьому проміжний результат.

Аргументи функції callback: (previousValue, currentItem, index, array)

previousValue - повертається результат callback функції (він же проміжний результат)
currentItem - поточний елемент масиву (елементи перебираються по черзі зліва-направо)
index - індекс поточного елемента
array - оброблюваний масив

initialValue (инициализирующее значення) - об'єкт, який використовується в якості першого аргументу першого виклику функції callback. Простіше кажучи, значення previousValue при першому виклику одно initialValue. Якщо initialValue немає, то воно дорівнює першому елементу масиву, а перебір починається з другого:

Var a \u003d; function foo (prevNum, curNum) (sum \u003d prevNum + curNum; alert (sum); return sum;) var result \u003d a.reduce (foo, 0); document.write (result); спробувати зараз »

Розберемо як працює цей приклад. Першими аргументами функції foo є:

prevNum \u003d 0 (так як initialValue - 0)
curNum \u003d 1 (поточний елемент - 1-ий елемент масиву)

До числа 0 додається 1. Цей результат (sum: 1) буде переданий як prevNum при наступному запуску функції. І так далі поки не дійде до останнього елемента. Повернений результат - сума від останнього запуску, складе 15 (1 + 2 + 3 + 4 + 5).

Метод reduceRight працює аналогічно методу reduce, але йде по масиву справа-наліво:

Var a \u003d [ "h", "o", "m", "e"]; function bar (prevStr, curItem) (return prevStr + curItem;) document.write (a.reduceRight (bar)); // emoh

В JavaScript. Тут ми продовжимо знайомство з масиву. Поговоримо про властивості length - як дізнатися: скільки ж елементів містить Масив?

навчимося додавати елементи в початок і кінець Масиву - це методи unshift і push відповідно.

А також за допомогою методів shift і pop зможемо видалити елементи також з початку і кінця Масиву!

По суті, Масив - це якийсь об'єкт, що складається з певного числа різних елементів.

Властивість length дозволять дізнатися кількість елементів в Масиві.

Для прикладу давайте візьмемо Масив семи днів тижня знайомий нам по минулій темі.

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

array.length - такий код дає нам число елементів Масиву (де array - ім'я Масиву) .

Таким чином, в змінну count ми помістили число, що дорівнює кількості елементів Масиву.

Ось так працює властивість length.

Метод push - додає елемент в кінець Масиву.

Для того щоб почати роботу з методами додавання елементів, потрібно створити будь-якої Масив.

Нижче я створив Масив «Друзі» - friends.

Зараз нам необхідно додати елемент, тобто ще одне Ім'я в кінець Масиву.

Для цього існує метод push - він додає елемент в кінець Масиву. Це виглядає наступним чином:

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

Яків

Для перевірки роботи методу push в прикладі вище, ми вивели кількість елементів Масиву friends за допомогою властивості length - їх стало 5. Потім вивели весь Масив friends, а також останній елемент Масиву .

Тепер Ви можете самі переконатися, що елемент доданий в кінець Масиву!

Метод unshift - додає елемент в початок Масиву.

Тут ми знову звернемося до Масиву friends.

Тепер нам потрібно додати елемент в початок Масиву. Для цього існує метод unshift.

Кількість елементів в Масиві дорівнює 5

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

Борис

Для перевірки роботи методу unshift ми вивели кількість елементів Масиву friends за допомогою властивості length, потім вивели весь Масив friends, а також перший елемент Масиву (Нагадуємо, що нумерація елементів Масиву починається з 0) .

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

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

І знову працюємо з Масивом «Друзі»

Використовуючи метод pop - видаляємо останній елемент з Масиву:

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

В'ячеслав

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

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

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

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

За допомогою методу shift - видаляємо перший елемент з Масиву:

Кількість елементів в Масиві дорівнює 3

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

Григорій

І, нарешті, для перевірки роботи методу shift ми вивели кількість елементів знову отриманого Масиву за допомогою властивості length, потім вивели весь Масив friends - вже без видаленого першого елемента.

А також вивели перший елемент Масиву. Нумерація в Масиві починається з 0 !!!

Нагадаю для Вас і для себе один цікавий момент цієї статті!

Для того щоб дізнатися номер / індекс останнього елемента Масиву, потрібно з числа його елементів (Тобто з) Відняти одиницю !!!

Ми вже працювали з цим в пункті теми.

Хорошим варіантом ілюстрації цього моменту буде продовження прикладу з пункту теми, де ми розглядали Масив семи днів тижня.

Кількість елементів в Масиві days одно 7

Номером останнього елемента Масиву є число 6

Отже, цим прикладом ми заодно ще раз відзначили той факт, що нумерація в Масиві починається з 0. І, як видно з цього прикладу, номером 7-го елемента масиву є число 6.

В кінці цієї теми також виконаємо домашнє завдання. І знову спробуйте вирішити його самостійно.

Домашнє завдання з видалення з ... і додаванню елементів в Масив в Javascript має такий зміст:

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

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

Зараз в моїй кошику 3 фрукта

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

Зараз в моїй кошику 6 фруктів

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

Зараз в моїй кошику 4 фрукта