Skip to content

4. Масиви

Image

4.1. скрипт [tab-01]

Наступний скрипт ілюструє деякі особливості масивів у JavaScript. Вони схожі на масиви PHP, проте мають одну істотну відмінність: ними керують за допомогою покажчиків, і вони розглядаються як об’єкти.


'use strict';

// масив є об’єктом, з яким працюють через його адресу
const tab1 = [1, 2, 3];
// копіювання адрес
const tab2 = tab1;
// tab1 і tab2 вказують на один і той самий масив
console.log("tab1===tab2 :", tab1 === tab2);
// масив можна змінювати, використовуючи як tab1, так і tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Виконання


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

Коментарі

  • у 2-му рядку результатів показано, що [tab1] та [tab2] є двома однаковими об’єктами, а саме двома однаковими покажчиками;
  • 4-й і 5-й рядки результатів показують, що ці два покажчики вказують на один і той самий масив;

4.2. скрипт [tab-02]

Цей скрипт демонструє, що масив у JavaScript відрізняється від масивів у компільованих мовах.


'use strict';

// масив
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// ініціалізація елемента
tab[3] = 100;
tab[1] = "huit";
// масив
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// ключі масиву — це його індекси
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// значення масиву
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • рядок 4: порожній масив;
  • рядок 8: масив не має фіксованого розміру. Це просто послідовність елементів, індексованих за номером. Можна ініціалізувати елемент № 3, навіть якщо елементи [0, 1, 2] ще не визначені;
  • рядки 16–24: масив у JavaScript поводиться аналогічно до масиву PHP;

Виконання


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. скрипт [tab-03]

Цей скрипт демонструє різні методи об’єкта [tableau].


'use strict';
// масив може містити різні типи даних
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log вміє відображати вміст масиву
show(1);
console.log("tab=", tab);
show(2);
// обхід масиву за допомогою foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// інший спосіб написання для виконання тієї ж дії
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// обхід масиву за допомогою for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// зміна табуляції [i]
tab[5] = [];
// виведення
console.log("tab=", tab);
show(5);
// видалення останнього елемента
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// додавання елемента в кінець масиву
tab.push('xyz');
console.log("tab=", tab);
show(7);
// додавання елемента на початок масиву
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// видалення першого елемента з масиву
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// видаляється елемент № 2 з масиву
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// з масиву видаляються два елементи, починаючи з елемента № 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// функція
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Коментарі

  • різницю між масивами PHP та масивами JavaScript ілюструють рядки 3 та 24:
    • у рядку 3 змінна [tab] оголошується як константа;
    • у рядку 24 змінюється елемент tab[5];

У рядку 3 оголошується константою саме покажчик, що вказує на масив, а не сам масив. Останній можна змінювати.

  • рядки 14–16: масив [tab] обходиться за допомогою методу [forEach] масиву [tab]. Цей метод отримує як параметр визначення функції, яку можна назвати літеральною функцією. Ця функція-параметр отримує один параметр: поточний елемент масиву [tab]. Функція викликається для кожного елемента масиву. Такий стиль написання є поширеним у JavaScript;
  • рядки 9–10: для визначення функції-параметра використовується інший синтаксис. Замість того, щоб писати:
    • function(p1, p2, …, pn){….}

пишемо:

  • (продовження)
    • (p1,p2, ..,pn)=>{.…}. Це називається «стрілковою» нотацією або «arrow»;
  • решта коду пояснюється коментарями;

У цьому скрипті слід звернути увагу на те, що:

  • масив — це об’єкт, на який вказує покажчик;
  • що цей об’єкт має методи [forEach, pop, push, shift, unshift];

4.4. скрипт [tab-04]

Цей скрипт демонструє інші методи об’єктів масиву.


'use strict';

// метод обробки масивів

// масив
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// виведення
console.log("tab=", tab);
// карта
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// виведення
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce без початкового значення
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// зведення з початковим значенням
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// фільтрування
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// пошук
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// сортування
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// зворотне сортування
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Коментарі

  • рядки 13–15: метод [map] приймає функцію перетворення як параметр. Ця функція викликається повторно для кожного елемента масиву. Вона відповідає за перетворення елемента в інший об’єкт, у даному випадку — об’єкт із властивостями [prop1, prop2]. Метод [map] повертає новий масив. Попередній масив не змінюється: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • рядок 20: метод [reduce] приймає як параметр функцію з двома параметрами, яка викликається повторно для кожного елемента масиву. Ця функція приймає два параметри:
    • [currentValue] — поточний елемент масиву;
    • [accumulator] — останній результат, отриманий функцією. Якщо для цього акумулятора не передбачено початкового значення, то воно дорівнюватиме 0;
    • під час першого виклику функції накопичення вона повертає [0+tab[0]]. Саме це значення присвоюється накопичувачу;
    • другого разу вона повертає накопичувач+tab[1], тобто tab[0]+tab[1];
    • втретє вона прирівнює накопичувач до tab[2], тобто tab[0] + tab[1] + tab[2];
    • і т. д. У підсумку акумулятор буде містити суму всіх елементів масиву [tab];
  • рядок 26: метод [filter] має як параметр функцію фільтрації. Ця функція викликається повторно для кожного елемента масиву й отримує його як параметр. Вона повинна повертати:
    • [true], якщо елемент слід зберегти;
    • [false] — в іншому випадку;
  • рядок 33: метод [find] має як параметр функцію пошуку. Ця функція викликається повторно для кожного елемента масиву й отримує його як параметр. Вона повинна повертати [true], якщо отриманий елемент відповідає критерію пошуку. У цьому випадку функція зупиняється. Отже, метод [find] повертає 0 або 1 елемент;
  • рядок 36: метод [findIndex] працює так само, як метод [find], але замість того, щоб повертати знайдений елемент, він повертає його індекс у масиві;
  • рядки 39, 41: метод [indexOf(valeur)] шукає [valeur] у масиві та повертає його індекс, або -1, якщо його не знайдено;
  • рядок 44: метод [lastIndexOf(valeur)] працює так само, як метод [indexOf(valeur)], але починає пошук з кінця масиву;
  • рядок 47: метод [sort] без параметрів повертає масив, відсортований у природному порядку (числа, рядки);
  • рядок 50: коли природний порядок не підходить, потрібно передати методу [sort] функцію з двома параметрами (e1, e2), яка повертає:
    • +1, якщо e1 має бути відсортовано після e2;
    • -1, якщо e1 має бути відсортовано перед e2;
    • 0, якщо обидва елементи мають мати однаковий порядок;

Функція, передана як параметр методу [sort], неодноразово викликається цим методом для порівняння двох елементів масиву;

https://stahe.github.io
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах Creative Commons «Вказання авторства — Некомерційне використання — Поділитися на рівних умовах 3.0 без змін.