ES | JS 常用方法整理

---

highlight: an-old-hope

theme: smartblue

JS 函数大杂烩

由于开发过这种,对与js的很多函数都不太属性.在面对百度开发的过程中.调试 + 搜索占用了过多的时间 .因此在这里对常用的一些函数进行汇整理. 方便下次开发直接取用 .该文字会再后期进行持续更新

数组 reduce() 函数

reduce 方法的使用面其实是很广的,比如完全可以代替for和forEach进行遍历操作. 但这里我介绍一些用的比较少的高级用法.

先介绍一下reduce函数的参数说明 ``js arr.reduce(callback,[initialValue]) # callback 1、previousValue (上一次调用回调返回的值，或者是提供的初始值(initialValue)) 2、currentValue (数组中当前被处理的元素) 3、index (当前元素在数组中的索引) 4、array (调用 reduce 的数组) ` initialValue (作为第一次调用 callback 的第一个参数。)

```

1. 计算属性

比如我们需要订单数据中, 对订单数量汇总 js //模拟数据 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操作

1. 传统方法 ```js

   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 去重 ```js

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结构赋值的方式进行顺序更换调整.代码如下 js let mock = [1,2,3,4,5,6,7]; // 更换3和4的位置 [mock[2],mock[3]] = [mock[3],mock[2]]; console.log(mock);

如果是在位置下标的位置情况下,更换位置可以通过findIndex需要需要更换的下标值 ```js 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)

```