Уметање ЈаваСцрипт низа - Како додати у низ помоћу функција Пусх, Унсхифт и Цонцат

ЈаваСцрипт низови су лако један од мојих омиљених типова података. Они су динамични, једноставни за употребу и нуде читав низ уграђених метода које можемо искористити.

Међутим, што више опција имате, то може бити збуњујуће при одлучивању коју бисте требали користити.

У овом чланку бих желео да разговарам о неким уобичајеним начинима додавања елемента у ЈаваСцрипт низ.

Пусх метода

Прва и вероватно најчешћа метода низа ЈаваСцрипт која ћете срести је пусх () . Метода пусх () користи се за додавање елемента на крај низа.

Рецимо да имате низ елемената, а сваки елемент је низ који представља задатак који треба да обавите. Било би логично додати новије ставке на крај низа како бисмо могли прво да завршимо раније задатке.

Погледајмо пример у облику кода:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

У реду, тако да нам је пусх дао лепу и једноставну синтаксу за додавање ставке на крај нашег низа.

Рецимо да смо желели да додамо две или три ставке одједном на нашу листу, шта бисмо онда радили? Испоставило се да пусх () може прихватити више елемената који се додају одједном.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Сад кад смо нашем низу додали још неколико задатака, можда бисмо желели да знамо колико се предмета тренутно налази у нашем низу да бисмо утврдили имамо ли превише на тањиру.

Срећом, пусх () има повратну вредност са дужином низа након додавања наших елемената.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Метода без померања

Нису сви задаци једнаки. Можда налетите на сценарио у којем додајете задатке у свој низ и одједном наиђете на онај који је хитнији од осталих.

Време је да представимо нашег пријатеља унсхифт () који нам омогућава додавање ставки на почетак низа.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

У горњем примеру можете приметити да, баш као и пусх () метода, унсхифт () враћа нову дужину низа коју ћемо користити. Такође нам даје могућност додавања више елемената одједном.

Цонцат метода

Скраћено од цонцатенате (за повезивање заједно), метода цонцат () користи се за спајање два (или више) низа.

Ако се сећате одозго, методе унсхифт () и пусх () враћају дужину новог низа. цонцат () , с друге стране,вратиће потпуно нови низ.

Ово је врло важна разлика и чини цонцат () изузетно корисним када имате посла са низовима које не желите да мутирате (попут низова ускладиштених у стању Реацт).

Ево како би могао изгледати прилично основни и једноставан случај:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Рецимо да имате више низова које бисте желели да спојите. Без бриге, цонцат () је ту да спаси дан!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Клонирање са Цонцатом

Сећате се како сам рекао да цонцат () може бити користан када не желите да мутирате свој постојећи низ? Погледајмо како можемо искористити овај концепт за копирање садржаја једног низа у нови низ.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Авесоме! У основи можемо „клонирати“ низ користећи цонцат () .

Али постоји мали „проблем“ у овом процесу клонирања. Нови низ је „плитка копија“ копираног низа. То значи да се било који објекат копира референцом, а не стварни објекат.

Погледајмо пример како бисмо јасније објаснили ову идеју.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Иако нисмо директно извршили никакве промене у нашем оригиналном низу, на крај су на крају утицале промене које смо направили у нашем клонираном низу!

Постоји више различитих начина да правилно направите „дубоки клон“ низа, али оставићу вам то као домаћи задатак.

ТЛ; ДР

Када желите да додате елемент на крај низа, користите пусх (). Ако требате да додате елемент на почетак низа, покушајте са унсхифт (). И можетедодајте низове заједно користећи цонцат ().

Свакако постоји много других опција за додавање елемената у низ и позивам вас да изађете и пронађете још неколико сјајних метода низа!

Слободно ме контактирајте на Твиттер-у и обавестите ме о вашем омиљеном методу низа за додавање елемената у низ.