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

逃离我推掉我的手 2022-09-09 11:57 110阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

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

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！