JavaScript: Работа с Массивами
В JavaScript работа с массивами происходит каждый день. Данная статья будет мини шпаргалкой по наиболее полезным методам для работы с массивами в JavaScript.
Содержание:
- length;
- every;
- some;
- filter;
- forEach;
- concat;
- join;
- sort;
- reverse;
- slice;
- splice;
- indexOf;
- lastIndexOf;
- map;
- pop;
- push;
- shift;
- unshift;
- reduce.
length
Вернёт количество элементов в массиве.
["Z", "X", "C", "V"].length // 4every
Вернёт true, если каждый элемент массива возвращает true.
[5, 6, 7, 8].every(item => item > 4) // truesome
Вернёт true, если хотя бы один элемент массива возвращает true.
[-5, -3, -1, 2].some(item => item > 0) // truefilter
Метод 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, websort
Возвращает отсортированный массив.
["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") // -1lastIndexOf
Вернёт индекс последнего найденного элемента, в противном случае -1:
["HTML", "JS", "PHP", "JS"].lastIndexOf("JS") // 3
["HTML", "JS", "PHP"].lastIndexOf("CSS") // -1map
Метод map возвращает новый массив из результатов вызова каждого элемента массива.
Подсчёт символов в каждом элементе массива.
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); // JSpush
Метод push добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
let array = [4, 5, 6];
let count_els = array.push(7, 8);
console.log(array); // [4, 5, 6, 7, 8]
console.log(count_els); // 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, данная шпаргалка с течением времени будет дополняться актуальными методами.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (4)
- Андрей
Спасибо огромное, супер шпаргалка. Мне всегда не хватало какого-то кусочка)))
- Only to top
Пользуйтесь, на здоровье)
- Александр
В sort неверно
["B", "D", "C", "E", "A"].sort((a, b) => b > a) // ["E", "D", "C", "B", "A"] консоль выдает ->['B', 'D', 'C', 'E', 'A']В splice не хватает буквы - L
et array = ["I", "love", "beautiful", "Web"];- Only to top
Спасибо, что не прошли мимо
