JavaScript Crash Course
Методи для роботи з масивами
6
Зміст:
- Як працювати із методами масива?
- Метод .forEach()
- Метод .map()
- Метод .filter()
- Метод .reduce()
- Інші популярні методи
Як працювати із методами масива?
Складові і використання метода
const myArray = [1, 2, 3]; myArray.forEach( (item, index) => { // do something with // element or index } );
потрібний метод
callback fn/ comparator fn
вказуємо масив
Приклад із використанням метода .sort()
const myArray = [5, 2, 3]; myArray.sort( (curr, next) => { if (curr < next) { return -1; } } ); // [2, 3, 5]
метод sort()
comparator fn*
вказуємо масива
*fn - function
Метод .forEach()
Вже знайомий цикл for для роботи з масивами
const nums = [1, 2, 3, 4, 5, 6]; let sum = 0; // in the loop we will find a sum of nums array items for (let i = 0; i < nums.length; i++) { sum = sum + nums[i]; } console.log('sum of nums items is ', sum);
Знаходження суми чисел масиву
Час спробувати інше рішення :)
Метод forEach для роботи з масивами
const nums = [1, 2, 3, 4, 5, 6]; let sum = 0; // in the loop we will find a sum of nums array items nums.forEach((num, index) => { sum += num; }) console.log('sum of nums items is ', sum);
Знаходження суми чисел масиву
Метод .map()
Метод map для роботи з масивами
const nums = [1, 2, 3, 4, 5, 6]; // in the loop we will increase every element const updateNums = nums.map(function(num, index) { return num + 10; }); console.log('updated nums array ', updatedNums);
Збільшення на 10 чисел масиву
Метод map для роботи з масивами з використанням стрілочної функції
const nums = [1, 2, 3, 4, 5, 6]; // in the loop we will increase every element const updateNums = nums.map(num => num + 10); console.log('updated nums array ', updatedNums);
Збільшення на 10 чисел масиву
Метод map для роботи з масивами з використанням задекларованої функції
const nums = [0, 1, 2, 3, 4, 5, 6]; const increaseNum = (num, index) => { if (num <= 0) { return 10; } return num + 10; } // in the loop we will increase every element const updateNums = nums.map(increaseNum); console.log('updated nums array ', updatedNums);
Збільшення на 10 чисел масиву
Метод .filter()
Метод filter для роботи з масивами
const nums = [1, 2, 3, 4, 3, 6]; // filter numbers equal 3 const filteredNums = nums.filter(function(num) { return num !== 3; }); console.log('filtered nums array ', filteredNums);
Фільтрування чисел масиву
Метод filter із стрілочною функцією
const nums = [1, 2, 3, 4, 3, 6]; // filter numbers equal 3 const filteredNums = nums.filter((num) => num !== 3); console.log('filtered nums array ', filteredNums);
Фільтрування чисел масиву
Метод filter із масивом об'єктів
const items = [ { a: 1, b: 3 }, { a: 3, b: 3 }, { a: 6, b: 3 }, { a: 10, b: 10 }, { a: 41, b: 1 }, { a: 0, b: 4 } ]; // filter objects and keep only, if a is >= 3 const filtered = items.filter((item) => item.a >= 3); console.log('filtered array ', filtered);
Фільтрування масиву із об'єктами
Метод .reduce()
Метод reduce для роботи з масивами
const nums = [1, 2, 3, 4, 3, 6]; // find sum const sum = nums.reduce( (acc, current) => acc += current, 0 ); console.log('sum nums in array ', sum);
Знаходження суми чисел масиву
Метод reduce для фільтрації і зміни об'єктів в масиві
const items = [ { a: 1, b: 3 }, { a: 3, b: 3 }, { a: 6, b: 3 }, { a: 10, b: 10 }, ]; // filter objects and keep only, if a is >= 3 // and add new field sum = a + b const filtered = items.reduce((acc, item) => { if (item.a >= 3) { acc.push({ a: item.a, b: item.b, sum: item.a + item.b, }) } return acc; }, []); console.log('filtered array ', filtered);
Фільтрування масиву із об'єктами
Метод reduce для фільтрації і зміни об'єктів в масиві + spread operator
const items = [ { a: 1, b: 3 }, { a: 3, b: 3 }, { a: 6, b: 3 }, { a: 10, b: 10 }, ]; // filter objects and keep only, if a is >= 3 // and add new field sum = a + b const filtered = items.reduce((acc, item) => { if (item.a >= 3) { acc.push({ ...item, sum: item.a + item.b, }) } return acc; }, []); console.log('filtered array ', filtered);
Фільтрування масиву із об'єктами
Інші популярні методи
Метод sort для роботи з масивами
const nums = [6, 10, 11, 1, 2, 3, 4]; // sort nums const sum = nums.sort( (a, b) => a - b ); console.log('sum nums in array ', sum);
Сортування масиву
Метод join для роботи з масивами
const words = ['May', 'the', 'Force', 'be', 'with', 'you']; // join words const sentence = words.join(' '); console.log('Joined words - ', sentence);
Пертворення масиву в рядок
Метод includes для роботи з масивами
const array1 = [1, 2, 3]; console.log(array1.includes(2)); // output: true const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // output: true
Перевірка на наявність елемента в масиві
Метод indexOf для роботи з масивами
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // output: 1 console.log(beasts.indexOf('tiger')); // output: -1
Перевірка на наявність елемента в масиві
Метод slice для роботи з масивами
const nums = [6, 10, 11, 1, 2, 3, 4]; // slice nums from index 0 to index 3 (3 is not included) const slicedNums = nums.slice(0, 3); // Output: [6, 10, 11 ] console.log('Part of array ', slicedNums);
Розрізання масиву на частини
Метод splice для роботи з масивами
const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // output: Array ["Jan", "Feb", "March", "April", "June"]
Вставка елемента масиву
Q & A

JavaScript Crash Course Методи для роботи з масивами 6
8 JavaScript Crash Course
By Inna Ivashchuk
8 JavaScript Crash Course
- 631