【JS】js常用工具类：

---

一、 将对象拼接到url地址后面

ObjConcatURL(obj) {
   if (!(typeof obj == 'object') || Object.keys(obj).length == 0) {
     return "";
   } else {
     // 过滤对象中为NaN，undefined的属性
    for (let key in obj) {
       if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] == NaN || obj[key] == '')) {
         delete obj[key]
       }
     }
     // 拼接字符串到url
     return obj ? '?' + Object.keys(obj).map(i => `${i}=${obj[i]}`).join('&') : "";
   }
},

二、正则获取url中的图片名称

// 下载
handleDownload(url) {
   if (!url) {
      this.$message.warning("链接不存在")
      return
   }
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = url

   // 正则获取url中的图片名称
   const reg = /[^/]+(?!.*\/)/g
   const imgName = url.match(reg).filter(item => item).pop()

   link.setAttribute('download', imgName)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link) //下载完成移除元素
   window.URL.revokeObjectURL(url) //释放掉blob对象
}

三、获取多数组之间的差集

// 获取多数组之间的差集
arrayAminus(arrA, arrB, arrC) {
  return arrA.filter(v => !arrB.includes(v) && !arrC.includes(v));
},

四、数组遍历判断是否需要拼接地址

// 数组遍历判断是否需要拼接地址
pushArr(arr) {
  if (!Array.isArray(arr) || arr.length == 0) { return [] }
  let newArr = []
  arr.forEach(item => {
     if ((typeof item == 'object') && item.url) {
       item.url.includes("http") || item.url.includes(";base64,") ? newArr.push(item.url) : newArr.push(process.env.VUE_APP_FILE_URL + item.url)
     } else {
       item.includes("http") || item.includes(";base64,") ? newArr.push(item) : newArr.push(process.env.VUE_APP_FILE_URL + item)
     }
  })
return newArr
},
    
// 分类过滤
filterArrType(arr, type) {
   if (!Array.isArray(arr) || arr.length == 0) { return [] }
   let newArr = []
   arr.forEach(item => {
     if (type == "gross" && (item.includes("gross") || item.includes("First"))) { newArr.push(item) }
     else if (type == "tare" && (item.includes("tare") || item.includes("Second"))) { newArr.push(item) }
     else if (type == "chetou" && item.includes("chetou")) { newArr.push(item) }
     else if (type == "chewei" && item.includes("chewei")) { newArr.push(item) }
     else if (type == "chexiang" && item.includes("chexiang")) { newArr.push(item) }
     else if (type && item.includes(type)) { newArr.push(item) }
   })
  return newArr
},

五、 数组去重

// 数组去重
export function arrFilter(arr) {
	if (!Array.isArray(arr) && arr.length == 0) { return []; }
	return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}

六、如果值不存在就 push 进数组， 反之不处理

/*
 * 如果值不存在就 push 进数组， 反之不处理
 * @param array 要操作的数据 
 * @param value 要添加的值 
 * @param key 可空， 如果比较的是对象， 可能存在地址不一样但值实际上是一样的情况， 可以传此字段判断对象中唯一的字段， 例如 id。 不传则直接比较实际值 
 * @returns { boolean } 成功 push 返回 true， 不处理返回 false 
 */
export function pushIfNotExist(array, value, key) {
	for (let item of array) {
		if (key && (item[key] === value[key])) {
			return false
		} else if (item === value) {
			return false
		}
	}
	array.push(value)
	return true
}

七、过滤对象中为NaN，undefined的属性

// 过滤对象中为NaN，undefined的属性
export function objFilter(obj, type) {
	if (!(typeof obj == 'object')) {
		return;
	}
	for (let key in obj) {
		if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] == NaN)) {
			console.log('---------过滤对象(null/undefined/NaN)：' + key + ':' + obj[key] + '----------')
			if (type) {
				obj[key] == type;
			} else {
				delete obj[key];
			}
		}
	}
	return obj;
}

八、字符串中插入千位分隔符

// 字符串中插入千位分隔符
export function thousandsSeparator(num) {
	if (!(typeof num == 'number') || isNaN(num)) {
		return;
	}
	return (num + "").replace(/\d(?=(\d{3})+$)/g, "$&,")
}

九、保留小数位数

/**
 * 保留小数位数
 * @param {*} num 
 * @param {*} digit 需要保留小数位数（全部显示：则不传或传null）
 * @param {*} type 是否四舍五入（是：不传或传"四舍五入"）
 * @returns 
 */
export function keepDecimal(num, digit, type) {
  if (!type || type == null || type == '四舍五入') {
    // 1.四舍五入
    var result = parseFloat(num);
    if (isNaN(result)) { return }
    return digit && digit != null ? Number(result.toFixed(digit)) : Number(result)
  } else {
    // 2.不四舍五入 向下取整
    var result = digit && digit != null ? Math.floor(num * Math.pow(10, digit)) / Math.pow(10, digit) : parseFloat(num);
    if (isNaN(result)) { return }
    return result
  }
}

十、根据参数搜索的数组对象里面其它元素

/**
 * @param {*} array 需要搜索的数组对象
 * @param {*} key   需要搜索的数组里的key
 * @param {*} value 需要查找的value
 * @param {*} element 要获取的元素
 * let arr=[{name:'123',id:10},{name:'1',id:2}];
 * console.log(findElement(arr, 10, 'id','name'))//==>表示根据id获取其name
 */
export function findElement(array, key, value, element) {
  if (!Array.isArray(array)) { return null }
  if (array.length == 0) { return null }
  let Obj = array.find(i => i[key] == value)
  return Obj && Obj[element] ? Obj[element] : null
}

十一、根据全部列表数组和选中的数组，根据key获取其它key的value数组

/**
 * @param {*} arrA  完整的列表数组
 * @param {*} arrB  选择展示的数组
 * @param {*} value 需要查找的value
 * @param {*} element 要获取的元素
 * let arrA=[{name:'123',id:10},{name:'1',id:2},...]; =['123''1'];
 * console.log(findElementArr(arrA , arrB ,  'name' , 'id'));  //==>表示根据name值获取其ids数组
 */
 
export function findElementArr(arrA, arrB, value, element) {
  if (!Array.isArray(arrA) || !Array.isArray(arrB)) { return [] }
  if (arrA.length == 0 || arrB.length == 0) { return [] }
  let arr = []
  for (let index = 0; index < arrA.length; index++) {
    const item = arrA[index];
    for (let i = 0; i < arrB.length; i++) {
      const obj = arrB[i];
      if (!(typeof obj == 'object')) {
        item[value] && item[element] && item[value] == obj ? arr.push(item[element]) : null
      } else {
        item[value] && item[element] && item[value] == obj[value] ? arr.push(item[element]) : null
      }
    }
  }
  return arr
}

十二、有新旧两个数组，获取删除和新增的元素

/**
 * 有新旧两个数组，获取删除和新增的元素
 * 【1】let beArr = [1, 2, 3, 4], afArr = [2, 3, 6];
 * console.log(compareArrays(beArr, afArr));
 * 
 * 【2】let oldArr = [{ id: "001", name: "赵大" },{ id: "002", name: "钱二" },{ id: "003", name: "孙三" },{ id: "004", name: "李四" }];
 *      let newArr = [{ id: "002", name: "钱二" },{ id: "003", name: "孙三" },{ id: "005", name: "周五" },{ id: "006", name: "吴六" }];
 * console.log(compareArrays(oldArr, newArr, 'id'))
 * 
 * return 返回一个对象里面包含后一个数组比第一个数组增加、减少的数据（适用于去重过后的数组）
 */
function compareArrays(beforeArr, afterArr, key) {
  let addArr = [], deleteArr = [];
  for (let i = 0; i < afterArr.length; i++) {  // 新增的内容
    const item = afterArr[i];
    if (key && beforeArr.filter((v) => v[key] == item[key]).length == 0) {
      addArr.push(item);
    } else if (!key && beforeArr.filter((v) => v == item).length == 0) {
      addArr.push(item);
    }
  }
  for (let i = 0; i < beforeArr.length; i++) {  // 删除的内容
    const item = beforeArr[i];
    if (key && afterArr.filter((v) => v[key] == item[key]).length == 0) {
      deleteArr.push(item);
    } else if (!key && afterArr.filter((v) => v == item).length == 0) {
      deleteArr.push(item);
    }
  }
  return { addArr: addArr, deleteArr: deleteArr };
}