Владислав Калачев

Учимся кодить на JavaScript. Методы массивов.

2 757

Доброго времени суток, друзья. К одной из повседневных задач 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 для получения самой последней и актуальной информации. 

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *