JavaScript: Работа с Массивами
В JavaScript работа с массивами происходит каждый день. Данная статья будет мини шпаргалкой по наиболее полезным методам для работы с массивами в JavaScript.
Содержание:
- length;
- every;
- some;
- filter;
- forEach;
- concat;
- join;
- sort;
- reverse;
- slice;
- splice;
- indexOf;
- lastIndexOf;
- map;
- pop;
- push;
- shift;
- unshift;
- 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 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.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.