Push javascript приклади. Масиви в JavaScript. Array являє собою об'єкт, що з цього випливає

В 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 фрукта

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

Parameters

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 = [ "soccer", "baseball"] let total = 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 = [ "parsnip", "potato"] let moreVegs = [ "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 = (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

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

масиви

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

Відлік індексів масивів в мові JavaScript починається з нуля і для них використовуються 32-бітові цілі числа - перший елемент масиву має індекс 0. Масиви в JavaScript є динамічними: вони можуть збільшуватися і зменшуватися в розмірах у міру необхідності; немає необхідності оголошувати фіксовані розміри масивів при їх створенні або повторно розподіляти пам'ять при зміні їх розмірів.

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

створення масивів

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

Var empty =; // Порожній масив var numbers =; // Масив з п'ятьма числовими елементами var misc = [1.1, true, "a",]; // 3 елементи різних типів + завершальна кома var base = 1024; var table =; // Масив зі змінними var arrObj = [,]; // 2 масиву всередині, що містять об'єкти

Синтаксис литералов масивів дозволяє вставляти необов'язкову завершальну кому, тобто літерал [,] відповідає масиву з двома елементами, а не з трьома.

Інший спосіб створення масиву полягає у виклику конструктора Array (). Викликати конструктор можна трьома різними способами:

Викликати конструктор без аргументів:

Var arr = new Array ();

У цьому випадку буде створено порожній масив, еквівалентний ЛІТЕРАЛЬ.

Викликати конструктор з єдиним числовим аргументом, що визначає довжину масиву:

Var arr = new Array (10);

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

Явно вказати у виклику конструктора значення перших двох або більше елементів масиву або один нечислової елемент:

Var arr = new Array (5, 4, 3, 2, 1, "тест");

В цьому випадку аргументи конструктора стають значеннями елементів нового масиву. Використання литералов масивів практично завжди простіше, ніж подібне застосування конструктора Array ().

Читання і запис елементів масиву

Доступ до елементів масиву здійснюється за допомогою оператора. Зліва від дужок повинна бути присутнім посилання на масив. Усередині дужок має перебувати довільне вираз, що повертає невід'ємне ціле значення. Цей синтаксис придатний як для читання, так і для запису значення елемента масиву. Отже, допустимі всі наведені далі JavaScript-інструкції:

// Створити масив з одним елементом var arr = [ "world"]; // Прочитати елемент 0 var value = arr; // Записати значення в елемент 1 arr = 3.14; // Записати значення в елемент 2 i = 2; arr [i] = 3; // Записати значення в елемент 3 arr = "привіт"; // Прочитати елементи 0 і 2, записати значення в елемент 3 arr] = arr;

Нагадаю, що масиви є спеціалізованою різновидом об'єктів. Квадратні дужки, які використовуються для доступу до елементів масиву, діють точно так же, як квадратні дужки, які використовуються для доступу до властивостей об'єкта. Інтерпретатор JavaScript перетворює зазначені в дужках числові індекси в рядки - індекс 1 перетворюється в рядок "1" - а потім використовує рядки як імена властивостей.

У перетворенні числових індексів в рядки немає нічого особливого: те ж саме можна проробляти зі звичайними об'єктами:

Var obj = (); // Створити простий об'єкт obj = "one"; // індексувати його цілими числами

Особливість масивів полягає в тому, що при використанні імен властивостей, які є невід'ємними цілими числами, масиви автоматично визначають значення властивості length. Наприклад, вище був створений масив arr з єдиним елементом. Потім були привласнені значення його елементів з індексами 1, 2 і 3. В результаті цих операцій значення властивості length масиву змінилося і стало рівним 4.

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

Зверніть увагу, що в якості індексів масивів допускається використовувати негативні і не цілі числа. У цьому випадку числа перетворюються в рядки, які використовуються як імена властивостей.

Додавання і видалення елементів масиву

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

Var arr =; // Створити порожній масив arr.push ( "zero"); // Додати значення в кінець arr.push ( "one", 2); // Додати ще два значення

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

Видаляти елементи масиву можна за допомогою оператора delete, як звичайні властивості об'єктів:

Var arr =; delete arr; 2 in arr; // false, індекс 2 в масиві не визначений arr.length; // 3: оператор delete не змінює властивість length масиву

Видалення елемента нагадує (але дещо відрізняється) присвоювання значення undefined цьому елементу. Зверніть увагу, що застосування оператора delete до елементу масиву не змінює значення властивості length і не зрушує вниз елементи з більш високими індексами, щоб заповнити порожнечу, що залишилася після видалення елемента.

Крім того є можливість видаляти елементи в кінці масиву простим привласненням нового значення властивості length. Масиви мають метод pop ()(Протилежний методу push ()), який зменшує довжину масиву на 1 і повертає значення видаленого елемента. Також є метод shift ()(Протилежний методу unshift ()), який видаляє елемент на початку масиву. На відміну від оператора delete, метод shift () зрушує все елементи вниз на позицію нижче їх поточних індексів.

Нарешті існує багатоцільовий метод splice (), Що дозволяє вставляти, видаляти і заміщати елементи масивів. Він змінює значення властивості length і зрушує елементи масиву з більш низькими або високими індексами в міру необхідності. Всі ці методи ми розберемо трохи пізніше.

багатовимірні масиви

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

Наприклад, припустимо, що змінна matrix - це масив масивів чисел. Кожен елемент matrix [x] - це масив чисел. Для доступу до певного числа в масиві можна використовувати вираз matrix [x] [y]. Нижче наводиться конкретний приклад, де двовимірний масив використовується в якості таблиці множення:

// Створити багатовимірний масив var table = new Array (10); // У таблиці 10 рядків for (var i = 0; i

Методи класу Array

Стандарт ECMAScript 3 визначає в складі Array.prototype безліч зручних функцій для роботи з масивами, які доступні як методи будь-якого масиву. Ці методи будуть представлені в наступних підрозділах.

Метод join ()

Метод Array.join () перетворює всі елементи масиву в рядки, об'єднує їх і повертає отриману рядок. У необов'язковий аргумент методу можна передати рядок, яка буде використовуватися для відділення елементів в рядку результату. Якщо рядок-роздільник не вказана, використовується кома. Наприклад, наступний фрагмент дає в результаті рядок "1,2,3":

Var arr =; arr.join (); // "1,2,3" arr.join ( "-"); // "1-2-3"

Метод reverse ()

Метод Array.reverse () змінює порядок проходження елементів в масиві на зворотний і повертає переупорядочение масив. Перестановка виконується безпосередньо у вихідному масиві, тобто цей метод не створює новий масив з Упорядкування об'єктів, а переупорядочівать їх в уже існуючому масиві. Наприклад, наступний фрагмент, де використовуються методи reverse () і join (), дає в результаті рядок "3,2,1":

Var arr =; arr.reverse (). join (); // "3,2,1"

Метод sort ()

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

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

Var arr =; arr.sort (); // Алфавітний порядок: 1111, 222, 33, 4 arr.sort (function (a, b) (// Числовий порядок: 4, 33, 222, 1111 return ab; // Повертає значення 0 // залежно від порядку сортування a і b)); // Сортуємо в зворотному напрямку, від більшого до меншого arr.sort (function (a, b) (return b-a));

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

Метод concat ()

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

Var arr =; arr.concat (4, 5); // поверне arr.concat (); // поверне arr.concat (,) // поверне arr.concat (4,]) // Поверне]

Метод slice ()

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

Якщо вказано тільки один аргумент, що повертається масив містить всі елементи від початкової позиції до кінця масиву. Якщо який-небудь з аргументів має від'ємне значення, він визначає номер елемента щодо кінця масиву. Так, аргументу -1 відповідає останній елемент масиву, а аргументу -3 - третій елемент масиву з кінця. Ось кілька прикладів:

Var arr =; arr.slice (0,3); // поверне arr.slice (3); // поверне arr.slice (1, -1); // поверне arr.slice (-3, -2); // поверне

Метод splice ()

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

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

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

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

Var arr =; arr.splice (4); // поверне, arr = arr.splice (1,2); // поверне, arr = arr.splice (1,1); // поверне; arr = arr =; arr.splice (2,0, "a", "b"); // поверне; arr =

Методи push () і pop ()

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

Методи unshift () і shift ()

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