前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?

目录

  • 数组的遍历方法有哪些?forEach和map方法有什么区别?
    • forEach()
    • map()
    • filter()
    • for…of
    • every() 和 some()
    • find() 和 findIndex()
    • reduce() 和 reduceRight()
    • forEach和map方法有什么区别
      • 总结


数组的遍历方法有哪些?forEach和map方法有什么区别?

在JavaScript中,遍历数组是一项基本操作,它允许访问数组中的每个元素并执行一些操作。

forEach()

forEach() 方法对数组的每个元素执行一次提供的函数,但它不返回任何值。这个方法适合当你需要对数组的每个元素执行操作,但不需要创建一个新数组时使用。

const array = [1, 2, 3]
array.forEach(item => console.log(item * 2))

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第1张图片

注意:forEach() 不会改变原数组,但回调函数中的操作可能会改变原数组。

map()

map() 方法创建一个新数组,其结果是原数组中的每个元素调用一次提供的函数后的返回值。

const array = [1, 2, 3];
const doubled = array.map(item => item * 2);
console.log(doubled); // [2, 4, 6]

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第2张图片

注意:map() 不改变原数组,适用于需要根据原数组创建一个新数组的情况。

filter()

filter() 方法创建一个新数组,包含通过所提供函数实现的测试的所有元素。

const array = [1, 2, 3, 4]
const evens = array.filter(item => item % 2 === 0)
console.log(evens) // [2, 4]

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第3张图片

注意:filter() 不改变原数组,适用于需要从原数组中筛选出符合条件的元素的情况。

for…of

for…of 语句在可迭代对象(如数组、字符串等)上创建一个迭代循环,遍历其属性值。

const array = [1, 2, 3]
for (const item of array) {
  console.log(item)
}

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第4张图片

注意:for…of 不能直接遍历普通对象,因为它们不是可迭代的。

every() 和 some()

every()some() 方法都返回一个布尔值,every() 检测数组中的所有元素是否都满足条件,some() 检测数组中是否至少有一个元素满足条件。

const array = [1, 2, 3]
console.log(array.every(item => item > 0)) // true
console.log(array.some(item => item < 0)) // false

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第5张图片

注意:这两个方法都不改变原数组,适用于需要根据数组中的元素是否满足某些条件来进行布尔判断的情况。

find() 和 findIndex()

find() 方法返回数组中满足提供的测试函数的第一个元素的值,否则返回undefinedfindIndex() 返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。

const array = [1, 2, 3, 4]
console.log(array.find(item => item > 2)) // 3
console.log(array.findIndex(item => item > 2)) // 2

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第6张图片

注意:这两个方法都不改变原数组,适用于需要找到数组中满足条件的第一个元素或其索引的情况。

reduce() 和 reduceRight()

reduce()reduceRight() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

const array = [1, 2, 3, 4]
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
console.log(sum) // 10

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?_第7张图片

注意:reduceRight()reduce() 相同,但从数组的末尾向前工作。

forEach和map方法有什么区别

forEach方法和map方法都是用于遍历数组的方法

  • forEach方法用于遍历数组的每个元素,并对每个元素执行提供的回调函数,但它不会返回新的数组。
  • map方法也用于遍历数组的每个元素,但它会对每个元素执行提供的回调函数,并返回一个新的数组,新数组的元素是回调函数的返回值。

总结

JavaScript提供了多种方法来遍历数组,每种方法都有其特定的特点、用途和使用场景。forEach()适用于简单遍历,map()filter()在创建新数组时非常有用,而reduce()适用于将数组元素累加到单一值。选择合适的方法可以使代码更简洁、更高效。

持续学习总结记录中,回顾一下上面的内容:
数组的遍历方法包括:for循环、forEach方法、for…of循环、map方法、filter方法、reduce方法等。这些方法可以用来逐个访问数组中的元素,并对它们进行操作或处理。
forEachmap方法的区别:

  • forEach方法用于遍历数组的每个元素,并对每个元素执行提供的回调函数,但它不会返回新的数组。
  • map方法也用于遍历数组的每个元素,但它会对每个元素执行提供的回调函数,并返回一个新的数组,新数组的元素是回调函数的返回值。

你可能感兴趣的:(JavaScript,前端知识点,前端,javascript,开发语言)