15 метода на JavaScript масив, които трябва да овладеете днес

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

Един от най-мощните градивни елементи, вградени в езика JavaScript, са масивите. Масивите обикновено се срещат в много езици за програмиране и са полезни за съхранение на данни.

JavaScript включва и полезни функции, известни като методи за масиви. Ето петнадесет, които трябва да разгледате отблизо, за да развиете уменията си като разработчик.

Какви са методите на масива?

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

Методите на масиви в JavaScript се изпълняват с помощта на точка-нотация, прикрепена към променливата на вашия масив. Тъй като те са просто функции на JavaScript, те винаги завършват с скоби, които могат да съдържат незадължителни аргументи. Ето метод, прикрепен към прост масив, наречен myArray .

let myArray = [1,2,3]; myArray.pop();

Този код би приложил метод, наречен поп към масива.

Примерен масив

За всеки пример използвайте примерен масив, който ще извикаме myArray , за да изпълните методите на. Чувствайте се свободни да изтеглите конзолата си и да кодирате.

let myArray = [2,4,5,7,9,12,14];

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

Вкопайте се в тези петнадесет мощни метода на масива!

1. Array.push ()

Какво прави: push () взема вашия масив и добавя един или повече елементи в края на масива, след което връща новата дължина на масива. Този метод ще промени съществуващия ви масив.

Добавете числото 20 към масива, като стартирате push () , като използва 20 като аргумент.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

Проверете дали работи:

console.log(myArray); [2,4,5,7,9,12,14,20]

Изпълнение на push () метод на myArray добави стойността, дадена в аргумента, в масива. В този случай 20. Когато проверите myArray в конзолата, ще видите, че стойността е добавена към края на масива.

2. Array.concat ()

Какво прави: concat () може да обедини два или повече масива в нов масив. Той не променя съществуващите масиви, а създава нов.

Предприеме myArray и обединяване на масив, наречен newArray в него.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

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

3. Array.join ()

Какво прави: присъединяване() взема масив и свързва съдържанието на масива, разделено със запетая. Резултатът се поставя в низ. Можете да посочите разделител, ако искате да използвате алтернатива на запетая.

Вижте как работи това с помощта на myArray. Първо използвайте метода по подразбиране без разделител, който ще използва запетая.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

JavaScript ще изведе низ, като всяка стойност в масива е разделена със запетая. Можете да използвате аргумент във функцията, за да промените разделителя. Наблюдавайте го с два аргумента: едно интервал и низ.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Първият пример е интервал, който прави низ, който лесно можете да прочетете.

Вторият пример използва (' и ') , и тук трябва да знаете две неща.

Първо, използваме думата „и“, за да разделим стойностите. Второ, има място от двете страни на думата „и“. Това е важно нещо, което трябва да имате предвид, когато използвате присъединяване() . JavaScript чете аргументи буквално; така че ако това пространство е изоставено, всичко ще бъде изтрито заедно (т.е. '2and4and5 ...' и т.н.) Не е много четлив изход!

4. Array.forEach ()

Какво прави: за всеки() (чувствителен към регистър!) изпълнява функция за всеки елемент от вашия масив. Тази функция е всяка функция, която създавате, подобно на използването на цикъл „for“ за прилагане на функция към масив, но с много по -малко работа за кодиране.

Има още малко за за всеки() ; погледнете синтаксиса, след това изпълнете проста функция за демонстрация.

  
myArray.forEach(function(item){  
//code  
});

Ние използваме myArray , за всеки() се прилага с точкова нотация. Поставяте функцията, която искате да използвате, в скобата на аргумента, която е функция (елемент) в примера.

Погледни функция (елемент) . Това е функцията, изпълнявана вътре във forEach (), и тя има свой собствен аргумент. Извикваме аргумента вещ . Има две неща, които трябва да знаете за този аргумент:

Когато forEach () се върти над вашия масив, той прилага кода към този аргумент. Мислете за това като за временна променлива, която съдържа текущия елемент.
Вие избирате името на аргумента, той може да бъде наречен както искате. Обикновено това би било наречено нещо, което улеснява разбирането, като „елемент“ или „елемент“.

Имайки предвид тези две неща, вижте този прост пример. Добавете 15 към всяка стойност и накарайте конзолата да покаже резултата.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

Ние използваме вещ в този пример като променлива, така че функцията е написана за добавяне на 15 към всяка стойност чрез вещ . След това конзолата отпечатва резултатите. Ето как изглежда в конзола на Google Chrome.

Резултатът е всяко число в масива, но с 15 добавени към него!

5. Array.map ()

Какво прави: map () изпълнява функция за всеки елемент от вашия масив и поставя резултата в нов масив.

Изпълнението на функция за всеки елемент звучи като forEach (). Разликата тук е map () създава нов масив, когато се изпълнява. forEach () не създава нов масив автоматично, ще трябва да кодирате определена функция, за да го направите.

Използвайте map (), за да удвоите стойността на всеки елемент в myArray и ги поставете в нов масив. Ще видите същото функция (елемент) синтаксис за малко повече практика.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Проверете резултатите в конзолата.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray е непроменен:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

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

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

Когато регистрирате масива в конзолата, трябва да видите числото 0 в началото на масива.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

Какво прави: Сортирането е една от най -често срещаните операции, извършвани върху масив и е много полезна. JavaScript вид() методът array може да се използва за сортиране на масив от числа или дори низове само с един ред код. Тази операция е на място и връща сортирания масив чрез промяна на първоначалния масив. Вземете различен набор от числа за myArray този път.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

Тъй като сортирането се извършва на място, не е нужно да декларирате отделна променлива за сортирания масив.

console.log(myArray); [10, 12, 34, 55, 65]

По подразбиране масивът е сортиран във възходящ ред, но по желание можете да предадете персонализирана функция на вид() метод за сортиране на масива по желания начин. В този случай минах обичай стрелка функция за сортиране на масива числено във възходящ ред.

8. Array.reverse ()

Какво прави: Както подсказва името, обратен() метод се използва за обръщане на реда на елементите в масива. Имайте предвид, че това не обръща съдържанието на масива, а само самата поръчка. Ето пример за по -добро разбиране на този метод:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

Запишете изхода в конзолата, за да проверите операцията.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Както можете да видите, редът на елементите е обърнат. Преди това елементът в последния индекс (елемент 14 в индекс 6) сега е елементът в нулевия индекс и т.н.

9. Array.slice ()

Какво прави: филийка () се използва за извличане на плитко копие на част от масив. По -просто казано, този метод ви позволява да избирате конкретни елементи от масив по техния индекс. Можете да предадете началния индекс на елемента, от който искате да извлечете, и елементите и по избор и крайния индекс.

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

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

В горния код всички елементи от втория индекс до последния се извличат, тъй като параметърът на крайния индекс не е предаден. Влезте и двата масива в конзолата.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Очевидно първоначалният масив не се променя от метода slice () и вместо това връща нов масив, който се съхранява в нарязан масив променлива. Ето пример, в който параметърът на крайния индекс също се предава на филийка () метод.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice ()

Какво прави: снаждане () е полезен метод за масив, използван за премахване или подмяна на елементи в масива на място. Като посочва индекса и броя на елементите за изтриване, той променя масива.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

В горния пример, myArray масивът е снаден от индекс 2 и 3 елемента са премахнати от него. Сега масивът се състои от:

[2, 4, 12, 14]

За да замените елементите, а не просто да ги изтриете, можете да предадете произволен брой незадължителни параметри с елементите, с които искате да замените, например:

как да завърша извинително писмо

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

Какво прави: филтър () method е полезен метод за масив, който приема функция, съдържаща тест и връща нов масив с всички елементи, които преминават този тест. Вярно с името си, този метод се използва за филтриране на необходимите ви елементи от другите елементи. Филтрирането се извършва с помощта на функция, която връща булева стойност.

Ето пример за филтър () метод, използван за получаване само на тези елементи от масива, които са делими на 2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

В горния пример функция със стрелка се предава като параметър, който взема всяко число от оригиналния масив и проверява дали е делимо на 2, използвайки модула ( % ) и равенство ( === ) оператор. Ето как изглежда изходът:

[2, 4, 12, 14]

12. Array.reduce ()

Какво прави: намали () е метод на масив, който приема функция редуктор и я изпълнява на всеки елемент от масив, за да изведе една стойност, докато се връща. Той изисква функция редуктор с променлива на акумулатора и променлива на текущ елемент като необходими параметри. Стойността на акумулатора се помни във всички итерации и в крайна сметка се връща след последната итерация.

Популярен случай на използване на този метод е да се изчисли сумата от всички елементи в масива. Изпълнението на тази функционалност е както следва:

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 се предава като втори параметър в горния пример, който се използва като начална стойност на променливата на акумулатора. The sumOfNums променливата ще съдържа връщаната стойност на намали () метод, който се очаква да бъде сумата от всички елементи в масива.

console.log(sumOfNums); 53

13. Array.includes ()

Какво прави: Търсенето на елемент в масив, за да се провери дали е налице, е операция, която се използва доста често и следователно JavaScript има вграден метод за това под формата на включва() метод на масива. Ето как можете да го използвате:

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

Този метод взема задължителен параметър, елемента за търсене и незадължителен параметър, индекса на масива, от който да започне търсенето. В зависимост от това дали този елемент присъства или не, той ще се върне вярно или невярно съответно. Следователно изходът ще бъде:

true  
false  
true  
false

14. Array.indexOf ()

Какво прави: индекс на() метод се използва за откриване на индекса, при който първото появяване на определен елемент може да бъде намерено в масива. Въпреки че е подобен на метода include (), този метод връща числовия индекс или -1, ако елементът не присъства в масива.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

индекс на() метод използва строго равенство, за да провери дали има елемент, което означава, че стойността, както и типът данни, трябва да бъдат еднакви. Вторият незадължителен параметър отнема индекса, от който да започне търсенето. Въз основа на тези критерии изходът ще изглежда така:

1  
-1  
4

15. Array.fill ()

Какво прави: Често може да се наложи да зададете всички стойности в масива на статична стойност, като например 0. Вместо да използвате цикъл, можете да опитате запълни () метод за същата цел. Можете да извикате този метод за масив с 1 задължителен параметър: стойността, с която да попълните масива, и 2 незадължителни параметъра: началният и крайният индекс, който да попълните между тях. Този метод променя изходящия масив.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

Когато регистрирате изхода към конзолата, ще видите:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

Следващи стъпки във вашето JavaScript пътуване

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

Докато продължавате да изучавате JavaScript, MDN е чудесен ресурс за подробна документация. Успокойте се в конзолата, след това издигнете уменията си с най -добрите JavaScript редактори за програмисти. Готови ли сте да изградите уебсайта си с JavaScript? Защо не разгледате някои рамки, които можете да обмислите.

Дял Дял Туит електронна поща 6 JavaScript рамки, които си струва да се научат

Има много JavaScript рамки, които помагат за развитието. Ето някои, които трябва да знаете.

Прочетете Напред Свързани теми

Програмиране
JavaScript
Съвети за кодиране

За автора Нитин Ранганат(31 статии са публикувани)

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

Още от Nitin Ranganath

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате