В этой статье мы рассмотрим 16 наиболее часто используемых операций с массивами javascript с использованием методов массива, которые включают добавление и удаление элементов, сортировку массива, поиск индекса элементов, фильтрацию, слияние и зацикливание массивов с примерами.
1. Добавьте элементы: push()
Метод push() добавляет элемент в массив. Элемент всегда добавляется в конец, то есть добавленный элемент будет последним элементом массива.push() модифицирует исходный массив и возвращает его новую длину. Пример
let numbers = [1, 2, 3]; numbers.push(6); console.log(numbers); // [1, 2, 3, 6]
2. Удалить элементы: pop()
Метод pop() удаляет элемент из массива. Удаленный элемент всегда является последним элементом массива.pop() изменяет исходный массив и возвращает удаленный элемент. Пример
let numbers = [1, 2, 3]; let last = numbers.pop(); console.log(numbers); // [1, 2] console.log(last); // 3
3. Добавьте элементы: unshift()
Метод unshift() добавляет элемент в массив. Элемент всегда добавляется в начало, то есть добавленный элемент станет первым элементом массива.
Таким образом, unshift() подобен и противоположен push(). Похожий в том, что он добавляет элемент, и противоположный в том, что он добавляет элемент в начало, а push() добавляет элемент в конец.unshift() изменяет исходный массив и возвращает его новую длину. Пример
let numbers = [1, 2, 3]; numbers.unshift(0); console.log(numbers); // [0, 1, 2, 3]
4. Удалить элементы: shift()
Метод shift() удаляет элемент из массива. Удаляемый элемент всегда является первым элементом массива.
Таким образом, shift() подобен и противоположен pop().
Подобно тому, что он удаляет элемент, и наоборот, он удаляет первый элемент, а pop() удаляет последний element.shift() также изменяет исходный массив и возвращает удаленный элемент.Пример,
let numbers = [1, 2, 3]; let first = numbers.shift(); console.log(numbers); // [2, 3] console.log(first); // 1
5. Извлечение элементов: slice()
Функция slice() используется для извлечения части массива между предоставленными индексами.
Она принимает два числовых аргумента, представляющих индексы элементов массива, и возвращает новый массив с элементами между этими двумя индексами аргументов.
Индексы начинаются с 0. Элементы результирующего массива находятся между индексами start и (конец -1).slice() возвращает поверхностную копию части массива массив, что означает, что исходный массив не изменяется. Пример
let numbers = [1, 2, 3, 4, 5]; // get array between indexes 1 and 4 let sliced = numbers.slice(1, 4); console.log(sliced); // [2, 3, 4]
6. Заменить элементы: splice()
Этот метод используется для удаления или замены элементов массива.
Он принимает три аргумента: начальный индекс, количество удаляемых элементов и добавляемые элементы.
Из них только первый аргумент является обязательным.
Если указан только первый аргумент, splice() удаляет все элементы, начиная с этого индекса.
Метод splice() изменяет исходный массив. Пример
let letters = ['A', 'B', 'C', 'D', 'E']; // replace two elements starting index 2 letters.splice(2, 2, 'X', 'Y'); console.log(letters); // ['A', 'B', 'X', 'Y', 'E'] letters = ['A', 'B', 'C', 'D', 'E']; // remove 2 elements starting index 2 letters.splice(2, 2); console.log(letters); // ['A', 'B', 'E'] letters = ['A', 'B', 'C', 'D', 'E']; // remove 3 elements starting index 2 letters.splice(2, 3); console.log(letters); // ['A', 'B'] letters = ['A', 'B', 'C', 'D', 'E']; // replace 3 elements starting index 2 letters.splice(2, 3, 'X', 'Y', 'Z'); console.log(letters); // ['A', 'B', 'X', 'Y', 'Z'] letters = ['A', 'B', 'C', 'D', 'E']; // replace all elements starting index 3 letters.splice(3); console.log(letters); // ['A', 'B','C']
7. Сортировка массива: sort()
Как следует из названия, он сортирует массив на месте. На месте означает, что новый массив не создается, а исходный массив изменяется.
По умолчанию sort() сортирует массив в порядке возрастания. Пример
let numbers = [3, 1, 4, 2]; numbers.sort(); console.log(numbers); // [1, 2, 3, 4]
Вы также можете указать функцию для sort(). Эта функция определяет порядок сортировки и должна возвращать 0, -1 или 1.
Эта функция также может быть стрелочной функцией.
Ниже приведен пример сортировки массив объектов на основе поля id
const employees = [
{ name: "A", id: 11 },
{ name: "X", id: 27 },
{ name: "B", id: 35 },
{ name: "W", id: 12 },
{ name: "C", id: 3 },
{ name: "T", id: 27 },
];
// sort by id
items.sort((a, b) => a.id- b.id);
8. Элемент поиска: indexOf()
Этот метод возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
Метод indexOf() принимает единственный аргумент, который представляет собой элемент для поиска. Пример
let numbers = [1, 2, 3, 4]; let index = numbers.indexOf(2); console.log(index); // 1 index = numbers.indexOf(10); console.log(index); // -1
9. Элемент поиска: lastIndexOf()
Возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует. Пример
let numbers = [1, 3, 3, 4, 2]; let index = numbers.lastIndexOf(3); console.log(index); // 2
10. Реверсивный массив: reverse()
Меняет порядок элементов массива на обратный. Это означает, что последний элемент становится первым, предпоследний элемент становится вторым и так далее.
Исходный массив модифицируется. Пример
let letters = ['W', 'X', 'Y', 'Z']; letters.reverse(); console.log(letters); // ['Z', 'Y', 'X', 'W']
11. Преобразование массива: map()
функция map() используется для выполнения какой-либо операции над элементами массива или для преобразования элементов массива. Именно поэтому он называется map.map() принимает функцию обратного вызова, которая вызывается для каждого элемента массива.
Он принимает элемент массива в качестве аргумента и возвращает значение. Как преобразовать этот элемент, зависит от разработчика.
В приведенном ниже примере каждый элемент массива сопоставляется с его квадратом.
let numbers = [1, 2, 3, 4]; let square = numbers.map(x => x * x); console.log(square); // [2, 4, 9, 16]
12. Фильтрация массивов: filter()
Функция Javascript filter() применяется к массивам и используется для получения массива только тех элементов, которые удовлетворяют определенному требованию или условию.filter() принимает в качестве аргумента функцию обратного вызова, которая вызывается для каждого элемента массива.
Если функция обратного вызова возвращает true согласно реализованному условию, то этот элемент добавляется в результирующий массив, иначе нет.filter() не изменяет массив, в котором он находится вызывается, но создает и возвращает новый массив, содержащий только те элементы, которые удовлетворяют условию фильтрации.
Остальные элементы удаляются или отфильтровываются из результирующего массива. Пример
// callback function for filter
function compare(element) {
// compare element with 5
return element < 5;
}
// declare array
let numbers = [2,4,5,1,20];
let filtered = numbers.filter(compare);
console.log(filtered); // [2,4,1]
Вы также можете передать стрелочную функцию filter(), как показано ниже.
// declare array let numbers = [2,4,5,1,20]; // get array elements lesser than 5 let filtered = numbers.filter(number => number < 5); console.log(filtered ); // 2,4,1
13. Накопление массива: уменьшить()
reduce() используется для сведения массива к одному значению.reduce() принимает в качестве аргумента функцию обратного вызова, которая вызывается для каждого элемента массива и накапливает результат.
Функция reducer() принимает два аргумента:
A. накопленное значение и
B. текущее значение.
Ниже приведен пример вычисления суммы массива целых чисел с использованием reduce()
let numbers = [23, 12, 9, -2];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 42
Когда функция обратного вызова вызывается в первый раз, возвращаемого значения нет.
Начальное значение по умолчанию может быть указано в качестве второго аргумента для этого (в первый раз), например 0 в приведенном выше примере.
Если он не указан, первый элемент массива используется в качестве начального значения, и итерация начинается со следующего элемента.
Функция аргумента reduce() также может быть функцией стрелки, как показано ниже.
let numbers = [23, 12, 9, -2];
let sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 42
14. Объединение массивов: concat()
Объединяет или объединяет два или более массивов.
Возвращает новый массив, содержащий все элементы из всех массивов.
Если массивы содержат повторяющиеся элементы, результирующий массив также содержит все эти элементы. Пример
let n1=[1,2,3]; let n2=[2,3,4]; let n3=n1.concat(n2); console.log(n3); // [1, 2, 3, 2, 3, 4]
15. Массив в строку: join()
Функция join() объединяет все элементы массива в строку.
Она принимает необязательный аргумент, который, если он указан, становится разделителем между элементами. Пример
const letters= ['A','B','C'];
console.log(letters.join()); // "A,B,C"
console.log(letters.join('')); // "ABC"
console.log(letters.join('-')); // "A-B-C"
16. Итерация массива: forEach()
Этот метод вызывает функцию для каждого элемента массива.
Метод forEach() принимает один аргумент: функцию обратного вызова, которая должна выполняться для каждого элемента. Пример
let letters = ['A', 'B', 'C', 'D']; letters.forEach(l => console.log(l.toLowerCase())); // Result: // a // b // c // d
Это все на разных операциях с массивами в javascript.
Надеюсь, это было полезно.
Оригинал статьи здесь.
