JavaScript: Работа с Массивами

В JavaScript работа с массивами происходит каждый день. Данная статья будет мини шпаргалкой по наиболее полезным методам для работы с массивами в JavaScript.

Содержание:

  1. length;
  2. every;
  3. some;
  4. filter;
  5. forEach;
  6. concat;
  7. join;
  8. sort;
  9. reverse;
  10. slice;
  11. splice;
  12. indexOf;
  13. lastIndexOf;
  14. map;
  15. pop;
  16. push;
  17. shift;
  18. unshift;
  19. reduce.
['K', 'L', 'M'].length                      // 3

[5, 6, 7, 8].every(el => el > 4)            // true

[-4, -2, 0, 2].some(el => el > 1)           // true

[4, -2, 1, -5, 6].filter(el => el > 3)      // [4, 6]

['K', 'L', 'M', 'N'].forEach(el => console.log(el))
['K', 'L', 'M'].concat(['N', 'O'])          // ['K', 'L', 'M', 'N', 'O']

['K', 'L', 'M'].join('_')                   // 'K_L_M'

[2, 3, 0, -1, 4].sort()                     // [0, -1, 2, 3, 4]

['K', 'L', 'M'].reverse()                   // ['M', 'L', 'K']

['K', 'L', 'M'].slice(2)                    // ['M']

['I', 'love', 'web'].splice(1, 1)           // ['I']; массив станет ['I', 'web']

['K', 'L', 'O', 'L', 'M'].indexOf('L')      // 1

['K', 'L', 'O', 'L', 'M'].lastIndexOf('L')  // 3

[4, 5, 6].map(el => el * 2)                 // [8, 10, 12]

[4, 5, 6].pop()                             // 6; массив станет [4, 5]

[4, 5, 6].push(7, 8)                        // 8; массив станет [4, 5, 6, 7, 8]

[4, 5, 6].shift()                           // 4; массив станет [5, 6]

[4, 5, 6].unshift(7, 8)                     // 5; массив станет [7, 8, 4, 5, 6]

[2, 3, 4].reduce((a, b) => a + b)           // 9

length

Вернёт количество элементов в массиве.

['Z', 'X', 'C', 'V'].length // 4

every

Вернёт true, если каждый элемент массива возвращает true.

[5, 6, 7, 8].every(item => item > 4) // true

some

Вернёт true, если хотя бы один элемент массива возвращает true.

[-5, -3, -1, 2].some(item => item > 0) // true

filter

Метод filter создаёт новый массив из элементов, соответствующих заданному условию (вернувших true).

[4, -2, 4, -4, 1].filter(item => item > 0) // [4, 4, 1]

forEach

Выполнение функции для каждого элемента массива.

['K', 'L', 'M', 'N'].forEach(el => console.log(el))

concat

Метод concat объединяет массивы, но не изменяет первоначальный массив, он возвращает новый.

const array = ['G', 'H', 'J'];
const new_array = array.concat(['K', 'L']);

console.log(new_array); // ["G", "H", "J", "K", "L"]

console.log(array);     // ["G", "H", "J"]

Тоже самое можно сделать с помощью Spread оператора:

const array_1 = ['G', 'H', 'J'];
const array_2 = ['K', 'L'];

const result = [...array_1, ...array_2] // ['G', 'H', 'J', 'K', 'L']

join

Объединение элементов массива в строку с разделителем , по умолчанию.

['K', 'L', 'M'].join() // K,L,M


['Hello', 'beautiful', 'web'].join(', ') // Hello, beautiful, web

sort

Возвращает отсортированный массив.

['B', 'D', 'C', 'E', 'A'].sort() // ["A", "B", "C", "D", "E"]


['B', 'D', 'C', 'E', 'A'].sort((a, b) => b > a) // ["E", "D", "C", "B", "A"]

reverse

Сортировка массива задом наперёд.

['K', 'L', 'M'].reverse() // ["M", "L", "K"]

slice

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

['K', 'L', 'M'].slice(2) // ["M"]

['K', 'L', 'M'].slice(0, 1) // ['K']

['HTML', 'CSS', 'JS', 'PHP'].slice(1, 3) // ["CSS", "JS"]

splice

Возвращает новый массив, удаляя существующие элементы и/или добавляя новые.

let array = ['I', 'love', 'beautiful', 'Web'];
let deleted_elements = array.splice(1, 2); // с 1 индекса удаляем два элемента


console.log(array);            // ["I", "Web"]

console.log(deleted_elements); // ["love", "beautiful"]

Удалим все элементы после 3 индекса (включительно).

let words = ['HTML', 'CSS', 'JS', 'PHP', 'JSON'];
let deleted_words = words.splice(3);

console.log(words);         // ["HTML", "CSS", "JS"]

console.log(deleted_words); // ["PHP", "JSON"]

Удалим "HTML", "SASS" и добавим "JS", "PHP".

let technologies = ['HTML', 'SASS', 'Liquid'];
let deleted_technologies = technologies.splice(0, 2, 'JS', 'PHP');

console.log(technologies);         // ["PHP", "JSON", "Liquid"]

console.log(deleted_technologies); // ["HTML", "SASS"]

indexOf

Вернёт индекс первого найденного элемента, в противном случае -1

['K', 'L', 'M', 'L', 'L'].indexOf('L') // 1

['K', 'L', 'M'].indexOf('N')           // -1

lastIndexOf

Вернёт индекс последнего найденного элемента, в противном случае -1

['HTML', 'JS', 'PHP', 'JS'].lastIndexOf('JS') // 3

['HTML', 'JS', 'PHP'].lastIndexOf('CSS')      // -1

map

Метод map возвращает новый массив из результатов вызова каждого элемента массива.

[2, 4, 6, 8].map(item => item * 10) // [20, 40, 60, 80]

Подсчёт символов в каждом элементе массива.

const technologies = ['HTML', 'CSS', 'JS', 'PHP'];
const lengths = technologies.map((tech) => tech.length);

console.log(lengths); // [4, 3, 2, 3]

pop

Удаляет последний элемент из массива и возвращает его (этот элемент).

let array = ['HTML', 'CSS', 'JS'];
let last_el = array.pop();

console.log(array);   // ["HTML", "CSS"]

console.log(last_el); // JS

push

Метод push добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

let array = [4, 5, 6];
let last_el = array.push(7, 8);

console.log(array);   // [4, 5, 6, 7, 8]

console.log(last_el); // 5

Объединение двух массивов в один.

const array_1 = ['HTML', 'CSS'];
const array_2 = ['JS', 'PHP'];
Array.prototype.push.apply(array_1, array_2);

console.log(array_1); // ["HTML", "CSS", "JS", "PHP"]

shift

Метод shift удалит первый элемент из массива и вернёт его.

const array = [7, 8, 9];
const first_el = array.shift();

console.log(first_el); // 7

console.log(array);    // [8, 9]

unshift

Добавит элемент(ы) в начало массива и вернёт общее получившееся количество элементов.

const array = [5, 6, 7];
const length = array.unshift(8, 9);

console.log(length); // 5

console.log(array);  // [8, 9, 5, 6, 7]

reduce

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

Посчитаем сумму значений массива.

[2, 3, 4].reduce((summ, currentVal) => summ + currentVal) // 9

Проделаем тоже самое, только с массивом, состоящим из объектов.

const array = [{ keyName: 2 }, { keyName: 3 }, { keyName: 4 }];
const array_summ = array.reduce(((summ, currentVal) => summ + currentVal.keyName), 0);

console.log(array_summ); // 9

Получение из массива, содержащего массивы, один массив.

[[4, 5], [6, 7], [8, 9]].reduce((a, b) => a.concat(b)) // [4, 5, 6, 7, 8, 9]

Это далеко не все методы для работы с массивами в JavaScript, данная шпаргалка с течением времени будет дополняться.

admin