Массивы — очень полезные типы данных для хранения большого количества информации. Но было бы полезно взаимодействовать с информацией или находить конкретную информацию, не так ли? Сегодня я покажу несколько способов сделать это.
.длина
Технически длина является свойством объекта массива. В Javascript массивы — это тип специального объекта. Когда вы вызываете .length для массива, он возвращает количество элементов в массиве, но, поскольку технически это свойство объекта, вы также можете изменить его.
const array = [1,2,3,4] console.log(array.length) //Output: 4 array.length = 10 console.log(array)//Output: [1,2,3,4, <6 empty items>] console.log(array.length)//Output: 10 console.log(array[9]) //Output: undefined console.log(array[200]) //Output: undefined
При ручном изменении длины на число, превышающее количество элементов в массиве, в массив добавляются «пустые» элементы. При попытке получить доступ к индексу любого из «пустых элементов» вы получите возврат undefined, который ничем не отличается от возврата, который вы получите, если попытаетесь получить доступ к индексу, превышающему длину массива. Но как насчет того, чтобы на этот раз вместо этого уменьшить длину?
const array = [1,2,3,4] array.length = 2 console.log(array) //Output: [1,2] console.log(array[2]) //Output: undefined console.log(array.length) //Output: 2
Как показано, при этом удаляются все элементы, превышающие указанную длину. Попытка получить доступ к индексам предыдущих элементов теперь возвращает неопределенное значение.
.индекс чего-либо()
indexOf() — это полезный метод для поиска индекса нужного элемента в массиве. Он принимает параметр элемента, который вы ищете, и сравнивает его с каждым элементом в массиве, возвращая первый соответствующий элемент.
const array = [1,2,'cake',[3,4], 2]
console.log(array.indexOf(1)) //Output: 0
console.log(array.indexOf(2)) //Output: 1
console.log(array.indexOf('cake')) //Output: 2
console.log(array.indexOf([3,4])) //Output: -1
console.log(array.indexOf(3)) //Output: -1
Напомним, что массивы начинают первый индекс с 0, а затем считают вверх. Как показано, мы можем получить индексы чисел и строк, но когда мы ищем вложенный массив или значение внутри него, мы получаем -1 оба раза! indexOf — это неглубокий итератор, то есть он может просматривать только «верхний уровень» массива. Но что произойдет, если мы будем использовать более непонятные «индексы»?
const array = [1,2,3]
array[-5] = 11
array['pie'] = 'strawberry'
console.log(array) //Output: [ 1, 2, 3, '-5': 11, pie: 'strawberry']
console.log(array.indexOf(11)) //Output: -1
console.log(array.indexOf('strawberry')) //Output: -1
Технически то, что мы называем «индексом» массива, является ключом. Ключи объекта. indexOf смотрит только на ключи, которые являются положительными числами. И то, что мы видим, глядя на массив, обычно является только значениями этих ключей. Это можно доказать с помощью методов Object.entries() и/или Object.keys().
const array = [1,2,3] console.log(Object.entries(array)) //Output: [[0:1],[1:2],[2:3]] console.log(Object.keys(array)) //Output: [0,1,2] array['cake'] = 'lemon' console.log(Object.keys(array)) //Output: [0,1,2,'cake']
Если бы мы выбрали положительное число для нашего ключа, даже если оно далеко за пределами длины массива, indexOf сможет его найти.
const array = [1,2,3]
array[100] = 'meow'
console.log(array.indexOf('meow')) //Output: 100
.находить()
Следуя тем же ограничениям, что и indexOf, у нас есть метод find(). В качестве параметра он принимает функцию обратного вызова и возвращает первое значение, которое возвращает true в рамках обратного вызова.
const array = [1,2,'meow']
console.log(array.find(callback)) //Output: meow
console.log(array.find(item => item === 2)) //Output: 2
console.log(array.find(item => item === 82)) //Output: undefined
function callback(item){
return item === 'meow'
}
Как показано, если вы передаете find() функцию обратного вызова, она передает параметр текущего элемента в массиве. Если он не возвращает true, find переходит к следующему элементу в массиве, пока не найдет или не найдет элемент. Когда он находит элемент, он возвращает сам элемент, и если он не может найти элемент, возвращает значение undefined. Это может быть полезной функцией для извлечения объекта с определенным желаемым значением из массива.
const obj = {
'year': 1969,
'event': 'moon-landing'
}
const array = [3,2,'cake', obj]
console.log(array.find(item => item.event === 'moon-landing'))
//Output: {year: 1969, event: moon-landing}
.фильтр()
filter() работает очень похоже на find(), но вместо того, чтобы останавливаться на первом элементе, он продолжает переход к концу массива, а затем возвращает массив всех элементов, прошедших тест.
const array = [1,1,2,3,2,5,2,1] console.log(array.filter(item => item === 1)) //Output: [1,1,1]
.карта()
Метод map() возвращает массив, содержащий измененные значения массива, для которого он был вызван. Он неразрушающий, и только возвращаемый им массив будет содержать разные значения.
const array = [1,2,3,4] console.log(array.map(item => item**item)) //Output: [1,4,27,256] console.log(array) //Output: [1,2,3,4]
В стрелочной функции здесь каждый элемент массива возводится в степень самого себя. Есть много разных способов применить это, например, вы можете преобразовать массив строк в массив тегов ‹p› для использования в документе HTML.
const array = ['Here likes paragraph one', 'In the beginning...']
const arrayOfPTags = array.map(callback)
function callback(item){
const p = document.createElement('p')
p.textContent = item
return p
}
console.log(arrayOfPTags) //Output: [p, p]
Затем вы можете перебрать новый массив, чтобы добавить каждый тег p в ваш HTML-документ довольно похожим образом.
const body = document.querySelector('body')
arrayOfPTags.map(item => body.appendChild(item))
.уменьшать()
reduce() — полезная функция для агрегирования значений в массиве. Он принимает функцию обратного вызова и передает ей два параметра. Первый параметр будет «предыдущим» или начальным значением, а второй параметр — просматриваемым элементом. В дополнение к функции обратного вызова, reduce принимает необязательный параметр числа, представляющего начальное значение.
Если бы у вас был список заработной платы сотрудников, и вы хотели бы узнать, сколько вы платите им всем за один час, а затем то же самое, но с заработной платой вашего нового сотрудника, вы бы сделали что-то вроде следующего:
const wages = [20, 14, 12, 15, 16]
console.log(wages.reduce(callback, 0)) //Output: 77
console.log(wages.reduce(callback, 15)) //Output: 92
function callback(previousValue, currentValue){
return previousValue += currentValue
}
.для каждого()
forEach() — неопределенный метод. Сам по себе он не имеет возврата, и его лучше использовать, если один из других методов не подходит для ваших целей. Он принимает функцию обратного вызова в качестве единственного параметра.
const array = [1,2,3]
console.log(array.forEach(item => console.log(`Your lucky number is: ${item}`)))
/*Output of consolelogs:
Your lucky number is: 1
Your lucky number is: 2
Your lucky number is: 3
*/
//Output of array.forEach: undefined
.каждый()
.every() — это метод, который проверяет, соответствует ли каждый элемент массива желаемому условию. Если они этого не делают, он возвращает false. правда иначе. Если у вас есть база данных, которая должна содержать только числа в качестве заработной платы, было бы неплохо иметь метод для проверки того, что некоторые из них не превращаются в строки в какой-то момент, не так ли?
const array = [1,2,'3',4,5,'6'] const array2 = [1,2,3,4,5,6] console.log(array.every(item => typeof item === 'number')) //Output: false console.log(array2.every(item => typeof item === 'number')) //Output: true
Если даже один из них не работает, вы получаете false. Если вы хотите проверить, являются ли числом только некоторые из этих элементов, использование метода .some() работает так же, но возвращает значение true, если какой-либо элемент проходит проверку. .
