js中的Object.keys、array.map、groupBy、call、apply总结分享

分享几个js中的函数

Object.keys()

首先这个函数是用来干嘛的呢？是用来把一个json字符串里的key全都取出来重新整成一个数组的方法，那么这个函数怎么用呢，接下来贴出我最近碰见的用法：

let groups={"key1":'value1',"key2":'value2',"key3":'value3',"key4":'value4',"key5":'value5'}
Object.keys(groups)//[ 'key1', 'key2', 'key3', 'key4', 'key5' ]

这有什么应用场景呢？我觉得这个可以用来遍历一个json对象的所有值，就比如：

let groups={"key1":'value1',"key2":'value2',"key3":'value3',"key4":'value4',"key5":'value5'}
let key=Object.keys(groups)//[ 'key1', 'key2', 'key3', 'key4', 'key5' ]
key.forEach(function(item){
  console.log(groups[item]) ;
})
/*结果如下：
      value1
      value2
      value3
      value4
      value5
*/

当然这样还不够，我们还能它和另一个函数结合使用，生成一个只有value，没有key的数组

array.map()

 map()函数又是用来干嘛的呢？据我了解，我个人认为它就是一个可以帮我们把一个数组重新组装成我们想要的样子的一个函数，接下来先解决一下上面留下的问题，用groups中的所有value组成一个新的数组

let groups={"key1":'value1',"key2":'value2',"key3":'value3',"key4":'value4',"key5":'value5'};
let data=Object.keys(groups).map(function(item){
    return groups[item];
});
console.log(data);
//结果：[ 'value1', 'value2', 'value3', 'value4', 'value5' ]

当然，这么一个案例还体现不出它的妙用，那么再来一个：

let datas=[
	[
	  {"Date":"周一","money":100,"name":"xyz"},
	  {"Date":"周二","money":200,"name":"xyz"},
	  {"Date":"周三","money":300,"name":"xyz"},
	  {"Date":"周四","money":400,"name":"xyz"},
	  {"Date":"周五","money":500,"name":"xyz"}
	],
	[
	  {"Date":"周一","money":300,"name":"xz"},
	  {"Date":"周二","money":2100,"name":"xz"},
	  {"Date":"周三","money":500,"name":"xz"},
	  {"Date":"周四","money":400,"name":"xz"},
	  {"Date":"周五","money":100,"name":"xz"}
	],
	[
	  {"Date":"周一","money":300,"name":"df"},
	  {"Date":"周二","money":2100,"name":"df"},
	  {"Date":"周三","money":400,"name":"df"},
	  {"Date":"周四","money":300,"name":"df"},
	  {"Date":"周五","money":1200,"name":"df"}
	]
];

let result=datas.map(function(item){
	let sumMoney=0;
	item.forEach(function(i){
	  sumMoney+=i["money"];
	});
	return [item[0]["name"],sumMoney]
})

console.log(result);
/*
结果为[['xyz', 1500],['xz', 3400],['df', 4300]]
*/

在看着个函数的时候不知道你是否想到了forEach()这个变脸array的函数，你别说，他俩还挺像的

let result=datas.map(function(item){
	let sumMoney=0;
	item.forEach(function(i){
	  sumMoney+=i["money"];
	});
	return [item[0]["name"],sumMoney]
})
console.log(result);//[Array(2), Array(2), Array(2)]

result= datas.forEach(function(item){
	let sumMoney=0;
	item.forEach(function(i){
	  sumMoney+=i["money"];
	});
	return sumMoney;
});
console.log(result);//undefined

从这个例子中我们可以看出，map能把return的值都保存到一个数组中，而forEach不可以

当然也可以换种写法，比如把forEach下面这样，就能实现map的功能：

let result2=[]
datas.forEach(function(item){
	let sumMoney=0;
	item.forEach(function(i){
	  sumMoney+=i["money"];
	});
	result2.push([item[0]["name"],sumMoney])
});
console.log(result2);//[Array(2), Array(2), Array(2)]

groupBy()

然后再分享一个大佬写的groupBy函数，我觉得用的就很巧妙，代码如下：

let datas=[
	{"Date":"周一","money":100,"name":"xyz"},
	{"Date":"周一","money":300,"name":"xz"},
	{"Date":"周五","money":500,"name":"xyz"},
	{"Date":"周四","money":300,"name":"df"},
	{"Date":"周二","money":2100,"name":"xz"},
	{"Date":"周二","money":200,"name":"xyz"},
	{"Date":"周五","money":100,"name":"xz"},
	{"Date":"周三","money":300,"name":"xyz"},
	{"Date":"周一","money":300,"name":"df"},
	{"Date":"周三","money":500,"name":"xz"},
	{"Date":"周二","money":2100,"name":"df"},
	{"Date":"周四","money":400,"name":"xz"},
	{"Date":"周三","money":400,"name":"df"},
	{"Date":"周四","money":400,"name":"xyz"},
	{"Date":"周五","money":1200,"name":"fd"}
];

//创建groupBy函数
function groupBy(arrays,fun){
    let groups={};
    arrays.forEach(function(array){
        let group=JSON.stringify(fun(array));
        groups[group]=groups[group] || [];
        groups[group].push(array);
    });
    return Object.keys(groups).map(function(group){
        return groups[group]
    })
};

//使用groupBy函数
let result=groupBy(datas,function(item){
	return item.name; //根据name分组
});
console.log(result);

运行结果为：

call()和apply()

这两个函数都能改变一个函数中的this对象的指向，具体请看如下案例：

/*
* call()和apply()
* 	- 这两个方法都是函数对象的方法，需要通过函数对象来调用
* 	- 当对函数调用call()和apply()都会调用函数执行
* 	- 在调用call()和apply()可以将一个对象指定为第一个参数
* 		此时这个对象将会成为函数执行时的this
* 	- call()方法可以将实参在对象之后依次传递
* 	- apply()方法需要将实参封装到一个数组中统一传递
*
* 	- this的情况：
* 		1.以函数形式调用时，this永远都是window
* 		2.以方法的形式调用时，this是调用方法的对象
* 		3.以构造函数的形式调用时，this是新创建的那个对象
 * 		4.使用call和apply调用时，this是指定的那个对象
 */
function fun(a,b) {
    console.log("a = "+a);
    console.log("b = "+b);
    alert(this);
}

var obj = {
    name: "obj",
    sayName:function(){
        alert(this.name);
    }
};

var obj2 = {
    name: "obj2"
};

//fun();        this==> Window
// fun.call();  this==> Window
// fun.apply(); this==>window
// fun.apply(obj,[2,3]);//this==> obj   <==>  fun.call(obj,2,3);
// fun.call(obj);  this==> obj   <===>  fun.apply(obj);
//obj.sayName.apply(obj2); this==> obj2 ==>  alert('obj2')

此次分享到此结束~~