记录一些有趣的前端技巧（js）

一些js技巧的使用：

本人开发和摸鱼时候看到的一下js的巧妙使用方法

---

（1）生成器实现字符串比较

/** 
 * 字符串比较（"1-4-5-33-556-66","2-2-33-22-444"）
 * 字符串用"-"分隔，从左到右比较
 * 第一个字符串大，则返回  1 
 * 第二个字符串大，则返回 -1
 * 两个字符串相等，则返回  0
 * 
 * 测试：
 * （"1-4-5-33-556-66","2-2-33-22-444"） return -1
 * （"3-4-5","2-2-3"） return 1
 * （"3-4-5","3-4-5"） return 0
 * （"3-4-5","3-4"） return 1
 * （"3-4","3-4-5"） return -1
 *  
 * */

---

解题分析

看到这个题目是，我的想法是直接字符串通过split('-')分隔，然后循环去比较。
但是后头一想，如果字符串很长，那岂不是全部都要便利，有有没有更好的办法呢，那就从左到右一个个去提取数字去比较，出结果就直接返回，停止运算，配合生成器更加合适。

---

解题方案

构造一个生成器，每次next()返回一个数字

/**
 * 
 * @param {string} str
 * 
 * 构造一个生成器
 * 从左到右一次返回"-"分隔的数字
 */
function* walk(str, separator = '-') {
    let part = ''
    for (let index = 0; index < str.length; index++) {
        const char = str[index];
        if (char !== separator) {
            part += char
        } else {
            yield + part
            part = ''
        }
    }
    //最后一个符号后面没有'-',如果走到最后，part还有值，直接yield 
    if (part !== '') {
        yield + part
    }
}

调用生成器

function compareStr(str1, str2) {
    const iterator1 = walk(str1)
    const iterator2 = walk(str2)
    while (1) {
        let value1 = iterator1.next()
        let value2 = iterator2.next()
        if (value1.done && value2.done) {
            return 0
        }
        if (value1.done && !value2.done) {
            return -1
        }
        if (!value1.done && value2.done) {
            return 1
        }
        if (value1.value !== value2.value) {
            return value1.value > value2.value ? 1 : -1
        }
    }
}

完整代码

function compareStr(str1, str2) {
    const iterator1 = walk(str1)
    const iterator2 = walk(str2)
    while (1) {
        let value1 = iterator1.next()
        let value2 = iterator2.next()
        if (value1.done && value2.done) {
            return 0
        }
        if (value1.done && !value2.done) {
            return -1
        }
        if (!value1.done && value2.done) {
            return 1
        }
        if (value1.value !== value2.value) {
            return value1.value > value2.value ? 1 : -1
        }
    }
}

/**
 * 
 * @param {string} str
 * 
 * 构造一个生成器
 * 从左到右一次返回"-"分隔的数字
 */
function* walk(str, separator = '-') {
    let part = ''
    for (let index = 0; index < str.length; index++) {
        const char = str[index];
        if (char !== separator) {
            part += char
        } else {
            yield + part
            part = ''
        }
    }
    if (part !== '') {
        yield + part
    }
}

console.log(compareStr("1-4-5-33-556-66", "2-2-33-22-444"));
console.log(compareStr("3-4-5", "2-2-3"));
console.log(compareStr("3-4-5", "3-4-5"));
console.log(compareStr("3-4-5", "3-4"));
console.log(compareStr("3-4", "3-4-5"));

（2）格式化数字为金额模式

问题需求

开发过程中，我们经常遇到各种数字格式化的问题，每个地区的格式化方式又不一样，这可太科瑞贼了。
xx.xxxx.xx
xxx.xxx.xxx
只能说奶思

/**
 * 
 * @param {string|number} val 传入的值 
 * @param {number} separatorNum  分隔的位数
 * @param {string} separatorStr  分隔的字符
 * @param {number} toFixedNum  保留的位数
 * @returns {string}
 */
function format(val = 0, separatorNum = 3, separatorStr = ',', toFixedNum = 2) {
    let str = (+val).toFixed(toFixedNum).toString()
    let [intStr, floatStr] = str.split('.')
    let reg = new RegExp(`(?=\\B(\\d{${separatorNum}})+$)`, "g")
    return intStr.replace(reg, separatorStr) + '.' + floatStr

}

感谢浏览，如果有小伙伴有更好的办法，请留言。