数组的reduce用法

最新推荐文章于 2025-06-26 22:45:58 发布

原创最新推荐文章于 2025-06-26 22:45:58 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reduce #setData #vuex

web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用JavaScript的reduce方法来构建嵌套对象结构的方法，并展示了如何将其应用于更新Vuex store中的复杂对象。

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

数组的reduce方法加强练习

今天在浏览问题的时候，看到一个人发的问题是：

 已知
key="aaa.bbb.ccc.ddd.eee",
value=111.222;

写一个函数f，输出一个对象，对象的内容如下：
{
 aaa:{
   bbb:{
      ccc:{
         ddd:111.222
      }
   }
 }
------------------------------
提醒，f函数可以写成：
function f(key,value){

 var result={};
 var arr=key.split('.');
//下面的代码如何写？

}

采纳的办法是;

var key="aaa.bbb.ccc.ddd.eee",value=111.222;
function f(key,value){
    var result={};
    var arr=key.split('.');
    var r;
    while (r=arr.pop()) {
        result={};
        result[r]=value;
        value=result;
    }
    return result;
}

看到数组，我就想着练习练习数组的那几个遍历功能，想了下数组的 reduce 方法好像比较合适，于是就有了下面的方法：

(function f(){
    var key="aaa.bbb.ccc.ddd.eee";
    var value=111.222;

    var result={};
    var arr=key.split('.');
    arr.reduce((obj,name,i)=>{
        obj[name] = obj[name] || {};
        if(i == arr.length-1) {
            obj[name] = value;
        }
        return obj[name];
    },result);
    return result;
})()

解决了这个问题之后，突然想到前几天做的项目中使用了vuex，里面有很多嵌套的对象，改变vuex的store的时候特别麻烦，这个函数稍微改变一下正好可以解决这个问题，在这里也贴一下代码：

var isArray = function(data) {
    return Object.prototype.toString.call(data).slice(8,-1) == "Array";
};
var isObject = function(data) {
    return Object.prototype.toString.call(data).slice(8,-1) == "Object";
};
var setStoreData = function setStoreData(state,keys,data) {
    if(!isArray(keys)) {
        throw new Error("keys必须为数组");
    }
    var [first, ...arr] = keys;
    var obj = state[first];
    if(isArray(obj)) {
        obj = [...obj];
    } else if(isObject) {
        obj = Object.assign({},obj);
    }

    arr.reduce((obj,name,i)=>{
        obj[name] = obj[name] || {};
        if(i == arr.length-1) {
            obj[name] = data;
        }
        return obj[name];
    },obj);

    state[first] = obj;
}

github:
https://github.com/ma125120/ma-dom/tree/master/lib/module/fn.js

也可以使用

npm i ma-dom
然后在项目中使用
import { setStoreData } from 'ma-dom'
来引用该函数

如果有不懂的地方，可以在下面进行评论，大家一起交流。