JavaScript masyvai

1. Kaip pasiekti narius

1.1. Narių nuskaitymas:

1.1.1. Pagal indeksą

> [ 'a', 'b', 'c' ][0]
'a'

1.1.2. [].at()

Su teigiamais skaičiais [...].at( index ) atitinka [...][index].

Nauda atsiranda, kai reikia pasiekti narius nuo galo:

> [ 1, 2, 3 ].at( -1 )
3

1.1.3. Destructuring

Kairėje lygybės pusėje parašius kintamųjų vardus tarp laužtinių skliaustų galima jiems priskirti atitinkamus masyvo narius:

> [ a, b ] = [ 1, 2, 3 ]
[ 1, 2, 3 ]
> a
1
> b
2

> [ first, ...rest ] = [ 1, 2, 3 ]
[ 1, 2, 3 ]
> first
1
> rest
[ 2, 3 ]

Taip pat galima destructurinti ir funkcijų argumentus:

> ( ([ first ]) =>
... first
... )([ 3, 2, 1 ])
3

1.2. Narių keitimas:

> arr = [ 'a', 'b' ]
> arr[1] = 'r'
> arr[2] = 'ray'
> arr
[ 'a', 'r', 'ray' ]

2. Properties

[ 1, 2, 3 ].length: Ilgis. Šiuo atveju 3.

3. Operacijos

Spread operator `...`

> [ 1, ...[ 2, 3 ]]
[ 1, 2, 3 ]

"Įskleidžia" masyvą į kitą masyvą.

Dėmesio: skirtingai nuo objektų, į masyvus galima spread'inti ne viską, o tik Iterable rūšies reikšmes:

> [ ...false ]
Uncaught TypeError: false is not iterable

Naršyklėje:

> document.querySelectorAll( 'a' )
NodeList(3) [ a, a, a ]
> [ ...document.querySelectorAll( 'a' )]
Array(3) [ a, a, a ]

4. Metodai

Kodui žemiau naudosime: arr = [ 1, 2, 3, 4, 5 ].

4.1. Iterative metodai

Šie metodai kviečiami kiekvienam masyvo nariui.

Kaip argumentas jiems būna paduodama funkcija. Ši funkcija gauna tokius argumentus:

item: Masyvo narys.
index: Masyvo nario indeksas.
array: Pats masyvas, kuris iteruojamas.

Iterative metodai nepakeičia originalaus masyvo.

Iterative metodų sąrašas:

arr.every( item => item > 0 )

Tikrina ar kiekvienam nariui nurodyta funkcija grąžina truthy reikšmę. Šiuo atveju true.

arr.filter( item => item % 2 )

Grąžina masyvą narių, kuriems nurodyta funkcija grąžina truthy reikšmę. Šiuo atveju [ 1, 3, 5 ].

arr.find( item => item > 2 )

Grąžina pirmą narį, kuriam nurodyta funkcija grąžins truthy reikšmę. Šiuo atveju 3.

arr.findIndex( item => item > 2 )

Grąžina indeksą pirmo nario, kuriam nurodyta funkcija grąžins truthy reikšmę. Šiuo atveju 2.

arr.findLast( item => item < 5 )

Grąžina paskutinį narį, kuriam nurodyta funkcija grąžins truthy reikšmę. Šiuo atveju 4.

arr.findLastIndex( item => item < 5 )

Grąžina indeksą paskutinio nario, kuriam nurodyta funkcija grąžins truthy reikšmę. Šiuo atveju 3.

arr.forEach( console.log )

Iškviečia nurodytą funkciją kiekvienam masyvo nariui. Grąžina undefined. Šiuo atveju:

> arr.forEach( console.log )
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
undefined

arr.map( item => item * 2 )

Grąžina naują masyvą, kuris pagamintas iš paduotos funkcijos rezultatų. Šiuo atveju [ 2, 4, 6, 8, 10 ].

arr.some( item => item > 3 )

Tikrina ar bent vienam nariui nurodyta funkcija grąžina truthy reikšmę. Šiuo atveju true.

4.2. Reduce metodai

Šie metodai kviečiami kiekvienam masyvo nariui.

Jiems paduodami du argumentai:

fn

Funkcija. Ši funkcija gauna tokius argumentus:

previousResult: Ankstesnės iteracijos rezultatas.
item: Masyvo narys.
index: Masyvo nario indeksas.
array: Pats masyvas, kuris iteruojamas.

initialResult

Pradinis rezultatas.

Grąžinama paskutinės iškviestos funkcijos grąžinta reikšmė.

Pavyzdys:

> [ 1, 2, 3 ].reduce(
... ( a, b ) =>
...     a + b,
... 0,
... )
6

arr.reduce(...): Vykdo reduce nuo masyvo pradžios.
arr.reduceRight(...): Vykdo reduce nuo masyvo pabaigos (t.y. dešinės pusės).

4.3. Rūšiavimo metodai

Jei šie metodai kviečiami be argumento, jie surūšiuoja narius taip lyg jie būtų stringai (pagal abėcėlę). Pvz.:

> [ 1, 2, 10, 20 ].sort()
[ 1, 10, 2, 20 ]

Norėdami surūšiuoti ne abėcėline tvarka, kaip pirmą argumentą paduokite funkciją:

Ši funkcija gaus du argumentus (tarkim a, b).
Ši funkcija turi grąžinti skaičių:

jei a > b

teigiamą skaičių,

jei a === b

0,

jei a < b

neigiamą skaičių.

Lengviau galima atsiminti per tai, kad skaičiams surūšiuoti reikia naudoti a - b:

> [ 2, 1, 10, 20 ].sort(
... ( a, b ) =>
...     a - b
... )
[ 1, 2, 10, 20 ]

arr.sort(...): Pakeičia masyvą surūšiuotu (arr narių tvarka pasikeis). Grąžina jį.
arr.toSorted(...): Grąžina naują, surūšiuotą masyvą, padarytą iš arr. arr narių tvarka nepasikeis.

4.4. Masyvą keičiantys metodai

arr.pop()

Išima paskutinį narį iš masyvo: grąžina paskutinį narį, o masyvas liks be paskutinio nario. Šiuo atveju grąžins 5, o arr reikšmė bus [ 1, 2, 3, 4 ].

arr.push( 6, 8 )

"Įdeda" naujus narius į masyvo galą ir grąžina naują masyvo ilgį. Šiuo atveju grąžins 7, o arr reikšmė bus [ 1, 2, 3, 4, 5, 6, 8 ].

arr.reverse()

"Apsuka" masyvą ir grąžina jį. Šiuo atveju arr reikšmė bus [ 5, 4, 3, 2, 1 ]. Ji ir bus grąžinta.

arr.shift()

Išima pirmą narį iš masyvo: grąžina pirmą narį, o masyvas liks be jo. Šiuo atveju grąžins 1, o arr reikšmė bus [ 2, 3, 4, 5 ].

arr.splice( 1, 2, 6, 7, 8 )

Vietoj nurodytos dalies įterpia naujus narius:

Nuo indekso 1 ištrins du narius (2, 3).
Vietoj jų įterps tris naujus narius (6, 7, 8).
Po veiksmo, arr reikšmė bus [ 1, 6, 7, 8, 4, 5 ].
Grąžins ištrintų narių masyvą: [ 2, 3 ].

arr.unshift( 6, 8 )

Įdeda naujus narius į masyvo pradžią ir grąžina naują masyvo ilgį. Šiuo atveju grąžins 7, o arr reikšmė bus [ 6, 8, 1, 2, 3, 4, 5 ].

4.5. Kiti metodai

arr.at( -1 )

Grąžina masyvo narį pagal indeksą. Jei indeksas neigiamas -- atskaičiuoja nuo galo. Šiuo atveju bus 5.

[ 1, [ 2, 3 ],[[ 4 ]]].flat( 1 )

"Suplokština" daugiamačius masyvus: grąžina masyvą, kuriame vietoje giliau esančių masyvų, įstatyti jų nariai. Gylis nurodomas pirmu argumentu. Šiuo atveju bus [ 1, 2, 3, [ 4 ]].

arr.includes( 3 )

Tikrina ar nurodyta reikšmė yra masyve. Šiuo atveju true.

arr.indexOf( 3 )

Jei argumentas yra masyve, grąžina indeksą vietos, kur jis surastas pirmą kartą. Šiuo atveju 2

Jei argumento nėra masyve, grąžina -1.

arr.join( ',' )

Grąžina stringą iš masyvo narių, atskirtų nurodytų stringu. Šiuo atveju 1,2,3,4,5.

[ 2, 2, 3 ].lastIndexOf( 2 )

Jei argumentas yra masyve, grąžina indeksą vietos, kur jis surastas paskutinį kartą. Šiuo atveju 1