【JS】1070- 8个工程必备的JavaScript代码片段（建议添加到项目中）

桃扇骨 2022-09-10 05:07 116阅读 0赞

![cdbeae94e08c2db5420a45874a8ed719.png][]

8个工程必备的JavaScript代码片段，听过这样起博客标题可以提高阅读量。????

最近写博客好累，让8月征文活动搞的，今天水一篇好了，麻烦不要给我点赞，不想看到消息通知的小红点。

## 1. 获取文件后缀名 ##

使用场景：上传文件判断后缀名

/**
     * 获取文件后缀名
     * @param {String} filename
     */
     export function getExt(filename) {
        if (typeof filename == 'string') {
            return filename
                .split('.')
                .pop()
                .toLowerCase()
        } else {
            throw new Error('filename must be a string type')
        }
    }
    复制代码

使用方式

getExt("1.mp4") //->mp4
    复制代码

## 2. 复制内容到剪贴板 ##

export function copyToBoard(value) {
        const element = document.createElement('textarea')
        document.body.appendChild(element)
        element.value = value
        element.select()
        if (document.execCommand('copy')) {
            document.execCommand('copy')
            document.body.removeChild(element)
            return true
        }
        document.body.removeChild(element)
        return false
    }
    
    复制代码

使用方式:

//如果复制成功返回true
    copyToBoard('lalallala')
    复制代码

原理：

1.  创建一个textare元素并调用select()方法选中
2.  document.execCommand('copy')方法，拷贝当前选中内容到剪贴板。

## 3. 休眠多少毫秒 ##

/**
     * 休眠xxxms
     * @param {Number} milliseconds
     */
    export function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms))
    }
    
    //使用方式
    const fetchData=async()=>{
     await sleep(1000)
    }
    复制代码

## 4. 生成随机字符串 ##

/**
     * 生成随机id
     * @param {*} length
     * @param {*} chars
     */
    export function uuid(length, chars) {
        chars =
            chars ||
            '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
        length = length || 8
        var result = ''
        for (var i = length; i > 0; --i)
            result += chars[Math.floor(Math.random() * chars.length)]
        return result
    }
    复制代码

使用方式

//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位
    uuid()  
    复制代码

使用场景：用于前端生成随机的ID,毕竟现在的Vue和React都需要绑定key

## 5. 简单的深拷贝 ##

/**
     *深拷贝
     * @export
     * @param {*} obj
     * @returns
     */
    export function deepCopy(obj) {
        if (typeof obj != 'object') {
            return obj
        }
        if (obj == null) {
            return obj
        }
        return JSON.parse(JSON.stringify(obj))
    }
    复制代码

缺陷：只拷贝对象、数组以及对象数组，对于大部分场景已经足够

const person={name:'xiaoming',child:{name:'Jack'}}
    deepCopy(person) //new person
    复制代码

## 6. 数组去重 ##

/**
     * 数组去重
     * @param {*} arr
     */
    export function uniqueArray(arr) {
        if (!Array.isArray(arr)) {
            throw new Error('The first parameter must be an array')
        }
        if (arr.length == 1) {
            return arr
        }
        return [...new Set(arr)]
    }
    复制代码

原理是利用Set中不能出现重复元素的特性

uniqueArray([1,1,1,1,1])//[1]
    复制代码

## 7. 对象转化为FormData对象 ##

/**
     * 对象转化为formdata
     * @param {Object} object
     */
    
     export function getFormData(object) {
        const formData = new FormData()
        Object.keys(object).forEach(key => {
            const value = object[key]
            if (Array.isArray(value)) {
                value.forEach((subValue, i) =>
                    formData.append(key + `[${i}]`, subValue)
                )
            } else {
                formData.append(key, object[key])
            }
        })
        return formData
    }
    复制代码

使用场景：上传文件时我们要新建一个FormData对象，然后有多少个参数就append多少次，使用该函数可以简化逻辑

使用方式：

let req={
        file:xxx,
        userId:1,
        phone:'15198763636',
        //...
    }
    fetch(getFormData(req))
    复制代码

## 8.保留到小数点以后n位 ##

// 保留小数点以后几位，默认2位
    export function cutNumber(number, no = 2) {
        if (typeof number != 'number') {
            number = Number(number)
        }
        return Number(number.toFixed(no))
    }
    复制代码

使用场景：JS的浮点数超长，有时候页面显示时需要保留2位小数

关于本文

# 来源：\_红领巾 #

https://juejin.cn/post/6999391770672889893

![6cc9345294c21e4233019bd2d7dea8a6.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![352fbe764a64e0802d9fc62e792828bc.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[cdbeae94e08c2db5420a45874a8ed719.png]: /images/20220829/4eeeca1057974aa6a8ac031aa782058f.png
[6cc9345294c21e4233019bd2d7dea8a6.gif]: /images/20220829/b9d78ddfd4ce4376b75a62b9130e959d.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[352fbe764a64e0802d9fc62e792828bc.gif]: /images/20220829/f045b081df884b7e88163224f679d93a.png