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
8 JavaScript Crash Course
By Inna Ivashchuk
8 JavaScript Crash Course
- 550