Javascript 常用封装（二）

1.字符串占位宽度

• 计算占位宽度：字符串的占位宽度除了涉及到具体的字符串内容，还与字体大小有关，可以将其放入Dom中来获取实际占位宽度

//计算字符串的占位宽度
function getTextWidth(str = '',font_size=12) {
    const dom = document.createElement('span')
    dom.style.display = 'inline-block'
    dom.style['font-size'] = font_size + 'px'
    dom.textContent = str
    document.body.appendChild(dom)
    const width = dom.clientWidth
    document.body.removeChild(dom)
    return width;
}

//计算字符串数组中的最大宽度
function getMaxWidthByArray(text_arr=[],font_size=12){
    //计算设备编号占位的最大宽度
    var max_width = 0
    text_arr.forEach(function(str){
        var now_text_width = getTextWidth(str,font_size)
        if(now_text_width > max_width){
            max_width = now_text_width
        }
    })
    return max_width
}

2.树形对象转换

• 由来：多层级数据在存储时，是每个数据平级存储，通过id与pid字段进行进行关联，后台返回这些数据时，可能没经过转换，直接以数组形式返回，前端需要自己转换成树形对象

<script>
    //封装方法：一维数组转树形对象
    function buildTree(array, id = "id", parent_id = "pid") {
        //不是数组则返回
        if (!Array.isArray(array)) {
            return []
        }
        // 创建临时对象
        let temp = {};
        // 创建需要返回的树形对象
        let tree = {};
        // 先遍历数组，将数组的每一项添加到temp对象中
        for (let i in array) {
            temp[array[i][id]] = array[i];
        }

        // 遍历temp对象，将当前子节点与父节点建立连接
        for (let i in temp) {
            // 判断是否是根节点下的项
            if (temp[i][parent_id] !== 0) {
                //是否存在该父节点 存在才添加
                if (temp[temp[i][parent_id]]) {
                    //父节点是否已经存在children属性 没有则新建
                    if (!temp[temp[i][parent_id]].children) {
                        temp[temp[i][parent_id]].children = new Array()
                    }
                    temp[temp[i][parent_id]].children.push(temp[i])
                }
            } else {
                tree[temp[i][id]] = temp[i];
            }
        }

        return tree;
    }
</script>

<script>
    //待转换的数据格式
    var menu_list = [
        {
            id: 1,
            pid: 0,
            title: "一级菜单"
        },
        {
            id: 2,
            pid: 1,
            title: "二级菜单A"
        },
        {
            id: 3,
            pid: 1,
            title: "二级菜单B"
        }
    ]
    //转换
    var menu_tree = buildTree(menu_list, "id", "pid")
    console.log(menu_tree)
</script>

• 思路解析：
  1.函数假定条件：根节点id必须是0,也就是说一级节点的pid要==0
  2.先假设所有节点都是一级节点，设置临时对象进行存储，然后遍历临时对象中的key，将其挂载到对应的pid中
  3.遍历临时对象的节点，如果父节点是0，则添加到目标树形对象中，如果不是，则添加到对应的pid中（重要！！！，表面是给一级属性赋值，其实因为引用的关系，可能操作的是更深层次的节点）
  4.返回目标树形对象（没有找到pid的节点数据将被丢失）

• 总结：正常的思路，都是操作树形对象，给所有的节点找到对应的pid节点进行挂载，因为pid是多层次嵌套的，为了找到对应的pid，通常所需要递归遍历，但是这里非常聪明，利用对象是引用类型的机制，直接操作一级节点来代替多层次嵌套节点

3.数字转换为金额格式

• 使用toLocaleString()可将小数转成金额格式
• 注意，如果是整数，需要转换成小数才能调用toLocaleString()

var num = 123456789
//转换成小数
num = parseFloat(num)
//转换金额格式
num.toLocaleString() //'123,456,789'

• 封装一个方法：将数字的每个字符拆开遍历（从后往前）重新拼接，遇到第3*n个字符且不是最后一个字符，则额外多输出一个","

<script>
    function numForamt(nun){
        //转换成字符串，在转换成数组
        var arr = (nun + '').split('')
        //要输出的结果
        var result = ""
        //遍历数组元素，从后面开始，每3个元素就添加一个 ","
        for(var i = arr.length - 1;i>=0;i--){
            //当前下标(从前往后)
            var index = arr.length - 1 - i
            //是否是第3*n个字符，且不是最后一个字符,需要额外输出一个 ","
            if((index + 1)%3 == 0 && index !=  (arr.length - 1)){
                //拼接
                result = ("," + arr[i] + result)
            }else{
                //拼接
                result = (arr[i] + result)
            }
        }

        return result
    }
    console.log(numForamt(123456789)) //123,456,789
</script>