js优化代码小技巧

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

1.正则优化代码

一般我们常用if来判断一个值是否为一个常量，当条件很多时，代码就会很冗余，这时候可以用正则去匹配，简化代码量。

// 优化前
if(
    userName === '迪丽热巴' ||
    userName === '赵丽颖' ||
    userName === '白百何' ||
    userName === '关晓彤' ||
    userName === '刘亦菲'
) {
// ......
}
// 优化后
if(/^迪丽热巴|赵丽颖|刘亦菲$/.test(userName)){

}

2.识别浏览器内核及访问终端

很早之前写代码的时候不知道有这个东西，当时根据屏幕宽度去判断的是否是移动端，想想太可笑了。利用浏览器的内核判断设备，只需要封装一个工具类，需要的时候调用就可以。

function parseUA(userAgent) {
    const u = userAgent || navigator.userAgent;
    return {
        isIOS: /iOS|iPad|iPhone/i.test(u),
        isAndroid: /Android/i.test(u),
        isMobile: /iOS|iPad|iPhone|Android|windows Phone/i.test(u),
        isQQ: /qq/i.test(u), // 容易误匹配
        isWeixin: /micromessenger/i.test(u),
        isWeibo: /weibo/i.test(u),
        isMac: /mac/i.test(u),
        isWondows: /Windows NT/i.test(u)
    }
}

3.使用 indexOf 或 includes 加新数组

在进行数组去重的时候可以利用indexOf 或 includes来处理数据。当然现在可以用es6的set更简单一点。

// 使用indexof
function unique(arr) {
    var uniqueArr = []; // 新数组
    for (let i = 0; i < arr.length; i++) {
        if (uniqueArr.indexOf(arr[i]) === -1) {
            // indexof返回-1表示在新数组中不存在该元素
            uniqueArr.push(arr[i])// 是新数组里没有的元素就push入
        }
    }
    return uniqueArr;
}

// 使用includes
function unique(arr) {
    var uniqueArr = [];
    for (let i = 0; i < arr.length; i++) {
        // includes 检测数组是否有某个值
        if (!uniqueArr.includes(arr[i])) {
            uniqueArr.push(arr[i])//
        }
    }
    return uniqueArr;
}

// filter 配合 indexOf
function unique(arr) {
    return arr.filter(function (item, index, arr) {
        // 当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        // 不是那么就证明是重复项，就舍弃
        return arr.indexOf(item) === index;
    })
}

4.实现千分位分隔符

var str = "100000000000",
    reg = /(?=(\B\d{3})+$)/g;
str.replace(reg, ",")

5.把一个JSON对象的key从下划线形式（Pascal）转换到小驼峰

function myTypeof(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

6.vue的生命周期

挂载阶段

父组件 beforeMount -> 子组件 created -> 子组件 mounted -> 父组件 mounted

更新阶段

父组件 beforeUpdate -> 子组件 beforeUpdated -> 子组件 updated -> 父组件 updated

销毁阶段

父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

请求放在哪个周期

两个都是可以的，但是mounted会更好。（dom也已经加载完成）