JS 函数大杂烩
由于开发过这种,对与js的很多函数都不太属性.在面对百度开发的过程中.调试 + 搜索占用了过多的时间 .因此在这里对常用的一些函数进行汇整理. 方便下次开发直接取用 .该文字会再后期进行持续更新
数组 reduce() 函数
reduce 方法的使用面其实是很广的,比如完全可以代替for和forEach进行遍历操作. 但这里我介绍一些用的比较少的高级用法.
先介绍一下reduce函数的参数说明
arr.reduce(callback,[initialValue])
#
callback
`
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
`
initialValue （作为第一次调用 callback 的第一个参数。）
1. 计算属性
比如我们需要订单数据中, 对订单数量汇总
//模拟数据
var arr = [ {name:"A",price:25,num:12,},{name:"B",price:55,num:10},{name:"C",price:45,num:2}]
var res = arr.map(e =>e.num).reduce( (total,c) => total + (isFinite(c) ? c :0),0);
2. 去重操作
关于去重操作, 今天在开发中遇到这个问题.百度了一段时间.网上提供了两种方案. 一个是自己封装一个方法,
一种是通过reduce操作
- 传统方法
# taskName 这个是你需要去重操作的字段
function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a.name) && res.set(a.name, 1))
};
var data = [ {name:"A",price:25,num:12,},{name:"B",price:55,num:10},{name:"B",price:45,num:2}];
unique(data);
2.
reduce 去重
var data = [ {name:"A",price:25,num:12,},{name:"B",price:55,num:10},{name:"B",price:45,num:2}];
var obj = {};
data.reduce((cur, next)=> {
obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
return cur;
},[]);
map 函数
join 函数
filter函数
sort函数
keys 函数
调整数组指定元素位置
今天遇到一个奇葩的需求,首页面板展示数据需要调整显示的顺序.由于本身数据存在一定的排序规则的.但是要强行更改顺序的话,只能在前端做数组元素顺序替换操作.好在需要更换的元素不多,且是指定下标的数组. 需求如下
在明确需要调整下标元素的情况下,可以通过es6结构赋值的方式进行顺序更换调整.代码如下
let mock = [1,2,3,4,5,6,7];
// 更换3和4的位置
[mock[2],mock[3]] = [mock[3],mock[2]];
console.log(mock);
如果是在位置下标的位置情况下,更换位置可以通过findIndex需要需要更换的下标值
var arr0 = [
{name:"张三",age:14,sex:"男"},
{name:"李四",age:17,sex:"女"},
{name:"王五",age:18,sex:"女"},
{name:"鸽蛋",age:10,sex:"男"},
]
var sanIndex = arr0.findIndex((v)=>{return v.name == "张三"});
var siIndex = arr0.findIndex((v)=>{return v.name == "李四"});
[arr0[sanIndex],arr0[siIndex]] = [arr0[siIndex],arr0[sanIndex]];
console.log(arr0)
