js数组reduce方法应用

最新推荐文章于 2023-05-02 16:21:18 发布

原创最新推荐文章于 2023-05-02 16:21:18 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js实用api操作

js实用api 专栏收录该内容

2 篇文章

订阅专栏

本文介绍JavaScript数组的多种高效操作方法，包括求和、乘积、元素计数、去重、扁平化及属性求和等，展示reduce函数的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.求和/乘积

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

var str = '1234';
var strSum = Array.prototype.map.call(str, v => parseInt(v)).reduce((x,y) => x + y);
console.log(strSum);  //10;

2.高级用法

1.计算数组中每个元素出现的次数

var nameList = ['Tom','Lucy','Jack','Lucy','Jerry'];
var result = nameList.reduce((prev, curr) => {
        if(curr in prev) prev[curr]++;
        else prev[curr] = 1;
        
        return prev;
    }, {})
console.log(result);

2.数组去重

var arrList = [1,2,2,3,1,5,2,6,4,2];
var newArrList = arrList.reduce((prev, curr) => {
        if(!prev.includes(curr)) return prev.concat(curr);
        else return prev;
    }, [])
console.log(newArrList);  //[1,2,3,5,6,4]

3.二维数组转一维数组

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur) => {
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

4.多维数组转一维数组

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur) => pre.concat( Array.isArray(cur) ? newArr(cur) : cur ),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

5.对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce((prev, curr) => {
        return cur.score + prev;
    }, 0);
console.log(sum) //60

6.假如有如下每个元素都由字母"s"加数字组成的数组arr，现在找出其中最大的数字

const arr = ["s0", "s4", "s1", "s2", "s8", "s3"]

// 1次遍历解决
const maxS = arr.reduce((prev, cur) => {
  const curIndex = Number(cur.replace("s", ""))
  return curIndex > prev ? curIndex : prev
}, 0)

7.生成想要的 html 结构

// 后端返回数据
const data = {
  "if _ then s9": [
    "作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生",
    "作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生",
    "作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生"
    ],
  "if C then s4": [
    "当有条件时时,结构构件满足要求,要求属于安全性、适用性和耐久性",
    "当有条件时时,住宅结构满足要求,要求属于安全性、适用性和耐久性"
  ]
}


const ifthens = Object.entries(data).reduce((prev, cur) => {
  const values = cur[1].reduce((prev, cur) => `${prev}<p>${cur}</p>`, "")
  return `
    ${prev}
    <li>
      <p>${cur[0]}</p>
      ${values}
    </li>
  `
}, "")


const html = `
  <ul class="nlp-notify-body">
    ${ifthens}
  </ul>
`

8.找出数组最大值及其索引值

var a = [1,2,3,4,5,6,7,7,6,5,4,3,2,1]
var indexOfMax = 0;
var max = a.reduce( (a,c,i) => c > a ? (indexOfMax = i,c) : a, 0)