js 使用reduce方法合并两个对象数组,有则替换,无则新增

更新日期: 2022-08-17阅读: 853标签: reduce

需求

有两个对象数组A和B,现在需要将两个数组中的对象合并,有则替换,无则新增,数组如下所示:

let A = [
    {name: '张三', age: 18, sex:'男'},
    {name: '李四', age: 26, sex:'男'},
    {name: '王五', age: 32, sex:'男'}
]

let B = [
    {name: '李四', age: 25, sex:'男', height: 170},
    {name: '刘六', age: 32, sex:'女'}
]

合并后:C = [{
    {name: '张三', age: 18, sex:'男'},
    {name: '李四', age: 25, sex:'男', height: 170},
    {name: '王五', age: 32, sex:'男'},
    {name: '刘六', age: 32, sex:'女'}
}]


操作

我们分析下A和B数组,A和B中都存在name=李四的对象,所以要替换,而B中的name=刘六A中不存在,所以要新增,话不多说,我们通过js的reduce方法来做,代码如下:

const C = B.reduce((arr1, arr2)=>{
        // arr1第一次进来是等于初始化化值:A
        // arr2依次是B中的对象,挨个判断
        let isFlag = false
        arr1.forEach(item => {
          if(item.name === arr2.name){
            isFlag = true
            // 如果找到则替换
            item = Object.assign(item, arr2)
          }
        })
        if(!isFlag){
          // 如果找不到则新增
          arr1.push(arr2)
        }
        // 返回结果值arr1,作为reduce下一次的数据
        return arr1
      }, A)

这样就能成功的合并A和B数组了,如果大家对reduce这个方法不太了解,可以查看mdn的官方文档


链接: https://www.fly63.com/article/detial/12014

Reducer的深入理解

要理解 reducer 的第一点也是最重要的一点是它永远返回一个值,这个值可以是数字、字符串、数组或对象,但它始终只能是一个。reducer 对于很多场景都很适用,但是它们对于将一种逻辑应用到一组值中并最终得到一个单一结果的情况特别适用

reduce方法应用技巧

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。注意: reduce() 对于空数组是不会执行回调函数的。

Js中的reduce,fold和unfold

说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold,本质上就是一个折叠数组的过程

js中reduce的神奇用法

最近经常在项目中经常看到别人用reduce处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨。

关于JavaScript中的reduce()方法

reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值,如果不传第二参数 initialValue,那么相当于函数从数组第二个值开始,并且将第一个值最为第一次执行的返回值,如果传了第二个参数 initialValue

JavaScript中的reduce()的5个用例

在本文中,我们讨论了数组 reduce() 方法。首先介绍 reduce() 方法,然后,使用一个简单的示例讨论其行为。最后,通过示例讨论了 reduce() 方法最常见的五个用例

代码写得好,Reduce 方法少不了

reduce 接受两个参数,回调函数和初识值,初始值是可选的。回调函数接受4个参数:积累值、当前值、当前下标、当前数组。如果 reduce的参数只有一个,那么积累值一开始是数组中第一个值

js中数组reduce的使用原来这么简单

没有提供初始值,索引是从1开始的。提供了初始值索引是从0开始的。没有提供初始值循环次数等于数组长度-1。 提供了初始值循环次数等于数组的长度;没有提供初始值第一次cur是索引为1的那个值。提供了初始值cur是索引为0的那个值

面试官直呼内行!如何实现一个比较完美的reduce函数?

reduce() 方法对数组中的每个元素按序执行一个由用户提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!