[ES6] 理解JavaScript中 map、forEach、filter 和 find 与箭头函数的使用

  如果你是一个刚开始学习 JavaScript 的人，你可能会觉得编写箭头函数很容易。但如果在箭头函数出现之前你已经习惯了 JavaScript 的写法，那么在你适应之前，每次遇到箭头函数时，你可能需要上网搜索箭头函数的语法或整理笔记。我相信很多人都有这样的经历。然而，一旦你适应了箭头函数的写法，你就可以写出更简洁的代码，以至于在以后你可能会忘记传统的写法。
  在本文中，我们将讲解如何使用箭头函数和 map、forEach、find、filter 函数，帮助你掌握箭头函数的编写方法和各个函数的使用方法。

JavaScript 特性 this与“bind“和“call“，“apply“的理解
JavaScript 特性 Promise 函数
JavaScript 特性 map、forEach、filter 和 find 与箭头函数的使用
JavaScript 特性 Destructuring 语法
JavaScript 特性 Proxy（代理）和Reflect（反射）
JavaScript 特性 Object.assign与Getter,Setters 和 definePropert
JavaScript 中使用 XMLHttpRequest

1 如何编写箭头函数

  处理内容是一样的，但是如果用箭头函数来写到现在的函数，就会像下面这样。

let add = (a, b) => {
  console.log(a + b)
}

再者，如果像console.log这样的花括号中只有一行代码，也可以这样写。

let add = (a, b) => console.log(a + b)

如果您不想使用不带参数的箭头函数：

let hello = function(){
    console.log('Hello World!')
}

我如何编写一个有返回值的函数，可以看下面的代码描述。

let add = (a, b) => {
  return a + b
}
// return 也可以写成下面样子
let add = (a, b) => a + b
//如果只有一个参数，则可以省略括号。
let add =  a => a + 20

通过这种方式使用箭头函数，可以省略很多部分并缩短代码。

2 Map 函数使用

  map函数作为一种操作和处理数组的方法，它能够遍历数组中的每个元素。通过使用它，我们可以轻松地对数组进行操作。实际操作比文字解释更容易理解，因此我们来看一下如何使用map函数来操作数组。

​ 例如，如果你有一个数字数组price，而你想把其中的每个元素都乘以1.1，那么你可以使用map函数来实现这个操作。在map函数的回调函数中，我们将数组的每个元素都乘以1.1，并把结果放入一个新数组中。这样，新数组的每个元素都对应着原数组中被操作的元素，只不过它们的值被乘以了1.1。

​ 值得注意的是，被操纵的原数组中的元素并没有被改变，它们仍然保持着原来的值。相反，新数组中的每个元素都是原数组中对应元素的1.1倍。使用map函数进行这种数组操作，可以让我们轻松地批量处理数组中的元素，提高代码效率和可读性。

const price = [100,500,1000]
tax_price = price.map(function(value){
  return value*1.1
})
console.log(tax_price)
>[110, 550, 1100]

使用箭头函数缩写

可以使用之前学习过的箭头函数来缩短回调函数的写法，如下所示：

javascriptCopy codeconst prices = [10, 20, 30];
const newPrices = prices.map(price => price * 1.1);

在上述代码中，我们使用箭头函数来定义回调函数。箭头函数的参数列表中只有一个参数，因此我们可以省略掉括号。同时，箭头函数的返回值是单行表达式，因此也可以省略掉花括号和return关键字。这样，我们就可以通过一行简洁的代码实现对数组中每个元素乘以1.1并生成一个新数组。使用箭头函数可以让我们更加简洁地书写代码，提高代码的可读性和可维护性。

Map函数的回调函数中，除了元素的值之外，还可以使用另一个参数来表示当前元素的索引。这个参数通常被称为“index“或”idx“。使用索引参数可以直接访问和操作数组中的元素，从而使map函数操作更加灵活和高效。

const price = [100,500,1000]
tax_price = price.map( (value,index) => value*1.1*index )
console.log(tax_price);
[ 0, 550, 2200 ]

3 ForEach 函数使用

  ForEach函数操作类似于map，可以用来单独处理数组中的每个元素。**map函数有返回值，forEach函数没有。**注意 forEach 函数与 map 的不同之处在于 forEach 函数没有返回值。由于没有返回值，我们创建一个tax_price数组，将遍历后重新计算的数值放入到tax_price数组中。

const price = [100,500,1000]
tax_price =[]
price.forEach(function(value){
  tax_price.push( value * 1.08)
})
console.log(tax_price);

使用箭头函数缩写

price.forEach(value => tax_price.push( value * 1.08))

forEach执行遍历数组对象是函数
  函数可以放在 JavaScript 数组的元素中，我们使用 forEach 来遍历数组中的函数，这些函数可以按如下方式执行。

let z_world = () => console.log('Hello World')
let z_javascript = () => console.log('Hello JavaScript')
const hello = [z_world, z_javascript]
hello.forEach(value => value())

forEach索引

  forEach函数不仅可以获取数组的元素，还可以获取数组的索引。参数index是数组的索引，在方法中使用index就是获得数组的索引引用。

price.forEach(function(value,index){
  console.log(value +”  “+ price[index])
})
//在使用索引的时候，使用箭头函数会像下面这样。
price.forEach((value,index) => console.log(value +”  “+ price[index]))

如果不需要返回值的时候，无论使用 map 还是 forEach，结果都是一样的。它们的主要区别在于map 有返回值，forEach没有返回值。

4 find 函数使用

  find 函数是在数组中查找满足特定条件的元素，它只能检索满足条件的第一个元素。在数组中查找满足特定条件的元素是一个常见的操作，我们可以使用数组的find函数来实现。该函数接收一个回调函数作为参数，用于检查数组中的每个元素是否满足特定条件。如果满足条件，则返回该元素，否则返回undefined。需要注意的是，find函数只能检索满足条件的第一个元素，而不能检索到所有符合条件的元素。

const price = [100, 500 ,1000]
over = price.find(function(value){
	return value > 400
})
console.log(over)
>500

满足上面的条件有500、1000，但是只检索出来了500。由于500是第一个大于400的元素，因此find函数返回500，并将其赋值给”over”变量。最终输出结果为500。

使用箭头函数缩写

over = price.find(value => value > 400)

5 filter 函数使用

  find 函数仅检索满足条件的一个元素，而filter(过滤函数)检索满足条件的所有元素。

const price = [100, 500 ,1000]
over = price.filter(function(value){
	return value > 400
})
console.log(over)
>[500,1000]

使用箭头函数缩写

over = price.filter(value => value > 400)

find与filter的主要区别在于 find有符合条件的第一个元素，filter返回符合条件的元素。

6 reduce函数使用

  可能有些人不太熟悉reduce函数的使用，因为它并不像其他常见的循环函数那样常用。不过，reduce函数在处理数组元素聚合的时候非常实用。

reduce函数的语法如下：

array.reduce((accumulator, currentValue) => {
  //聚合逻辑
}, initialValue);

需要注意的是，reduce函数可以接收一个初始值(initialValue)，也可以省略这个初始值。reduce函数最常用的场景之一是对数组进行求和。

例如，假设我们有一个数组”test“，我们想要将其中的所有元素求和。我们可以使用reduce函数来实现，代码如下：

const test = [10,20,30]
const sum = test.reduce(((pre, cur) => pre + cur),100)
console.log(sum) 

如果给定初始值为100，那么在第一次迭代时，pre 将包含 100，cur 将包含测试数组的第一个值10。100+10 的结果将作为下一个预测值。这是第一个循环。第二个迭代将会将pre设置为上一次的结果110，cur将包含测试数组的第二个值20，110+20的结果将作为下一个pre值。最后一次迭代将是将 pre 设置为上一次的结果130，cur将包含测试数组的第三个值30。130+30的结果将是 reduce 函数的最终返回值160。

代码007普通

打赏 收藏 海报 链接