超好用-Vue、React项目开发中常用到的方法封装

在实际项目开发中，我们总是会遇到各种各样的小问题，功能不难，却要必须写，在这里我总结一些常用到的小方法，以便下次使用时可以直接调用。

1. 判断上传的文件是否为图片格式

// 自定义封装一个方法， 可以使用 export 导出

const judgeImg = (val: any) => {
	const fileNames = (val + '').split('.') // 将上传的文件名从 .  进行截取
	const fileType = fileNames[fileNames.length - 1] //  获取文件类型
	const strFilter = ['jpeg', 'gif', 'jpg', 'png', 'bmp', 'pic', 'svg'] // 所有的图片类型
	return strFilter.includes(fileType) // 如果是图片类型，则返回true
}

目前上述代码用来判断上传的文件是否是图片格式，当然也不局限于判断图片，同样也可以用来判断文档、表格等类型，只需要将strFilter 里的类型替换成相应的即可。

2.文件导出(下载)方法

// 1、先封装文件下载的接口api，可以使用 export 导出

const exportExcel = (url: string, params: any) => {
	return request({
		url,
		method: 'post',
		responseType: 'blob',
		data: params
	})
}

// 2、在封装文件导出方法，调用上面的接口api  可以使用 export 导出

const exportExcelHandler = (data: any, params: any) => {
	const hideLoading = message.loading('下载中...', 0)
	exportExcel(data.url, { ...params }).then((res:any) => {
		const link = document.createElement('a')
		const blob = new Blob([res], { type: 'application/vnd.ms-excel' }); // 如果不行，换成 [res.data]
		link.style.display = 'none';
      	link.href = URL.createObjectURL(blob);
      	link.download = `${dayjs(new Date()).format('YYYY-MM-DD')}${data.fileName}.xlsx`; //下载的文件名
      	document.body.appendChild(link);
      	link.click();
      	document.body.removeChild(link);
	}).finally(() => {
		setTimeout(hideLoading, 0);
	})
}

3. 图片下载方法

// 自定义封装一个方法，可以使用 export 导出

const fileDownload = (fileUrl: string, fileName: string) => {
	const hideLoading = message.loading('下载中...', 0);
	const link = document.createElement('a');
	link.style.display = 'none';
  	link.href = fileUrl; //文件的url
  	link.download = fileName; //下载的文件名
  	document.body.appendChild(link);
  	link.click();
  	document.body.removeChild(link);
  	setTimeout(hideLoading, 0);
}

4. 获取顶部地址栏地址

// 自定义封装一个方法，可以使用 export 导出

const getTopUrl = () => {
  return window.location.href.split('/#/')[0];
};

5. 数组对象中根据多个条件去重

// 自定义封装一个方法，可以使用 export 导出
// 在这里，我以id 和name 为例，根据这两个字段进行数组去重
const removal = (arr) => {
	const cache = []  // 缓存，用于记录
	for(const t of arr) {
		// 检查缓存中是否已经存在
		if(cache.find(item => item.id === t.id && item.name === t.name)) {
			// 如果存在，则说明已经记录过，现在这个是多余的，直接忽略
			continue;
		}
		// 不存在，说明没遇到过，把它记录下来
		cache.push(t)
	}
	// 最后得到的cache 就是去重后的结果
	return cache
}

6. 数组对象中根据某个条件去重

// 自定义封装一个方法，可以使用 export 导出
// 在这里，我以 name 为例，根据这个字段进行数组对象去重
// 方法一:
const removal = (arr: any[]) => {
	const res = new Map()
	// 这一步的逻辑是，判断res中是否已经存在 name，如果不存在，则添加，如果存在，则本条重复，过滤
	return arr.filter((item: any) => !res.has(item.name) && res.set(item.name, item.value)) 
}

// 方法二：
const removal = (arr: any[]) => {
	if(arr.length > 0) {
		const res= new Map()
		for (const item of arr) {
			if (!res.has(item.jobNo)) {
				res.set(item.jobNo, item)
			}
		}
		let data = [...map.values()]
		return data
	}
}

// 方法三：
const removal = (arr: any[]) => {
  	const step: any[] = [];
  	arr.reduce((prev, curr) => {
    	if (!prev.includes(curr.value)) {
      		step.push(curr);
      		prev.push(curr.value)
    	};
    	return prev
  	}, []);
  	return step;
}

7. 根据某个字段，判断数组对象中是否有重复的选项

// 自定义封装一个方法，可以使用 export 导出
// 在这里，我以 jobNo为例，根据这个字段进行数组对象去重

const judgeIsRepeat = (arr: any[]) => {
	const newArr = arr.map((item: any) => item.jobNo)
	const arrSet = new Set(newArr)  // 使用 Set去重
	if(!(arrSet.size == newArr.length)) {
		return message.warning('该数组对象有重复的选项')
	} else {
		return message.warning('数组没有重复')
	}
}

8、防抖

/* @params: fn  执行的方法（即回调函数）
*  @params: wati 时间间隔
* 对于短时间内连续触发的事件（上面的滚动事件），防抖的含义是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次。
* 实际运用：按钮频繁点击，页面resize
*/ 

export const debounce = (fn: any, wait: number) => {
	let timer: any = null;
	return function () {
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(fn, wait)
	}
}

9、节流

/* @params  fn  执行的方法（即回调方法）
*  @params  wait  时间间隔
* 定义: 让事件在一定时间内执行一次
* 实际运用: 搜索框input事件，例如要支持输入实时搜索可以使用节流方案
*/

export const throttle = (fn: any, wait: number) => {
	let timer: any = null;
	return function (...args: any) {
		if(!timer) {
			timer = setTimeout(function() {
				fn(...args);
				timer = null
			}, wait)
		}
	}
}

10、金钱格式化，去除多余逗号

// @params: num: 传入的数值

exprot const get_money_num = (num: string | undefined) => {
	if (!num) return 0
	num = num + ''
	if (num.indexOf(',') != -1) return num.replace(/\,/g, '')
	else return num
}

11、解决js中N个数据求和精度溢出

/**
 * 金额求和
 * @param arr 要求和的数组
 * @returns
 */
export const countSum: (arr: number[]) => number = (arr) => {
  if (!arr.length) return 0;
  arr = arr.map((v: number) => {
    if (v && !Number.isNaN(Number(v))) return Math.round(v * 100);
    return 0;
  });
  const result =  arr.reduce((prev: number, curr: number) => {
    return prev + curr
  }, 0);
  return result / 100;
};

// 使用方式
countSum( [ a, b, c ] )   // 相加
countSum( [ a, -b, -c ] ) // 相减

注意：

1、countSum方法中传入的值必须要是数字，使用该方法前，如果是字符串类型，需要将其转化，最简单的形式是在前面加个 +
2、如果是金额形式的数字字符串，则很可能包含逗号，在使用该方法前，需要去除其中的逗号，在将其转化成数字

PS: 接下来我会持续往里面完善我所用到的各类实用的方法，欢迎大家提出意见！！