jsArrayMethods = [видове, употреби, ползи]

Масиви, масиви и още масиви. Масиви от масиви. Масиви от масиви от масиви. И така нататък…

По време на Фаза 1 от тренировъчния лагер по софтуерно инженерство на Flatiron School ядох, пих, мечтаех и кодирах масиви. Имаше обаче метод за тази лудост (игра на думи).

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

Според DigitalOcean:

Масивите са много полезни, тъй като съхраняват множество стойности в една променлива, която може да кондензира и организира нашия код, което го прави по-четлив и поддържаем. Масивите могат да съдържат произволен тип данни, включително числа, низове и обекти.

След кратко и продуктивно търсене в Google намерих 33 различни метода за JS масив. Не се притеснявайте, няма да ги обсъждам всички тук; но все пак искам да обърна внимание на няколко, които ми бяха най-полезни, докато завършвах лабораториите по кодиране и изграждах моя проект за кодиране от Фаза 1.

И така, какво е JS масив?

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

myArray = [5, 'I am a string', [a, b], 11]

Методи за неразрушителен JS масив

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

Видът методи на JS масив, които намирам за най-полезни, са тези, които са неразрушителни. Когато тези типове методи се извикват върху масив, те изпълняват функция върху него (и понякога връщат нова) и оригиналният масив остава непокътнат. Нека да разгледаме моите любими.

.за всеки()

Методът .forEach() JS масив извиква функция за всеки елемент в масив. Използвах този метод в моя проект за кодиране, за да създавам карти с данни в движение. В кода по-долу функцията addInfoCard() се извиква за всеки обект в моя JSON файл, предотвратявайки досадното ръчно добавяне на форматиране и интерполирани данни за всеки обект.

function launchSpacecraft() {
    const audioElement = new Audio("sounds/launch-85216.mp3")
    audioElement.play()
    dataArray.forEach(addInfoCard)
}

function addInfoCard (spacecraft) {
    const infoCard = document.getElementById('grid-wrapper')
    infoCard.innerHTML +=
        `
        <div class="infocard">
            <img src="${spacecraft.img}" style="width: 100%">
            <div class="card-details">
                <h3>${spacecraft.name}</h4> 
                <p><b>Country:</b> ${spacecraft.agency.country_code}</p>
                <p><b>Agency:</b> ${spacecraft.agency.name}</p>
                <p><b>Maiden Voyage</b>: ${spacecraft.maiden_flight}</p>
                <p class="inUse" style="display: none;">${spacecraft.in_use}</>
            </div>
        </div>
        `
}

Можете да видите резултатите на изображението по-долу.

.filter()

Методът .filter() е друг любим. Той връща нов масив от елементи, които преминават условния тест на функцията. Например, ако искам да знам дали някой от моите колеги е на 30 или повече години, следният код ще върне масив от 5 елемента: [45, 54, 32, 38, 42].

const coworkerAges = [25, 28, 45, 54, 32, 38, 42]

const overThirty = (age) => age >= 30

document.getElementById('demo').innerHTML = coworkerAges.filter(overThirty)

.map()

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

Ето пример за .map() в действие. Следният код връща нов масив, наречен tripleNum, който включва следните елементи: [3, 6, 9, 12, 15].

const numberArray = [1, 2, 3, 4, 5]
const tripleNum = numberArray.map(number => number * 3)
});

Сега, след като се запознахте с няколко метода за недеструктивни JS масиви, надявам се, че можете да ги включите в кода си, за да увеличите ефективността и производителността при работа с данни от приложения. Както отбелязах по-рано, споменах само 3-те, които сметнах за най-полезни (досега) в тази статия. Има още 30, които да изследвате!

Ресурси

Разбиране на масивите в Javascript. Урок за Digital Ocean JS. https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript.

Справочник за Javascript масив. W3Schools. https://www.w3schools.com/jsref/jsref_obj_array.asp.

Шан, П. (9/2/2017). Гмуркане дълбоко в JavaScript масиви — еволюция и производителност. Празно платно. https://www.voidcanvas.com/javascript-array-evolution-performance/.

Морели, Б. (12/11/2017). JavaScript — Карта срещу ForEach. Codeburst. https://codeburst.io/javascript-map-vs-foreach-f38111822c0f.