数组的reduce用法加强练习

297 阅读1分钟

数组的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:
github.com/ma125120/ma…

也可以使用

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

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