前端工具库~~续

前言

补上链接 前端工具库

补上未写完的前端工具库

// 求两个集合的并集
export const union = (a, b) => {
    var newArr = a.concat(b);
    return this.unique(newArr);
}

// 删除其中一个元素
export const remove = (arr, ele) => {
    var index = arr.indexOf(ele);
    if (index > -1) {
        arr.splice(index, 1);
    }
    return arr;
}

// 将类数组转换为数组
export const formArray = (ary) => {
    var arr = [];
    if (Array.isArray(ary)) {
        arr = ary;
    } else {
        arr = Array.prototype.slice.call(ary);
    };
    return arr;
} 

// 最大值
export const max = (arr) => {
    return Math.max.apply(null, arr);
}

// 最小值
export const min = (arr) => {
    return Math.min.apply(null, arr);
}

// 求和
export const sum = (arr) => {
    return arr.reduce((pre, cur) => {
        return pre + cur
    })
}

// 平均值
export const average = (arr) => {
    return this.sum(arr) / arr.length
}

// 去除空格,type: 1-所有空格 2-前后空格 3-前空格 4-后空格
export const trim = (str, type) => {
    type = type || 1
    switch (type) {
        case 1:
            return str.replace(/\s+/g, "");
        case 2:
            return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:
            return str.replace(/(^\s*)/g, "");
        case 4:
            return str.replace(/(\s*$)/g, "");
        default:
            return str;
    }
}

// 字符转换，type: 1:首字母大写 2：首字母小写 3：大小写转换 4：全部大写 5：全部小写
export const changeCase = (str, type) => {
    type = type || 4
    switch (type) {
        case 1:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();

            });
        case 2:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
            });
        case 3:
            return str.split('').map(function (word) {
                if (/[a-z]/.test(word)) {
                    return word.toUpperCase();
                } else {
                    return word.toLowerCase()
                }
            }).join('')
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }
}

// 检测密码强度
export const checkPwd = (str) => {
    var Lv = 0;
    if (str.length < 6) {
        return Lv
    }
    if (/[0-9]/.test(str)) {
        Lv++
    }
    if (/[a-z]/.test(str)) {
        Lv++
    }
    if (/[A-Z]/.test(str)) {
        Lv++
    }
    if (/[\.|-|_]/.test(str)) {
        Lv++
    }
    return Lv;
}

// 函数节流器
export const debouncer = (fn, time, interval = 200) => {
    if (time - (window.debounceTimestamp || 0) > interval) {
        fn && fn();
        window.debounceTimestamp = time;
    }
}

// 判断两个对象是否键值相同

export const isObjectEqual = (a, b) => {
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    if (aProps.length !== bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        if (a[propName] !== b[propName]) {
            return false;
        }
    }
    return true;
}

// 16进制颜色转RGBRGBA字符串
export const colorToRGB = (val, opa) => {

    var pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则
    var isOpa = typeof opa == 'number'; //判断是否有设置不透明度

    if (!pattern.test(val)) { //如果值不符合规则返回空字符
        return '';
    }

    var v = val.replace(/#/, ''); //如果有#号先去除#号
    var rgbArr = [];
    var rgbStr = '';

    for (var i = 0; i < 3; i++) {
        var item = v.substring(i * 2, i * 2 + 2);
        var num = parseInt(item, 16);
        rgbArr.push(num);
    }

    rgbStr = rgbArr.join();
    rgbStr = 'rgb' + (isOpa ? 'a' : '') + '(' + rgbStr + (isOpa ? ',' + opa : '') + ')';
    return rgbStr;
}

// 追加 url 参数
export const appendQuery = (url, key, value) => {
    var options = key;
    if (typeof options == 'string') {
        options = {};
        options[key] = value;
    }
    options = $.param(options);
    if (url.includes('?')) {
        url += '&' + options
    } else {
        url += '?' + options
    }
    return url;
}

// 判断是否是JSON字符串
export const  isJSON = (str)=> {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }

        } catch(e) {
            return false;
        }
    }
}

数组

数组去重

方法一
创建新数组存储数据

const array = [1, 1, 2, 3, 5, 5, 1]
 const uniqueArray = [...new Set(array)]; 
 console.log(uniqueArray);
 // [1,2,3,5]

方法二

const array = [1, 1, 2, 3, 5, 5, 1]

Array.from(new Set(array))
 // [1,2,3,5]

方法三

const array = [1, 1, 2, 3, 5, 5, 1] 
array.filter((arr, index) => array.indexOf(arr) === index)
 // [1,2,3,5]

数组映射

不使用Array.map来映射数组值的方法

const arr = [{
	name: 'xiaoming',
	age: 12
},
 {
	name:'xiaowang',
	age: 24
}
],

const name = Array.from(arr,({name})=>name)

// ['xiaoming','xiaowang']

数组截断

• splice
• 重新定义数组的length属性的值
• slice
  其中slice的运行较快，性能较好

过滤数组中的false值

const arr = [ 0, 1,4,5,7,null]
const fliterArr = arr.filter(Boolean)
// [1,4,5,7]

清空数组

重新定义数组的长度

let arr = [1,2,7,8,9]

arr.length = 0

递归扁平化处理数组

function flattenArray(arr){
	const flattenArr = [].concat(...arr)
	return flattenArr.some(item =>Array.isArray(item)? flattenArray(item):flattenArr)
}

从数组中获取最大值和最小值

const numbers = [15, 80, -9, 90, -99] 
const maxInNumbers = Math.max.apply(Math, numbers) 
const minInNumbers = Math.min.apply(Math, numbers) 

利用ES6的…运算符来处理

const numbers = [1,2,3,4]
Math.max(...numbers)
Math.min(...numbers)

数据类型转换

浮点数转换为整数

平常会使用 Math.floor()、Math.ceil()或Math.round()将浮点数装换为整数。还可以使用|(位或运算符）将防护垫数截断为整数。

console.log(23.9|0)
// 23

如果n是正数，则n | 0有效地向下舍入。如果n是负数，它有效地四舍五入。更准确的说，该操作删除小数点后的内容，将浮点数截断为整数。还可以使用~~来获得相同的舍入效果，如上所述，实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效，是因为一旦强制为整数，值就保持不变。

使用！！操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。

!!"" 					// > false 
!!0 						// > false 
!!null 				// > false
!!undefined	// > false
!!NaN				// > false 
   
 !!"hello" 		// > true 
 !!1 					// > true 
 !!{} 					// > true
 !![]					 // > true

总结

前端工具库到这里就总结完了，如果小伙伴们有什么新的方法，可以联系我~ 我及时更新这个库~