Работа с масиви в JavaScript

Масивите са един от най-често използваните методи за съхранение на информация в JavaScript. Най-просто казано, масивите са контейнери за съхранение на данни.

Типът данни, които можете да съхранявате в масив, варира от низове до числа до JavaScript обекти. Можете също така да съхранявате други масиви един в друг.

Ако това е първото ви запознаване с JavaScript масив, по-долу е даден пример за масив, показващ многото различни типове информация, които могат да се съхраняват в масив.

var catArray = [“I love my cat”, 1, {pet: “cat”, name: “Sassafras”, age: 6}, [1, 2, 3]];

Масивите са многофункционални. Можете да ги използвате за повечето видове информация, до която ще трябва да получите достъп по-късно във вашия код. Както можете да видите от този пример, присвоих масив на променлива, наречена „catArray“.

В „catArray“ съм съхранил различни части от полезна информация. Тези данни включват низ, число, JavaScript обект и друг масив.

Разбира се, както при всеки тип система за съхранение, важно е да знаете как да използвате информацията, съхранявана в масив.

В тази статия разглеждам няколко JavaScript метода, използвани за добавяне и премахване на информация от масиви. Тези методи включват push(), pop(), shift() и unshift(). Ще дам определение и използването на всеки метод, последвано от примери за кодиране.

Това не е изчерпателен урок. Това е само отправна точка, която ще ви помогне да събудите апетита си за JavaScript масиви.

Преминаване на границите

Методът push() е този, който използвам най-много, когато взаимодействам с масиви. Този метод добавя още един елемент към вашия съществуващ масив. Методът push() винаги ще добавя новия елемент в края на масива.

Следният код е пример за това как работи push().

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
veggieArray.push(“cauliflower”);
console.log(veggieArray);

Тествайте този код в редактор на код и вижте резултата в конзолата на вашия браузър. Трябва да видите, че сме добавили низа „cauliflower“ в края на veggieArray.

Напукана „царевица“

Методът pop() премахва последния елемент в масива. След премахване на елемента, pop() ще върне премахнатия елемент.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
var removedVeggie = veggieArray.pop();
console.log(removedVeggie);

В този пример pop() премахва низа “corn’’ от veggieArray. Съхранихме veggieArray.pop() в променлива, наречена removedVeggie. Стойността на тази променлива сега е върнатият елемент от масива, който е бил „изваден“. В този случай тази стойност е низът „царевица“.

За превключване или премахване на превключване

Методът shift() е като pop(). Той също така премахва елемент от масив, но вместо да премахва последния елемент в масива, shift() премахва първия.

Този метод се нарича shift() защото „измества“ всички останали елементи в масива с един назад. Това прави индекса на всеки елемент с един по-малък, отколкото е бил преди да бъде изместен.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
var removedVeggie = veggieArray.shift();
console.log(removedVeggie);

В горния пример shift() премахва „моркови“ от масива и го съхранява в променливата removedVeggie. Тъй като премахнахме елемент от началото на масива, променихме и индексите на останалите елементи.

Например, докато „моркови“ беше на veggieArray[0] — което е на индекс 0 в veggieArray — низът „броколи“ сега заема този индекс.

Последно, но не на последно място, имаме unshift(), който е метод, който работи като push(). Този метод, unshift(), добавя нов елемент към масив. Но вместо да добави елемент в края на масива като push(), unshift() добавя новия елемент в началото.

Използвайки предишния ни пример, нека заменим метода push() с unshift(). Правейки това, добавяме низа „карфиол“ в началото на нашия veggieArray , вместо да го добавяме в края.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
veggieArray.unshift(“cauliflower”);
console.log(veggieArray);

Тъй като добавяме елемент в началото на масива, ние увеличихме индекса на всеки елемент след индекс 0 с 1. Например, низът „cauliflower“ сега е с индекс 0, а „carrots“ сега е с индекс 1.

Както можете да видите, има различни начини за добавяне или премахване на елементи от масиви. Ако искате да научите повече за манипулирането на данни от масиви, разгледайте Уеб документите на Mozilla Developer Network за масиви.

W3Schools също има страхотен урок за JavaScript масиви.

За да практикувате основите на JavaScript, вижте упражненията „основен JavaScript на freeCodeCamp“. Курсът „Въведение в JavaScript на Codecademy“ също е чудесен ресурс за начинаещи.

Благодаря много за четенето!