Доброго времени суток, друзья. К одной из повседневных задач JavaScript — программиста относится умение работать с массивами, используя методы с наибольшей эффективностью. В данной статье мы подробно рассмотрим какие методы имеются в массивах и на практике разберем «кейсы» их применения. Для вашего удобства все методы будут рассортированы по категориям.
Методы добавления элементов
1. Метод push() предназначен для добавления элемента в конец массива.
Пример:
const array = [1,2,3];
console.log(array.push(4)) // [1,2,3,4]
2. Метод unshift() добавляет элемент в начало массива и возвращает новую длину массива.
Пример:
const array = [1,2,3]
console.log(array.unshift(4)) // [4,1,2,3]
3. Добавление элемента по индексу.
Пример:
const array = [1,2,3,4]
array[4] = 5
console.log(array) // [1, 2, 3, 4, 5]
Данным способом можно также изменять элемент по индексу.
Пример:
const array = [1,2,3,4]
array[3] = 5
console.log(array) // [1, 2, 3, 5]
Методы удаления элементов
1. Метод shift() используется для удаления первого элемента массива.
Пример:
const array = [1,2,3,4]
array.shift()
console.log(array) // [2,3,4]
2. Метод pop() предназначен для удаления последнего элемента массива.
Пример:
const array = [1,2,3,4]
array.pop()
console.log(array) // [1,2,3]
3. Удаление элемента массива по индексу. Результатом метода slice() является новый массив. В параметрах указываем начальный и конечный индекс нового массива.
Пример:
const array = [1,2,3,4]
array.slice(0,1)
console.log(array) // [1]
В данном примере первый параметр определяет индекс удаляемого элемента, а второй указывает количество элементов, которые попадут под удаление после указанного индекса.
Циклы перебора элементов массива
1. Цикл for является «классикой» для перебора элементов массива и используется в JavaScript с начала его создания.
Пример:
const array = [1,2,3,4]
for (let i = 0; i < array.length; i++) {
console.log( array[i] );
}
2. Цикл for..in – так как массивы в JS это объекты, имеется возможность использовать данный цикл для переборов объектов.
Пример:
const array = [1,2,3,4]
for (let key in array) {
console.log( array[key] )
}
Не рекомендуется использовать этот метод перебора поскольку в результате можно получить не только элементы массива, но и дополнительные свойства объекта.
3. Цикл for..of – данный цикл возвращает значение элементов, но при этом он не предоставляет доступ к номерам элементов. Это является главным его недостатком.
Пример:
const array = [1,2,3,4]
for (let n of array) {
console.log( n );
}
После циклов давайте разберем методы, которые имеют массивы перебора элементов.
Методы перебора элементов
1. Перебор элементов массива с помощью метода forEach().
Пример:
const array = [1,2,3,4]
array.forEach(function(item, index) {
console.log(item, index);
})
// 1 0
// 2 1
// 3 2
// 4 3
2. Метод map() проходится по элементам массива и как результат возвращает новый массив.
Пример:
const array = [1,2,3,4]
const array2 = array.map(el => {
return el + 1
})
console.log(array2) // [2, 3, 4, 5]
3. Метод filter() предназначен для фильтрации массива через функцию. Данный метод вернет новый массив в зависимости от истинности выполненного условия для каждого элемента.
Пример:
const array = [1,2,1,1]
const array2 = array.filter(el => {
return el !== 1
})
console.log(array2) // [2]
4. Метод every() используется для проверки значений массива на равенство. Если при вызове колкэк-функции каждый элемент массива будет соответствовать условиям, то данный метод вернет true.
Пример:
const arr = [-2, -1, 0, 1]
function isСheck(n) {
return n > 0;
}
console.log( arr.every(isСheck) ); // false
5. Метод some() похож на метод every(), но при этом он отличается тем, что возвращает true, если при вызове колбэк-функции хотя бы один из элементов будет равен указанному условию.
Пример:
const arr = [-2, -1, 0, 1]
function isСheck(n) {
return n > 0;
}
console.log(arr.some(isСheck)) // true
6. Метод reduce() позволяет обойти каждый элемент массива с возможностью сохранения промежуточного результата. Reduce() часто используется в качестве замены нескольких методов, которые потребовалось бы применить для достижения аналогичного результата.
Пример:
const array = [1, 2, 3]
const res = array.reduce((accumulator, currentValue) => {
return accumulator + currentValue
} ))
console.log(res)
7. Метод reduceRight() работает так же как и reduce(), но идет по элементам массива справа налево.
Методы поиска по массиву
1. Поиск индекса элемента в массиве по значению. Данный метод производит поиск ближайшего элемента в массиве, который совпадает с переданным значением параметра. Если совпадение не обнаружено, то результатом будет -1.
Пример:
const array = [1, 2, 3, 0, 2]
console.log(array.indexOf(3)) // 2
console.log(array.indexOf(10)) // -1
2. Метод lastIndexOf() повторяет логику работы метода indexOf(), отличительной особенностью является то, что он возвращает последний индекс элемента (вместо первого) среди найденных значений.
Пример:
const array = [1, 2, 3, 0, 3]
console.log(array.lastIndexOf(3)) // 4
console.log(array.lastIndexOf(10)) // -1
3. Метод includes() проверяет содержит ли массив нужное значение, в результате чего возвращается (true/false).
Пример:
const array = [1, 2, 3]
console.log(array.includes(1)) // true
console.log(array.includes(4)) // false
4. Метод find() проходится по элементам массива и возвращает первое найденное значение.
Пример:
const array = [1, 2, 3]
console.log(array.find(n => n === 1)) // 1
5. Метод findIndex() проходится по элементам массива и возвращает индекс найденного элемента.
Пример:
const array = [1, 2, 3]
console.log(array.findIndex(n => n === 1)) // 0
Дополнительные методы
1. Получение первого элемента массива
Пример:
const array = [1, 2, 3]
console.log(array[0]) // 1
2. Получение последнего элемента массива
Пример:
const array = [1, 2, 3]
console.log(array[array.length - 1]) // 3
3. Создание копии массива
Пример:
const array = [1, 2, 3]
const arrayTwo = array.slice()
console.log(arrayTwo) // [1,2,3]
4. Получение длины массива (количество элементов массива)
Пример:
const array = [1, 2, 3]
console.log(array.length) // 3
5. Метод splice() предназначен для изменения содержимого массива. Первый параметр отвечает за количество элементов в массиве, от начала которых нужно отступить. Второй параметр указывает на количество элементов для удаления. Третий параметр используется в случае, когда требуется добавить значение для нового элемента.
Пример:
const array = [1, 2, 3]
array.splice(2, 0, 2.3)
console.log(array) // [1, 2, 2.3, 3]
6. Метод сортировки массивов
Пример:
const array = [4, 5, 2, 1]
console.log(array.sort()) // [1, 2, 4, 5]
7. Метод изменения порядка элементов на обратный
Пример:
const array = [1, 2, 3]
array.reverse()
console.log(array) // [3, 2, 1]
8. Метод concat() создает новый массив на основе переданных значений и предыдущего массива.
Пример:
let a = [1,2,3]
console.log(array.concat([4,5])) // [1,2,3,4,5]
9. Метод flat() создаст новый массив на основе вложенных массивов. В параметре метода можно указать число вложений, которые требуется преобразовать в «плоский» массив.
Пример:
let array = [1,2, [3,4]]
console.log(array.flat()) // [1,2,3,4]
Заключение
Мы рассмотрели наиболее используемые методы в массивах JavaScript и на примерах разобрали их использование. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Полезные материалы:
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array документация от Mozilla
Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации.
Комментарии: