JavaScript Crash Course

Методи для роботи з масивами

6

Зміст:

  1. Як працювати із методами масива?
  2. Метод .forEach()
  3. Метод .map()
  4. Метод .filter()
  5. Метод .reduce()
  6. Інші популярні методи

Як працювати із методами масива?

Складові і використання метода

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

  • 499

More from Inna Ivashchuk