Massivlər və massiv metodları — JavaScript

Bu dərsdə öyrənəcəksən

Massiv yaratmaq, indeksə görə elementə müraciət etmək və onu dəyişmək
push, pop, shift, unshift ilə element əlavə etmək və silmək
map, filter, find və reduce ilə verilənləri emal etmək

Sinifdə 25 şagird varsa, onların qiymətlərini saxlamaq üçün 25 ayrı dəyişən yaratmaq ağlabatan deyil. Bunun üçün massiv var — bir ad altında saxlanılan sıralı siyahı. Sosial şəbəkədəki paylaşımlar, səbətdəki mallar, pleylistdəki mahnılar — bunların hamısı proqramda adətən massiv kimi saxlanılır.

Massiv yaratmaq və elementlər

Massiv kvadrat mötərizədə, elementlər vergüllə ayrılaraq yazılır. Sətirlərdə olduğu kimi, indekslər 0-dan başlayır, length isə elementlərin sayını göstərir. İndeksə yeni qiymət mənimsədərək elementi dəyişmək olar.

JavaScript· Kodu dəyiş və yenidən işə sal

const fruits = ['apple', 'pear', 'pomegranate'];

console.log(fruits[0]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);

fruits[1] = 'quince';
console.log(fruits);

▸ Gözlənilən nəticə

apple
3
pomegranate
[ 'apple', 'quince', 'pomegranate' ]

Element əlavə etmək və silmək

Metod	Nə edir
`push(x)`	sona element əlavə edir
`pop()`	sonuncu elementi silib qaytarır
`unshift(x)`	əvvələ element əlavə edir
`shift()`	birinci elementi silib qaytarır
`includes(x)`	`x` massivdə varmı — `true`/`false`
`indexOf(x)`	`x`-in indeksi, yoxdursa −1

JavaScript· Kodu dəyiş və yenidən işə sal

const queue = ['Aysel', 'Murad'];

queue.push('Leyla');
queue.unshift('Elvin');
console.log(queue);

const last = queue.pop();
const first = queue.shift();
console.log(first, last, queue);

console.log(queue.includes('Murad'), queue.indexOf('Aysel'));

▸ Gözlənilən nəticə

[ 'Elvin', 'Aysel', 'Murad', 'Leyla' ]
Elvin Leyla [ 'Aysel', 'Murad' ]
true 0

forEach və map

Massiv metodlarının çoxu arqument kimi funksiya qəbul edir və onu hər element üçün çağırır. forEach sadəcə hər elementlə nəsə edir, məsələn, çap edir. map isə hər elementi çevirir və nəticələrdən eyni uzunluqda yeni massiv düzəldir. Orijinal massiv dəyişmir.

JavaScript· Kodu dəyiş və yenidən işə sal

const prices = [10, 25, 4];

prices.forEach((price, index) => {
  console.log(`${index}: ${price} AZN`);
});

const sale = prices.map((price) => price * 0.9);
const labels = prices.map((price) => `${price} AZN`);

console.log(sale);
console.log(labels);
console.log(prices);

▸ Gözlənilən nəticə

0: 10 AZN
1: 25 AZN
2: 4 AZN
[ 9, 22.5, 3.6 ]
[ '10 AZN', '25 AZN', '4 AZN' ]
[ 10, 25, 4 ]

filter, find və reduce

filter funksiyanın true qaytardığı elementlərdən yeni massiv düzəldir.
find şərtə uyğun ilk elementi qaytarır, belə element yoxdursa — undefined.
reduce bütün massivi bir qiymətə yığır: cəm, maksimum, sayğac və s.

JavaScript· Kodu dəyiş və yenidən işə sal

const scores = [45, 92, 78, 30, 88];

const passed = scores.filter((s) => s >= 50);
const firstHigh = scores.find((s) => s > 80);
const perfect = scores.find((s) => s === 100);
const total = scores.reduce((sum, s) => sum + s, 0);

console.log(passed);
console.log(firstHigh, perfect);
console.log('Total:', total, 'Average:', total / scores.length);

▸ Gözlənilən nəticə

[ 92, 78, 88 ]
92 undefined
Total: 333 Average: 66.6

reduce ilk baxışdan çətin görünür. Onun funksiyası iki qiymət alır: toplayıcı (sum) və cari element (s). İkinci arqument — 0 — toplayıcının başlanğıc qiymətidir. Hər addımda funksiyanın qaytardığı qiymət növbəti addımda yeni toplayıcı olur:

Addım	sum	s	Qaytarılır
1	0	45	45
2	45	92	137
3	137	78	215
4	215	30	245
5	245	88	333

Bu metodları zəncir kimi birləşdirmək olar: hər biri yeni massiv qaytardığı üçün növbəti metodu dərhal onun üzərində çağırırıq. Aşağıda əvvəlcə keçid balını toplayanlar seçilir, sonra onların balına 5 bal bonus əlavə olunur.

JavaScript· Kodu dəyiş və yenidən işə sal

const scores = [45, 92, 78, 30, 88];

const bonus = scores
  .filter((s) => s >= 50)
  .map((s) => s + 5);

console.log(bonus);
console.log(scores.some((s) => s < 40));
console.log(scores.every((s) => s > 20));

▸ Gözlənilən nəticə

[ 97, 83, 93 ]
true
true

some ən azı bir elementin, every isə bütün elementlərin şərtə uyğun olub-olmadığını yoxlayır.

Sıralama: sort

JavaScript· Kodu dəyiş və yenidən işə sal

const numbers = [10, 9, 1, 100];

console.log([...numbers].sort());
console.log([...numbers].sort((a, b) => a - b));
console.log([...numbers].sort((a, b) => b - a));

const names = ['Murad', 'Aysel', 'Leyla'];
names.sort();
console.log(names);

▸ Gözlənilən nəticə

[ 1, 10, 100, 9 ]
[ 1, 9, 10, 100 ]
[ 100, 10, 9, 1 ]
[ 'Aysel', 'Leyla', 'Murad' ]

[...numbers] massivin surətini çıxarır ki, orijinal pozulmasın. Bu işarə ilə növbəti dərsdə tanış olacaqsan.

İnteraktiv

Simulyasiya yüklənir…

Sıralama alqoritmi elementləri necə müqayisə edib yerlərini dəyişir — addım-addım izlə.

Tapşırıq

Massivdən yalnız cüt ədədləri seç, hər birini 10-a vur və alınan yeni massivi console.log ilə çap et. filter və map metodlarını zəncir kimi birləşdir.

Tapşırıq · JavaScript· Kodu dəyiş və yenidən işə sal

const numbers = [1, 2, 3, 4, 5, 6];
// your code here

▸ Gözlənilən nəticə

[ 20, 40, 60 ]

Əsas fikirlər

Massiv sıralı siyahıdır; indekslər 0-dan başlayır, length elementlərin sayıdır.
push/pop sonla, unshift/shift əvvəllə işləyir.
map hər elementi çevirir, filter seçir, find ilk uyğun elementi tapır.
reduce massivi toplayıcı vasitəsilə bir qiymətə yığır.
Ədədləri sıralamaq üçün sort((a, b) => a - b) yaz; sort orijinalı dəyişir.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10

const a = [5, 10, 15]; olduqda a[1] nəyə bərabərdir?