分享一个前端知识点数组的魔法棒:reduce的妙用

文摘   2024-09-24 12:43   上海  

今天我们来聊聊JavaScript中的一个强大工具——数组的reduce方法。这个方法可以让我们用一行代码完成复杂的操作,简直是编程界的瑞士军刀!

🧙‍♂️reduce的魔力

reduce方法对数组中的每个元素执行一个由你提供的reducer函数(升序执行),将其结果汇总为单个返回值。简单来说,就是把数组“压缩”成一个值。

reducer 函数接收4个参数:

    Accumulator (acc) (累计器)

    Current Value (cur) (当前值)

    Current Index (idx) (当前索引)

    Source Array (src) (源数组)

您的reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

🛠️【累加器】

最常见的用法是累加数组中的数字。比如,你有一组数字,想计算它们的总和,reduce可以轻松做到。

const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 输出:15

🏗️【构建对象】

reduce也可以用来构建对象。比如,你有一组数据,想根据某个属性构建一个键值对的对象。

const users = [{name: "Alice", age: 21}, {name: "Bob", age: 25}];const usersObj = users.reduce((obj, user) => {  obj[user.name] = user.age;  return obj;}, {});console.log(usersObj); // 输出:{ Alice: 21, Bob: 25 }

📦【数组扁平化】

如果你有一个多维数组,想要将其扁平化,reduce也能帮到你。

1etarr-[1,2,[4,6],[1,6,[3,6]],[1,[3,4,[1,2]],[2,2]]]const newArr=(arr)=>{return arr.reduce((pre,cur) => treturn pre.concat(Array.isArray(cur)?newArr(cur):cur},[1)c0ns0le.10g(newArr(arr))//=>[1,2,4,6,1,6,3,6,1,3,4,1,2,2,2

这里使用了 三目运算 、 concat 数据拼接 、递归 的思路完成。先判断当前处理的元素(有可能是数组)是不是数组(Array.isArray(cur)),如果是再次执行newArr,否则就直接处理当前元素,即将cur拼接进之前处理的数组中。

📊【计算平均值】

想知道数组中数字的平均值?reduce可以帮你轻松计算。

const scores = [80, 90, 70, 60, 50];const average = scores.reduce((acc, val) => acc + val, 0) / scores.length;console.log(average); // 输出:70

🎨【数组去重】 reduce可以用来创建一个没有重复元素的新数组。

const numbers = [1, 2, 2, 3, 4, 4, 5];const uniqueNumbers = numbers.reduce((acc, val) => {  if (!acc.includes(val)) acc.push(val);  return acc;}, []);console.log(uniqueNumbers); // 输出:[1, 2, 3, 4, 5]


会敲代码的程序媛
上海的程序媛,爱代码,爱健身,爱户外运动,更爱搞副业。
 最新文章