JavaScript 一些常用小技巧

Reflect

分组

        const object = {};
        for (let i = 0; i < this.length; i++) {
            let key = callback(this[i], i, this);
            if (object[key]) {
                object[key].push(this[i])
            } else {
                object[key] = [this[i]]
            }
        }
        return object;
    }
    Array.prototype.Group = function (arr = [], key) {
        return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
    }
    let sum2 = [{
        name: '里',
        age: 15
    }, {
        name: '外',
        age: 15
    }, {
        name: '里',
        age: 16
    }]
    console.log(sum2.reduce((t, v) => (!t[v['name']] && (t[v['name']] = []), t[v['name']].push(v), t), {}))

反转字符串

   String.prototype.reverse = function () {
        return [...this].reverse ().join("")
    }
    let str = "reduce最牛逼";
    console.log(str.reverse())
    let iii = [...str].reverse().join("")
    console.log(iii)
    let adddf = ""
    for (let index = 0; index < str.length; index++) {
        adddf += str[str.length - index - 1]
    }
    console.log(adddf)
    console.log([...str].reduce((v, i) => i + v))

序列化

let url = { user: '1', password: '123', name: '张三' }
    const resturl = ((url) => {
        let str = '?'
        for (const key in url) {
            if (url.hasOwnProperty(key)) {
                const element = url[key];
                str += `${key}=${element}&`
            }
        }
        return str.slice(0, -1)
    })

    let resturl2 = resturl(url)
    console.log(resturl2)

反序列化

 let urltw1 = "?user=1&password=123&name=张三"
    const resturl3 = ((url) => {
        let str = url.slice(1)
        let arr = str.split('&')
        let obj = {}
        arr.forEach(v => {
            let arr2 = v.split('=')
            obj[arr2[0]] = arr2[1]
        })
        return obj
    })
    console.log(resturl3(urltw1))

深拷贝

  /**
* 深拷贝
* @param {Object|Array} target  拷贝对象
* @returns {Object|Array} result 拷贝结果
*/
    function deepCopy(target) {
        if (Array.isArray(target)) { // 处理数组
            return target.map(item => deepCopy(item));
        }

        if (Object.prototype.toString.call(target) === '[object Object]') { // 处理对象
            // 先将对象转为二维数组，再将二维数组转回对象（这个过程还是浅拷贝）
            // 所以使用map方法将二维数组里的元素进行深拷贝完了再转回对象
            return Object.fromEntries(Object.entries(target).map(([k, v]) => [k, deepCopy(v)]));
        }
        return target; // 深拷贝要处理的就是引用类型内部属性会变化的情况，像正则、Error、函数、Date这种一般不会发生变化的直接返回原数据就可以
    }
    const Objlist = {
        name: '张三',
        age: 18,
    }
    console.log(deepCopy(Objlist))

JS 导出pdf 不截断 需要用到 JSpdf Htmlcanvas

function download(content, pdfName) {
    html2canvas(content, {
        allowTaint: true,
        scale: 2 // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
        let ctx = canvas.getContext('2d');
        let img = new Image();

        /**jspdf将html转为pdf一页显示不截断，整体思路：
         * 1. 获取DOM 
         * 2. 将DOM转换为canvas
         * 3. 获取canvas的宽度、高度（稍微大一点）
         * 4. 将pdf的宽高设置为canvas的宽高
         * 5. 将canvas转为图片
         * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
         */

        // 得到canvas画布的单位是px 像素单位
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        console.log('contentWidth', contentWidth)
        console.log('contentHeight', contentHeight)

        // 将canvas转为base64图片
        var base64 = ""
        img.setAttribute('crossOrigin', 'Anonymous');
        img.onload = function () {
            console.log('a')
            ctx.drawImage(img, 0, 0);
            base64 = canvas.toDataURL('image/jpeg', 1.0);
            console.log('base64', base64)
            var pageData = base64

            // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
            // 2为上面的scale 缩放了2倍
            var pdfX = (contentWidth + 10) / 2 * 0.75
            var pdfY = (contentHeight + 500) / 2 * 0.75 // 500为底部留白

            // 设置内容图片的尺寸，img是pt单位 
            var imgX = pdfX;
            var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

            // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
            var PDF = new JsPDF('', 'pt', [pdfX, pdfY])

            // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
            PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
            PDF.save(pdfName + '.pdf')
        }
        img.src = ''
        //这里需要添加一个在线的图片地址 最好是全透明的
    })
}