[toc]

打包自定义工具库

自定义功能

函数相关

防抖函数（debounce）

函数防抖（Debounce）：指触发事件后在 n 秒内函数只执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。如：搜索框，滚动条

功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。

比如一个输入框，当应用实现防抖函数之后，用户不断输入内容时，函数会一直被触发，则不会发送请求。只有当用户在一段规定时间N内未进行输入操作，才会发送一次请求。如果在N秒内间断的输入内容，且间断的时间小于规定时间N时，则会重新计时且不会发送请求。
这样降低了发送请求的次数，提高性能的同时也提升了用户体验。

注意：
防抖和节流函数中 return 的函数不能使用箭头函数，如果使用箭头函数则 this 就会指向 globalFunction，就会有问题

手写实现防抖函数（js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，timer将一直在内存中
const debounce = (func, wait = 50) => {
    // 缓存一个定时器
    let timer = null;
    // 返回的函数是每次用户实际调用的防抖函数
    return (...args) => {
        // 如果已经设定过定时器了就清空上一次的定时器
        if (timer) clearTimeout(timer);
        // 开始一个新的定时器，延迟执行用户传入的方法
        timer = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
};

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
 
  /**
   * 函数防抖
   * 触发事件后在n秒后执行，如果n秒内又触发事件，则重新计算时间
   */
  debounce(fn, wait = 1000) {
    let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
  },
 

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div class="wrapper">
    <div @click="btnDebounce('函数','防抖')">函数防抖</div>
    <div @click="btnThrottle('函数','节流')">函数节流</div>
  </div>
</template>
<script>
  import globalFunction from "../../utils/globalFunction";
 
  export default {
    name: "test",
    methods: {
 
      btnDebounce: globalFunction.debounce(function (str1, str2) {
        console.log(str1, str2);
      }, 2000),
 
      btnThrottle: globalFunction.throttle(function (str1, str2) {
        console.log(str1, str2);
      }, 2000),
 
    }
  }
</script>

说明：
globalFunction 类的 debounce、throttle 返回的一个函数，就相当于

1
2
3
4
5
6
btnDebounce() {
   let context = this;
   let args = arguments;
   console.log(this);
   console.log(args);
 }

节流函数（throttle）

函数节流（throttle）：指连续触发事件但在 n 秒中只执行一次，避免某些事件频繁触发。如：按钮点击

功能：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

实现节流函数（js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，falg将一直在内存中
const throttle = (func, wait = 50) => {
    // 定义falg，初试为true
    let flag = true;
    // 返回的函数是每次用户实际调用的节流函数
    return (...args) => {
        if (flag) {
            // 如果flag为true，则执行定时器
            setTimeout(() => {
                func.apply(this, args);
                // 函数执行完毕后，将flag改回true
                // 以便下次再执行
                flag = true;
            }, wait);
        }
        // 因为定时器是异步任务，定时器执行后，立刻将flag关闭
        // 在等待延时时间时，阀门始终关闭，不会一直执行函数
        flag = false;
    };
};


vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default {
 
  /**
   * 函数节流
   * 触发事件立即执行，但在n秒内连续触发则不执行
   */
  throttle(fn, wait = 1000) {
    let timer;
    return function () {
      if (timer != null) return;
      let context = this;
      let args = arguments;
      fn.apply(context, args);
      timer = setTimeout(() => {
        timer = null;
      }, wait);
    }
  },
}

使用lodash

https://www.lodashjs.com/docs/lodash.debounce?ivk_sa=1024320u

https://www.cnblogs.com/zhongxu6868/articles/15932369.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 全部引入lodash
import _ from 'lodash' （不推荐）
// 按需引入 lodash的节流方法（throttle）
import throttle from 'lodash/throttle' （推荐）
 
  methods: {
    // 开启节流 不用使用 箭头函数，有 this指向的问题
    changeIndex:throttle(function(index){
      this.activeIndex = index
    },100)
  },
};
 
产考官网的文档使用
_.throttle(func, [wait=0], [options=])
 
    参数
    func (Function): 要节流的函数。
    [wait=0] (number): 需要节流的毫秒。
    [options=] (Object): 选项对象。
    [options.leading=true] (boolean): 指定调用在节流开始前。
    [options.trailing=true] (boolean): 指定调用在节流结束后。
    返回
    (Function): 返回节流的函数。

数组相关

扁平结构与树形结构互转

树形多级菜单数据源嵌套结构与扁平结构互转

扁平结构转树形结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 数据源格式
const data =[
  { id:1,   pid:0,  name:"父节点1"     },           
  { id:11,  pid:1,  name:"父节点11"    },
  { id:111, pid:11, name:"叶子节点111" },
  { id:112, pid:11, name:"叶子节点112" },
  { id:113, pid:11, name:"叶子节点113" },
  { id:114, pid:11, name:"叶子节点114" },
  { id:12,  pid:1,  name:"父节点12"    },
  { id:121, pid:12, name:"叶子节点121" },
  { id:122, pid:12, name:"叶子节点122" },
  { id:123, pid:12, name:"叶子节点123" },
  { id:124, pid:12, name:"叶子节点124" },
  { id:13,  pid:1,  name:"父节点13"    },
  { id:2,   pid:0,  name:"父节点2"     },
  { id:21,  pid:2,  name:"父节点21"    },
  { id:211, pid:21, name:"叶子节点211" },
  { id:212, pid:21, name:"叶子节点212" },
  { id:213, pid:21, name:"叶子节点213" },
  { id:214, pid:21, name:"叶子节点214" },
  { id:22,  pid:2,  name:"父节点22"    },
  { id:221, pid:22, name:"叶子节点221" },
  { id:222, pid:22, name:"叶子节点222" },
  { id:223, pid:22, name:"叶子节点223" },
  { id:224, pid:22, name:"叶子节点224" },
  { id:23,  pid:2,  name:"父节点23"    },
  { id:231, pid:23, name:"叶子节点231" },
  { id:232, pid:23, name:"叶子节点232" },
  { id:233, pid:23, name:"叶子节点233" },
  { id:234, pid:23, name:"叶子节点234" },
  { id:3,   pid:0,  name:"父节点3"     }
];

/**
 * 将一个普通的节点数组（带有指向父节点的指针）转换为嵌套的数据结构。
 * @param {*} data  一组数据
 * @param {*} option 包含以下字段的对象：
 *      parentProperty（String）：可以找到父节点链接的属性的名称。默认值：'pid'。
 *      childrenProperty（String）：将存储子节点的属性的名称。默认值：'children'。
 *      idProperty（String）：唯一的节点标识符。默认值：'id'。
 *      nameProperty（String）：节点的名称。默认值：'name'。
 */
function FlatToNested(data, option) {
  option = option || {};
  let idProperty = option.idProperty || 'id';
  let parentProperty = option.parentProperty || 'pid';
  let childrenProperty = option.childrenProperty || 'children';
  let res = [],
    tmpMap = [];
  for (let i = 0; i < data.length; i++) {
    tmpMap[data[i][idProperty]] = data[i];
    if (tmpMap[data[i][parentProperty]] && data[i][idProperty] != data[i][parentProperty]) {
      if (!tmpMap[data[i][parentProperty]][childrenProperty])
        tmpMap[data[i][parentProperty]][childrenProperty] = [];
      tmpMap[data[i][parentProperty]][childrenProperty].push(data[i]);
    } else {
      res.push(data[i]);
    }
  }
  return res;
}

可配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 源数据
const data =[
    { _id:1,   parentID:0,  text:"父节点1"     },           
    { _id:11,  parentID:1,  text:"父节点11"    },
    { _id:111, parentID:11, text:"叶子节点111" },
    { _id:112, parentID:11, text:"叶子节点112" },
    { _id:113, parentID:11, text:"叶子节点113" },
    { _id:114, parentID:11, text:"叶子节点114" },
    { _id:12,  parentID:1,  text:"父节点12"    },
    { _id:121, parentID:12, text:"叶子节点121" },
    { _id:122, parentID:12, text:"叶子节点122" }
    //...
  ];

可以这样调用

1
2
3
4
5
6
FlatToNested(nodes,{
    idProperty:'_id',            //唯一的节点标识符。
    nameProperty:'text',         //节点的名称。
    parentProperty:'parentID',  //可以找到父节点链接的属性的名称。
    childrenProperty:'son'      //将存储子节点的属性的名称。
})

树形结构转扁平结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
```

### 数组过滤掉后面几个值



### 给定索引，然后挪到第一位（最后一位）

先`splice`删除，再新增

```js
function addSearchHistory(key,value) {
    var oldArr = store.get(key);
    if(oldArr){
        for (var i = 0; i < oldArr.length; i++) {
            if (oldArr[i] === value) {
                oldArr.splice(i, 1); // 如果数据组存在该元素，则把该元素删除
                break;
            }
        }
        oldArr.unshift(value); // 再添加到第一个位置
        store.set(key,oldArr);
    } else {
        var newArr = new Array();
        newArr.unshift(value);
        store.set(key,newArr);
    }
}

对象相关

过滤掉不需要的key / 只取需要的key

1
2
3
4
5
6
7
8
9
10
11
let device = {
      name: '设备1',
      code: '867725031691391',
      date: '1525835791000'
    }
    
const obj = (({name, date}) => ({name, date}))(device)
console.log(obj) // { name: '设备1', date: '1525835791000' }

let { code, ...obj } = device
console.log(obj)  // { name: '设备1', date: '1525835791000' }

替换key的名称

1
2
3
4
5
6
7
8
9
10
11
12
// 源数据
const data = [
    {x: "井盖传感器", y: "20", s: "45"},
    {x: "垫底", y: "20", s: "99"}
]


data.map((item, index) => {
    return {name: item.x, value: item.y, price: item.s}
})


结果：

1
2
3
4
5
6
7
8
9
10
11
12
[
	{
		name: "井盖传感器",
        price: 45,
        value: 20
	},
	{
       	name: "垫底",
        price: 99,
        value: 20 
    }
]

交换指定索引位置的值

源代码

1
2
3
let swap = (arr, i, j) => {
  [arr[i], arr[j]] = [arr[j], arr[i]];
}

测试

1
2
3
4
let arr = Array.from(Array(10), (_, k) => k)
console.log(arr)
swap(arr, 1, 3)
console.log(arr)

测试结果

1
2
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[ 0, 3, 2, 1, 4, 5, 6, 7, 8, 9 ]

对象合并

对象合并的多种方式（对于通过接口获取数据之后赋值给本地对象的时候极其有用）

第一种：手动赋值(很捞)

1
2
3
4
5
6
7
8
9
10
11
const obj1 = {
  name: "zs",
  age: 13,
};
const obj2 = {
  name: "ls",
  sex: "女",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;
console.log(obj1) // {name: 'ls', age: 13, sex: '女'}

这种方法时最简单的，但是日常项目中一个对象的属性是非常多的，如果还是用这种方法的话就会有点繁琐了

第二种：扩展运算符

1
2
3
4
5
6
7
8
9
10
11
12
const obj1 = {
  name: "zs",
  age: 13,
};
const obj2 = {
  name: "ls",
  sex: "女",
};
const newObj = { ...obj1, ...obj2 };
console.log(newObj === obj1); // false
console.log(newObj === obj2); // false
console.log(newObj) // {name: 'ls', age: 13, sex: '女'}

通过扩展运算符的特性可以快速的进行对象的合并，缺点就是需要用一个新的变量来接收

第三种：Object.assign() (最推荐)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const obj1 = {
  name: "zs",
  age: 13,
};
const obj2 = {
  name: "ls",
  sex: "女",
};
const newObj = Object.assign(obj1, obj2);
console.log(newObj === obj1); // true
console.log(newObj === obj2); // false
console.log(newObj); // {name: 'ls', age: 13, sex: '女'}

// 实际在合并的时候，可以直接
Object.assign(obj1, obj2)
console.log(obj1) // 并不需要用新的变量接收，上面只是演示

Object.assign()方法可以接收一个目标对象和一个或者多个源对象作为参数，如果对象中有一样的属性，后面对象的属性会覆盖掉前面对象的那个属性。

其原理是将后面的对象通过set 访问属性来添加进目标对象，所以最后返回的值其实就是第一个目对象，可以在目标对象上添加访问属性来见识覆盖过程

1
2
3
4
5
6
7
8
9
const obj1 = {
  set a(val) {
    console.log(val);
  },
};
Object.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "dog" });
// tom
// jerry
// dog

这个方法的使用场景有很多，都特别好用，例如：

1.vue 项目清空表单

日常有些同学清空表单可能会给 form 里面的数据一个一个的赋空值来进行表单的清空操作，其实效率是非常低的,但是如果使用 Object.assign()和$options 配合的话，效率就很高

1
2
3
4
5
6
7
8
// 日常
this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...此处省略一万字
// 使用Object.assign和$options
Object.assign(this.ruleForm, this.$options.data)

如果用的element的el-form，也是一个道理

Tips： $options 存储的是 Vue 实例的初始值，所以通过 Object.assign()覆盖值的特性，可以快速的做到重置表单

同理，如果是在进行表单数据修改的时候也能对页面的 ruleForm 进行快速的赋值

1
2
const { data } = await xxxApi.getList();
Object.assign(this.ruleForm, data);

获取对象的keys和values

1
2
3
4
5
6
7
8
9
10
11
12
13
14
getKeys(obj) {
  let arr = [];
  for (let key in obj) {
    arr.push(key);
  }
  return arr;
},
getValues(obj) {
  let arr = [];
  for (let key in obj) {
    arr.push(obj[key]);
  }
  return arr;
},