Существует слишком много 💁 Javascript-методов для операции с массивом, и мы должны быть достаточно умны, чтобы различать и знать, какие из них могут быть лучшими для нашего случая использования.
Фрукты полезны для здоровья 😁 , поэтому на протяжении всего этого потока мы будет иметь общий массив объектов для работы и выявления различий:

let fruits  = [{name:'Apple', price: 50},{name:'Orange', price: 30}, {name:'Grapes', price: 10}, {name:'Orange', price: 80}]

карта

Метод map() создает новый массив той же длины, что и вызывающий массив, и заполняет набор результатов, вызывая предоставленную функцию для каждого элемента, поскольку он возвращает новый массив, который можно легко объединить в цепочку и никаких изменений в вызывающем массиве.

let fruitNames = fruits.map(item => item.name)
console.log('fruits : ', fruits)
console.log('fruitNames : ', fruitNames)
// fruits :  [{"name":"Apple","price":50},{"name":"Orange","price":30},{"name":"Grapes","price":10},{"name":"Orange","price":80}]
// fruitNames :  ["Apple","Orange","Grapes","Orange"]

Для каждого

Метод forEach() выполняет предоставленную функцию один раз для каждого элемента массива в порядке возрастания индекса и ничего не возвращает (т.е. не определено). Поскольку он не возвращает массива, мы не можем связать функцию дальше.

let fruitPriceModified = fruits.forEach(item => item.price = item.price*2)
console.log('fruits : ', fruits)
console.log('fruitPriceModified : ', fruitPriceModified)
// fruits :  [{"name":"Apple","price":100},{"name":"Orange","price":60},{"name":"Grapes","price":20},{"name":"Orange","price":160}]
// fruitPriceModified :  undefined

Он больше похож на цикл for, который можно использовать либо для обновления того же массива, либо для создания нового массива вручную с определенной операцией.

for..inиfor..of
Оба for..in и for..of представляют собой циклические конструкции, которые используются для перебора структур данных
for..in перебирает все перечисляемые ключи свойств объекта
for..of перебирает значения повторяемого объекта.

// elKey are the property keys
for (let elKey in fruits) {
    console.log(elKey) 
}
// "0", "1", "2", "3"

// elValue are the property values
for (let elValue of fruits) {
    console.log(elValue)
}
//  {"name":"Apple","price":50} ,  {"name":"Orange","price":30},  {"name":"Grapes","price":10}, {"name":"Orange","price":80}Filter

Фильтр

Метод filter(), как следует из названия, возвращает подмножество вызывающего массива, простым способом он создает новый массив из заданного массива, который проходит проверку, реализованную функцией обратного вызова.

Метод filter(), как следует из названия, возвращает подмножество вызывающего массива, простым способом он создает новый массив из заданного массива, который проходит тест, реализованный функцией обратного вызова.

let filteredFruits = fruits.filter(item => item.price > 30)
console.log('fruits : ', fruits)
console.log('filteredFruits : ', filteredFruits)
// fruits :  [{"name":"Apple","price":50},{"name":"Orange","price":30},{"name":"Grapes","price":10},{"name":"Orange","price":80}]
// filteredFruits :  [{"name":"Apple","price":50},{"name":"Orange","price":80}]

Уменьшать

Метод reduce(), я бы сказал, немного продвинутый, но более умная функция, которую можно использовать для хранения информации о предыдущем элементе и работы с текущим элементом массива.
Он выполняет функцию обратного вызова для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления для предыдущего элемента. Конечным результатом редуктора является одно значение.

Определение: reduce(function (accumulator, currentValue, currentIndex, array) { /* callback function */ }, initialValue)

// накопитель (обязательно) initialValue или ранее возвращенное значение функции.
// currentValue (обязательно) значение текущего элемента.
// currentIndex (необязательно) Индекс текущего элемента.
// массив (необязательно) Массив текущий элемент принадлежит.

let totalPriceOfFruits = fruits.reduce( (acc, cur) => acc + cur.price , 0)
console.log('fruits : ', fruits)
console.log('totalPriceOfFruits : ', totalPriceOfFruits)
// fruits :  [{"name":"Apple","price":50},{"name":"Orange","price":30},{"name":"Grapes","price":10},{"name":"Orange","price":80}]
// totalPriceOfFruits :  170

Краткое содержание

Есть много других методов, доступных для выполнения циклических операций с массивами, строками и списками узлов в javascript. Поэтому не стесняйтесь выбирать лучший оптимальный вариант, доступный в соответствии с вашими требованиями. Приятного чтения 🙏