JavaScript

Array

Agenda

Array methods

Array methods

arr.push(...items) – добавляет элементы в конец,
arr.pop() – извлекает элемент из конца,
arr.shift() – извлекает элемент из начала,
arr.unshift(...items) – добавляет элементы в начало.

let arr = [];
arr.push(1);
console.log(arr) // [1]

let arr = [1];
arr.pop(); // вернет последний элимент из массива и удалит его в массиве.
console.log(arr) // []

let arr = [1, 2];
arr.shift() // 1
console.log(arr) // [2]

let arr = [1];
arr.unshift(2);
console.log(arr) // [1, 2]

Array methods (splice)

Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

let arr = [1, 2, 3];

delete arr[1]; // удаляем 2.

console.log( arr[1] ); // undefined
console.log( arr.length ); // 3

Array methods (splice)

arr.splice(index[, deleteCount, elem1, ..., elemN])

Метод arr.splice(str) – умеет всё: добавлять, удалять и заменять элементы.

Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.

Array methods (splice)

let arr = [1, 2, 3];

arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент

console.log( arr ); // осталось [1, 3]
console.log( arr.length ); // 2

Удаление

Array methods (splice)

let arr = [1, 2, 3, 4, 5];

// удалить 3 первых элемента и заменить их другими
arr.splice(0, 3, 6, 7);

console.log( arr ) // теперь [6, 7, 4, 5]

Удаление и замена элиментов

Array methods (splice)

Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
Так же метод splice мутирует исходный массив.

Array methods (slice)

Возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end).

arr.slice([start], [end])

let arr = [1, 2, 3, 4];

console.log( arr.slice(1, 3) ); // e,s (копирует с индекса 1 до 3 -> [2, 3])

Array methods (forEach)

arr.forEach(function(item, index, array) {
  // ... делать что-то с item
});

[1, 2, 3].forEach((item, index) => {
  console.log(`${item} имеет позицию ${index}`);
});

[1, 2, 3].forEach((item, index, array) => {
  console.log(`${item} имеет позицию ${index} в ${array}`);
});

Array methods (find and findIndex)

let users = [
  {id: 1, name: "Vic", age: 21},
  {id: 2, name: "Petya", age: 30},
  {id: 3, name: "Jon", age: 5}
];
let user = users.find(item => item.age === 5);

console.log(user.name); // Jon

let users = [
  {id: 1, name: "Vic", age: 21},
  {id: 2, name: "Petya", age: 30},
  {id: 3, name: "Jon", age: 5}
];
let userIndex = users.findIndex(item => item.age === 5);

console.log(userIndex); // 2, findIndex возвращает индекс

В основном применяем когда у нас массив обьектов

Array methods (filter)

let users = [
  {id: 1, name: "Vic", age: 21},
  {id: 2, name: "Petya", age: 30},
  {id: 3, name: "Jon", age: 5}
];
let userCollection = 
    users.filter(function (item) { return item.age < 30 });

console.log(userCollection); 
// [{id: 1, name: "Vic", age: 21}, {id: 3, name: "Jon", age: 5}]

filter возвращает новый массив из всех подходящих элементов

Array methods (map)

let users = [
  {id: 1, name: "Vic", age: 21},
  {id: 3, name: "Jon", age: 5}
];
let userCollection = users.map(item => item.age + 3);

console.log(userCollection); 
// [{id: 1, name: "Vic", age: 24}, {id: 3, name: "Jon", age: 8}]

Преобразование массива.

Он вызывает функцию для каждого элемента массива и возвращает новый массив результатов выполнения этой функции.

let lengths = ["1", "2", "3"].map((item) => Number(item));
console.log(lengths); // [1, 2, 3]

Array methods (split and join)

let arr = ['Vic', 'Petya', 'Jon'];
let str = arr.join(';'); // объединить массив в строку через ;

console.log( str ); // Vic;Petya;Jon

split разбивает строку на массив по заданному разделителю

let names = 'Vic, Petya, Jon';
let arr = names.split(', ');
console.log(arr); // ['Vic', 'Petya', 'Jon']


let arr2 = names.split(',');
console.log(arr2); //['Vic', ' Petya', ' Jon']

join создаёт строку из элементов arr

Array methods (reduce)

reduce похож на предыдущие методы, но он немного сложнее. Он используются для вычисления какого-нибудь единого значения на основе всего массива.

let value = arr.reduce(function(previousValue, item, index, array) {
  // ...
}, [initial]);

previousValue – результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial),
item – очередной элемент массива,
index – его индекс,
array – сам массив.

Array methods (reduce)

let arr = [1, 2, 3, 4, 5];

let sum = arr.reduce(function(sum, item) { return sum + item }, 0);

console.log(sum); // 15

let arr = [1, 2, 3, 4, 5];

let sum = arr.reduce((sum, item) => sum + item, 0);

console.log(sum); // 15

Array methods

By Oleg Rovenskyi

JavaScript

Array

Array methods

More from Oleg Rovenskyi