项目中常用的工具函数（二）-CSDN博客

本文链接：https://blog.csdn.net/Kylincsg/article/details/135741163

上一篇：项目中常用的工具函数（一）

1、文本超出中间省略

/**
 * 通用 - 超过5个字符中间用 ... 代替
 * 处理前：大床房单间    处理后： 大床...间
 * @param  str 处理前-字符串
 * @param  num 数量
 * @return str 处理后-字符串
 */
export const commStringOmit = (str,num) => {
  if(str.length > num) {
    return str.substr(0, num - 2) + "..." + str.substr(-1);
  }
  return str;
}

2、相同的值，放到同一个数组里面

/**
 * @函数描述: 相同的str，放到同一个数组里面
 * @param: {Array} array 原数组
 * @param: {String} str 相同的值
 * @return: {Array} integration
 **/
export const sortArr = (array, str) => {
  var arrList = [], textList = [], tmp;
  // 按照特定的参数将数组排序将具有相同值得排在一起
  array = array.sort(function(a, b) {
    var aStr = a[str], bStr = b[str];
    return aStr < bStr ? -1 : 1;
  });
  if(array.length) {
    tmp = array[0][str];
  }
  // 将相同类别的对象添加到统一个数组
  for(var i in array) {
    if(array[i][str] === tmp) {
      textList.push(array[i]);
    } else {
      tmp = array[i][str];
      arrList.push(textList);
      textList = [array[i]];
    }
  }
  // 将最后的内容推出新数组
  arrList.push(textList); //获取到所有整合数据
  // 终极整合
  var integration = [];
  arrList.forEach((item) => {
    var itemObj = {title: "", children: []};
    item.forEach((self) => {
      // 后端返回的结构只有这几个字段，其他的不用传到父组件，否则会匹配不上，造成后端数据与传递数据项不统一
      if(itemObj.title !== self[str]) {
        itemObj.title = self[str];
        itemObj.children.push(self);
      } else {
        itemObj.children.push(self);
      }
    });
    if(itemObj.title !== ''){
      integration.push(itemObj);
    }
  });
  return integration;
}

3、数组去重

/**
 * @函数描述: 数组去重
 * @param: {Array} arr 原数组
 **/
export const arrayReduce = (data) => {
  return data.reduce((pre, cur) => {
    pre.indexOf(cur) === -1 && pre.push(cur);
    return pre;
  }, []);
}

To：常见的数组去重

4、是否含有图片

/**
 * 判断是否含有图片
 * @param  str
 */
export const containsImgTag = (str) => {
  var pattern = /<img.*?>/ig;
  return pattern.test(str);
}

5、过滤图片保留纯文本

/**
 * 过滤图片 保留纯文本
 * @param  str
 * @return
 */
export const filterImgTags = (str) => {
  return str.replace(/<img\b[^>]*?>/gi, " ")
}

6、过滤文本保留纯图片

/**
 * 过滤文本 保留纯图片
 * @param  str base64地址
 * @param  reqData oss指令凭证
 * @return Array
 */
export const filterTextSaveImgSrc = (str,reqData) =>{
  let regex = /<img src="(.*?)"/g
  let matches = str.match(regex);
  let srcArr = []
  matches.forEach(item => {
    let srcData = item.split('"')[1]
    let base64ToImageStr = base64ToImage(srcData,reqData)
    srcArr.push(base64ToImageStr)
  })
  return srcArr
}

7、OSS直传并获取地址(base64转图片)

/**
 * base64转图片
 * @param  base64DataUrl base64地址
 * @param  OSSTokenData 获取oss指令凭证  后端配置生成（可几秒失效），前端不用去阿里云配置
 * @param  filename 图片的类型名称
 * @return oss图片地址
 */
export const OSSAndBase64ToImage = (base64DataUrl,OSSTokenData,filename) => {
  let arr = base64DataUrl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  let file =  new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  })

  let formKey = OSSTokenData.dir + randomString(12) + `-${file.name}`
  let formData = new FormData();
  formData.append('OSSAccessKeyId', OSSTokenData.accessid)
  formData.append('policy', OSSTokenData.policy)
  formData.append('Signature', OSSTokenData.signature)
  formData.append('key', formKey)
  formData.append('host', OSSTokenData.host)
  formData.append('dir', OSSTokenData.dir)
  formData.append("file", file);

  const xhr = new XMLHttpRequest();

  xhr.open('post', OSSTokenData.host);

  xhr.send(formData);
  return ossUrl + formKey
}

注：这个要根据项目中的需求，自己配置formDate传递的数据

8、tree组件去掉undefined

/**
 * 去除外层多余的父节点的选中值 undefined  =>  分层选中的数据含有title的，但不需要这个数据，
 * 主要用于tree组件父节点没key，去掉父节点的选中值 undefined
 * @param {array}  checkedUserIdList  选中的userId集合
 * @param {string} removeValue     当前元素等于要删除的值
 */
export const removeParentNode = (checkedUserIdList, removeValue) => {
  for(var i = 0; i < checkedUserIdList.length; i++) {
    if(checkedUserIdList[i] === removeValue) {
      checkedUserIdList.splice(i, 1);
    }
  }
  return checkedUserIdList
}

9、tree获取所有子项

/**
 * @函数描述: 获取tree全部的key值集合
 * @param: {Array} data
 **/
export const getAllKeys = (data,name) => {
  let keys = [];
  for (let node of data) {
    if(node[name]){
      keys.push(node[name]);
    }
    if (node.children) {
      keys.push(...getAllKeys(node.children));
    }
  }
  return keys;
}

/**
 * @函数描述: 获取tree全部的value值集合
 * @param: {Array} data
 **/
 export const getAllNodes = (data) => {
    let nodes = [];
    for (let node of data) {
      if (node.userId) {
        nodes.push(node);
      }
      if (node.children) {
        nodes.push(...this.getAllNodes(node.children));
      }
    }
    return nodes;
 },

10、模糊搜索下拉框精确匹配文字高亮（v-html）

/**
 * @函数描述: 模糊搜索下拉框精确匹配文字高亮
 * @param {object} content 下拉项的内容
 * @param {object} title 需要匹配的内容
 */
export const searchHeightLight = (content,title) =>{
  let reg = ''
  let dataToReplace  = `<span style="color: #02A7F0">${title}</span>`
  if (content.indexOf(title) !== -1) {
    reg = content.replace(title, dataToReplace);
  }else {
    reg = content;
  }
  return reg
}

11、获取url地址参数（对象）

export const getParams() => {
	let url = location.search;
	let params = {};
	if(url.indexOf("?") === 0) {
		let strs = url.substr(1).replace(/\?/g, '&').split("&");
		for(let i = 0; i < strs.length; i++) {
			let kv = strs[i].split("=");
			params[kv[0]] = kv[1];
		}
	}
	return params;
}

12、开启h5调节模式

/**
 * 开启h5调试模式
 */
function debug() {
	let src = 'https://cdn.jsdelivr.net/npm/eruda';
	document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
	document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
}

13、全屏切换（兼容浏览器）

/**
 * 全屏切换
 */
function toggleFullscreen() {
	if(document.fullscreenElement ||
		document.mozFullScreenElement ||
		document.webkitFullscreenElement ||
		document.msFullscreenElement) {
		if(document.exitFullscreen) {
			document.exitFullscreen();
		} else if(document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if(document.webkitExitFullscreen) {
			document.webkitExitFullscreen();
		} else if(document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	} else {
		if(document.documentElement.requestFullscreen) {
			document.documentElement.requestFullscreen();
		} else if(document.documentElement.mozRequestFullScreen) {
			document.documentElement.mozRequestFullScreen();
		} else if(document.documentElement.webkitRequestFullscreen) {
			document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
		} else if(document.body.msRequestFullscreen) {
			document.body.msRequestFullscreen();
		}
	}
}

14、获取图片地址

/**
 * @函数描述: 获取图片的地址
 * @param: {String} url url地址
 **/
function getImage(url) {
    fetch(url).then(function(response) {
        if (!response.ok) {
            throw new Error('网络响应不成功');
        }
        return response.blob();
    }).then(function(myBlob) {
        let objectURL = URL.createObjectURL(myBlob);
        console.log(objectURL);
        window.open(objectURL);
    }).catch(function(error) {
        console.log('有问题出现在你的 fetch 操作中: ', error.message);
    });
}

/**
 * @函数描述: 获取图片的地址
 * @param: {String} url url地址
 **/
function getImage(url) {
	fetch(url, {mode: "no-cors"}).then(function(response) {
		console.log(response);
		return response.blob();
		//throw new Error('网络响应不成功');
	}).then(function(myBlob) {
		let objectURL = URL.createObjectURL(myBlob);
		console.log(objectURL);
		window.open(objectURL);
	}).catch(function(error) {
        console.log('有问题出现在你的 fetch 操作中: ', error.message);
	});
}

15、字符串与base64互转

/**
 * 字符串转base64
 * @param str
 * @returns {string}
 */
function encodeBase64(str) {
	// 对字符串进行编码
	let encode = encodeURI(str);
	// 对编码的字符串转化base64
	return btoa(encode);
}

/**
 * base64转字符串
 * @param base64
 * @returns {string}
 */
function decodeBase64(base64) {
	// 对base64转编码
	let decode = atob(base64);
	// 编码转字符串
	return decodeURI(decode);
}

16、防止重复点击

let forbidRepeatClick = (function() {
	let instance = null;
	let canClick = true;

	function Build() {
		this.setClick = function(callback) {
			if(canClick) {
				canClick = false;
				callback()
				setTimeout(function() {
					canClick = true;
				}, 1000)
			} else {
				console.log('1s之内不能重复点击')
			}
		}
	}


	if(!instance) {
		instance = new Build();
	}

	return instance;
})()

17、防抖、节流、延迟

/**
 * @函数描述: 防抖
 **/
export const debounce(func, delay) => {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

/**
 * @函数描述: 节流
 **/
export const throttle(func, delay) => {
  let timeoutId;
  return function() {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, arguments);
        timeoutId = null;
      }, delay);
    }
  };
}

/**
 * @函数描述: 让代码延迟执行
 * @param: {Number} numberMillis 睡眠的时间
 **/
function sleep(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

下一篇：项目中常用的工具函数（三）