JavaScript виконання коду JavaScript підключення зовнішнього файлу JavaScript console.log JavaScript змінні і константи JavaScript типи даних JavaScript операції зі змінними JavaScript перетворення даних JavaScript масиви JavaScript умовні конструкції JavaScript цикли JavaScript функції JavaScript область видимості змінних JavaScript замикання і функції IIFE JavaScript Паттерн Модуль JavaScript рекурсивні функції JavaScript перевизначення функцій JavaScript hoisting JavaScript передача параметрів за значенням і за посиланням JavaScript стрілочні функції JavaScript ООП Object JavaScript ООП вкладені об'єкти і масиви в об'єктах JavaScript ООП перевірка наявності і перебір методів і властивостей JavaScript ООП об'єкти у функціях JavaScript ООП конструктори об'єктів JavaScript ООП розширення об'єктів. prototype JavaScript ООП інкапсуляція JavaScript ООП Функція як об'єкт. Методи call і apply JavaScript ООП спадкування JavaScript ООП Ключове слово this JavaScript ООП Object destructuring JavaScript ООП класи JavaScript ООП Date. Робота з датами JavaScript Об'єкт Math. математичні операції JavaScript Об'єкт Array. Робота з масивами JavaScript ООП об'єкт Number JavaScript String JavaScript String Об'єкт RegExp. Регулярні вирази JavaScript String Регулярні вирази в методах String JavaScript String Синтаксис регулярних виразів JavaScript Робота з браузером і BOM JavaScript діалогові вікна JavaScript Історія браузера. об'єкт history JavaScript об'єкт location JavaScript об'єкт navigator JavaScript таймери JavaScript DOM Введення JavaScript DOM Об'єкт document. Пошук елементів JavaScript DOM Властивості об'єкта document JavaScript DOM Об'єкт Node. Навігація по DOM JavaScript DOM Створення, додавання і видалення елементів веб-сторінки JavaScript DOM Об'єкт Element. управління елементами JavaScript DOM Зміна стилю елементів JavaScript події. Введення в обробку подій. JavaScript події обробники JavaScript події. об'єкт Event JavaScript події. поширення подій JavaScript події миші JavaScript події клавіатури JavaScript FORMS. Форми і їх елементи JavaScript FORMS. Кнопки JavaScript FORMS. текстові поля JavaScript FORMS. Прапорці та перемикачі JavaScript FORMS. Список select JavaScript JSON JavaScript зберігання даних. cookie JavaScript зберігання даних. Web Storage JavaScript Collection. Ітератори JavaScript Collection. Генератори JavaScript Collection. Множина Set JavaScript Collection. Map JavaScript Collection. WeakSet і WeakMap JavaScript AJAX. XMLHttpRequest JavaScript AJAX. Відправка даних JavaScript AJAX. Promise в Ajax-запитах

JavaScript Об'єкт Array. Робота з масивами


Об'єкт Array представляє масив і надає ряд властивостей і методів, за допомогою яких ми можемо управляти масивом.


ініціалізація масиву

Можна створити порожній масив, використовуючи квадратні дужки або конструктор Array :

var users = new Array();
var people = [];
 
console.log(users);  // Array[0]
console.log(people); // Array[0]

Можна відразу ж форматувати масив деякою кількістю елементів:

var users = new Array("Tom", "Bill", "Alice");
var people = ["Sam", "John", "Kate"];
 
console.log(users); // ["Tom", "Bill", "Alice"]
console.log(people); // ["Sam", "John", "Kate"]

Можна визначити масив і по ходу визначати в нього нові елементи:

var users = new Array();

users[1] = "Tom";
users[2] = "Kate";

console.log(users[1]); // "Tom"
console.log(users[0]); // undefined

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


length

Щоб дізнатися довжину масиву, використовується властивість length :

var fruit = new Array();
fruit[0] = "яблуко";
fruit[1] = "апельсин";
fruit[2] = "персик";
 
document.write("В масиві fruit " + fruit.length + " елемента: <br/>");

for(var i=0; i < fruit.length; i++){
    document.write(fruit[i] + "<br/>");
]

За фактом довжиною масиву буде індекс останнього елемента з додаванням одиниці. наприклад:

var users = new Array(); // в масиві 0 елементів

users[0] = "Tom";
users[1] = "Kate";
users[4] = "Sam";

for(var i=0; i<users.length;i++){
    console.log(users[i]);
}

Незважаючи на те, що для індексів 2 і 3 ми не додавали елементів, але довжиною масиву в даному випадку буде число 5 . Просто елементи з індексами 2 і 3 будуть мати значення undefined .


Копіювання масиву. slice()

Копіювання масиву може бути поверхневим або неглибоким (shallow copy) і глибоким (deep copy).

При неглибокому копіюванні досить привласнити змінній значення іншої змінної, яка зберігає масив:

var users = ["Tom", "Sam", "Bill"];

console.log(users);     //  ["Tom", "Sam", "Bill"]
var people = users;     //  неглибоое копіювання
 
people[1] = "Mike";     //  змінюємо другий елемент
console.log(users);     //  ["Tom", "Mike", "Bill"]

В даному випадку змінна people після копіювання буде вказувати на той же масив, що і змінна users . Тому при зміні елементів в people , зміняться елементи і в users , так як фактично це один і той же масив.

Така поведінка не завжди є бажаною. Наприклад, ми хочемо, щоб після копіювання змінної вказували на окремі масиви. І в цьому випадку можна використовувати глибоке копіювання за допомогою методу slice() :

var users = ["Tom", "Sam", "Bill"];

console.log(users);             //  ["Tom", "Sam", "Bill"]

var people = users.slice();     //  глибоке копіювання
 
people[1] = "Mike";             //  змінюємо другий елемент

console.log(users);             //  ["Tom", "Sam", "Bill"]
console.log(people);            //  ["Tom", "Mike", "Bill"]

В даному випадку після копіювання змінні будуть вказувати на різні масиви, і ми зможемо змінювати їх окремо один від одного.

Також метод slice() дозволяє скопіювати частину масиву:

var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var people = users.slice(1, 4);
console.log(people);        // ["Sam", "Bill", "Alice"]

У метод slice() передається початковий і кінцевий індекс, які використовуються для вибірки значень з масиву. Тобто в даному випадку вибірка в новий масив йде починаючи з 1 індексу по індекс 4. І оскільки індексація масивів починається з нуля, то в новому масиві виявляться другий, третій і четвертий елемент.


push()

Метод push() додає елемент в кінець масиву:

var fruit = [];

fruit.push("яблуко");
fruit.push("груша");
fruit.push("слива");
fruit.push("вишня","абрикос");
 
document.write("В масиві fruit " + fruit.length + " елемента: <br/>");

document.write(fruit);      // яблуко,груша,слива,вишня,абрикос

pop()

Метод pop() видаляє останній елемент з масиву:

var fruit = ["яблуко", "груша", "слива"];
 
var lastFruit = fruit.pop();          // витягаємо із масиву останній елемент

document.write(lastFruit + "<br/>");
document.write("В масиві fruit " + fruit.length + " елемента: <br/>");

for(var i=0; i <fruit.length; i++){
    document.write(fruit[i] + "<br/>");
}

Результат браузера:

shift()[/tag_code] витягує і видаляє перший елемент з масиву:[/p]

[code]var fruit = ["яблуко", "груша", "слива"];
 
var firstFruit = fruit.shift();

document.write(firstFruit + "<br/>");

document.write("В масиві fruit " + fruit.length + " елемента: <br/>");

for(var i=0; i <fruit.length; i++){
    document.write(fruit[i] + "<br/>");
}

Вивід браузера:

unshift() [/tag_code]додає новий елемент в початок масиву:[/p]

[code]var fruit = ["яблуко", "груша", "слива"];
fruit.unshift("абрикос");

document.write(fruit);  // абрикос,яблуко,груша,слива

Видалення елемента за індексом. splice ()

Метод splice() видаляє елементи з певного індексу. Наприклад, видалення елементів з третього індексу:

var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(3);

console.log(deleted);       // [ "Alice", "Kate" ]
console.log(users);         // [ "Tom", "Sam", "Bill" ]

Метод slice повертає вилучені елементи.

В даному випадку видалення йде з початку масиву. Якщо передати від'ємний індекс, то видалення буде проводитися з кінця масиву. Наприклад, видалимо останній елемент:

var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(-1);

console.log(deleted);       // [ "Kate" ]
console.log(users);         // [ "Tom", "Sam", "Bill", "Alice" ]

Додаткова версія методу дозволяє задати кінцевий індекс для видалення. Наприклад, видалимо з першого по третій індекс:

var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(1,3);

console.log(deleted);       // [ "Sam", "Bill", "Alice" ]
console.log(users);         // [ "Tom", "Kate" ]

Ще одна версія методу splice дозволяє вставити замість видалених елементів нові елементи:

var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(1,3, "Ann", "Bob");

console.log(deleted);       // [ "Sam", "Bill", "Alice" ]
console.log(users);         // [ "Tom", "Ann", "Bob", "Kate" ]

В даному випадку видаляємо три елементи з 1-го по 3-й індекси і замість них вставляємо два елементи.


CONCAT ()

Метод concat() служить для об'єднання масивів:

var fruit = ["яблуко", "груша", "сливка"];
var vegetables = ["помидори", "огірки", "банани"];

var products = fruit.concat(vegetables);
 
for(var i=0; i < products.length; i++){
    document.write(products[i] + "<br/>");
}

При цьому необов'язково об'єднувати тільки однотипні масиви. Можна і різнотипні:

var fruit = ["яблуко", "груша", "сливка"];
var prices = [20, 30, 80];

var products = fruit.concat(prices);

join()

Метод join() об'єднує всі елементи масиву в один рядок:

var fruit = ["яблока", "груші", "сливка", "абрикос", "персики"];
var fruitString = fruit.join(", ");

document.write(fruitString);

У метод join() передається роздільник між елементами масиву. В даному випадку в якості роздільника буде використовуватися кома і пробіл ( ", " ).


sort()

Метод sort() сортує масив по зростанню:

var fruit = ["яблука", "груші", "сливки", "абрикоси", "персики"];
fruit.sort();
 
for(var i=0; i < fruit.length; i++){
    document.write(fruit[i] + "<br/>");
}

Результат в браузері:

reverse() [/tag_code]перевертає масив задом наперед:[/p]

[code]var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"];
fruit.reverse();
 
for(var i=0; i < fruit.length; i++){
    document.write(fruit[i] + "<br/>");
}

Висновок в браузері:

sort()[/tag_code] можна впорядкувати масив по спадаючій:[/p]

[code]var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"];

fruit.sort().reverse();
 
for(var i=0; i < fruit.length; i++){
    document.write(fruit[i] + "<br/>");
}

Висновок в браузері:

var fruit = ["яблука", "груші", "сливи", "яблука", "груші"];
 
var firstIndex = fruit.indexOf("яблука");
var lastIndex = fruit.lastIndexOf("яблука");
var otherIndex = fruit.indexOf("вишні");

document.write(firstIndex); // 0
document.write(lastIndex);  // 3
document.write(otherIndex); // -1

firstIndex має значення 0 , так як його положення  "яблука" в масиві доводиться на індекс 0 , а останнім на індекс 3 .

Якщо ж елемент відсутній в масиві, то в цьому випадку методи indexOf() і  lastIndexOf() повертають значення -1 .


every()

Метод every () перевіряє, чи всі елементи відповідають певній умові:

var numbers = [ 1, -12, 8, -4, 25, 42 ];

function condition(value, index, array) {
    var result = false;
    if (value > 0) {
        result = true;
    }
    return result;
};

var passed = numbers.every(condition);

document.write(passed); // false

У метод every() як параметр передається функція, що представляє умову. Ця функція приймає три параметри:

function condition(value, index, array) {
 
}

Параметр value являє поточний перебираючий елемент масиву, параметр index представляє індекс цього елемента, а параметр array передає посилання на масив.

У цій функції ми можемо перевірити передане значення елемента на відповідність заданій умові. Наприклад, в даному прикладі ми перевіряємо кожен елемент масиву, чи більше він нуля. Якщо більше, то повертаємо значення true , тобто елемент відповідає умові. Якщо менше, то повертаємо false - елемент не відповідає умові.

У підсумку, коли відбувається виклик методу numbers.every(condition) він перебирає всі елементи масиву numbers і по черзі передає їх у функцію condition . Якщо ця функція повертає значення true для всіх елементів, то і метод every() повертає true . Якщо хоча б один елемент не відповідає умові, то метод every() повертає значення false .


some()

Метод some() схожий на метод every() , тільки він перевіряє, чи відповідає хоча б один елемент умові. І в цьому випадку метод some() повертає  true . Якщо елементів, відповідних умові, в масиві немає, то повертається значення false :

var numbers = [ 1, -12, 8, -4, 25, 42 ];

function condition(value, index, array) {
    var result = false;
    if (value === 8) {
        result = true;
    }
    return result;
};

var passed = numbers.some(condition); // true

filter()

Метод filter() , як some() і every() , приймає функцію умови. Але при цьому повертає масив тих елементів, які відповідають цій умові:

var numbers = [ 1, -12, 8, -4, 25, 42 ];

function condition(value, index, array) {
    var result = false;
    if (value > 0) {
        result = true;
    }
    return result;
};

var filteredNumbers = numbers.filter(condition);
 
for(var i=0; i < filteredNumbers.length; i++){
    document.write(filteredNumbers[i] + "<br/>");
}

Результат в браузері:

var numbers = [ 1, 2, 3, 4, 5, 6];

for(var i = 0; i < numbers.length; i++){
    var result = numbers[i] * numbers[i];
    document.write("Квадрат числа " + numbers[i] + " рівний " + result + "<br/>");
}

Але за допомогою методу forEach() можна спростити цю конструкцію:

var numbers = [ 1, 2, 3, 4, 5, 6];
 
function square(value, index, array) {

    var result = value * value;
    document.write("Квадрат числа " + value + " рівний " + result + "<br/>");

};
 
numbers.forEach(square);

Метод forEach() як параметр приймає все ту ж функцію, в яку при переборі елементів передається поточний перебираючий елемент і над ним виконуються операції.

Метод map() схожий на метод forEach , він також в якості параметра приймає функцію, за допомогою якої виконуються операції над перебираючими елементами масиву, але при цьому метод map() повертає новий масив з результатами операцій над елементами масиву.

Наприклад, можна застосувати метод map для обчислення квадратів чисел масиву:

var numbers = [ 1, 2, 3, 4, 5, 6];
 
function square(value, index, array) {
     
    return result = value * value;
};
 
var squareArray = numbers.map(square);
document.write(squareArray);

Функція, яка передається в метод map() отримує поточний перебираючий елемент, виконує над ним операції і повертає деяке значення. Це значення потім потрапляє в результуючий масив squareArray


Наш партнер:
beta test mp3 playlist downloader