1. Get the file extensionUsage scenario: Upload files to determine the suffix /** * Get the file extension * @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') } } How to use getExt("1.mp4") //->mp4 2. Copy content to clipboardexport 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 } Directions: // Return true if the copy was successful copyToBoard('lalallala') principle:
3. How many milliseconds to sleep/** * Sleep for xxxms * @param {Number} milliseconds */ export function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)) } //Usage const fetchData=async()=>{ await sleep(1000) } 4. Generate a random string/** * Generate a random 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 } Directions: //The first parameter specifies the number of digits, and the second string specifies the characters. Both are optional parameters. If neither is passed, an 8-bit uuid is generated by default.() Usage scenario: used to generate random IDs on the front end. After all, both Vue and React now need to bind keys. 5. Simple deep copy/** *deep copy* @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)) } Disadvantage: Only copies objects, arrays, and arrays of objects, which is sufficient for most scenarios const person={name:'xiaoming',child:{name:'Jack'}} deepCopy(person) //new person 6. Array deduplication/** * Array deduplication* @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)] } The principle is to use the property that no duplicate elements can appear in uniqueArray([1,1,1,1,1]) // [1] 7. Object converted to FormData object/** * Object converted to 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 } Usage scenario: When uploading a file, we need to create a new Directions: let req={ file:xxx, userId:1, phone:'15198763636', //... } fetch(getFormData(req)) 8. Keep to n decimal places// How many decimal places to keep, the default is 2 export function cutNumber(number, no = 2) { if (typeof number != 'number') { number = Number(number) } return Number(number.toFixed(no)) } Usage scenario: Conclusion: This is the end of this article about essential You may also be interested in:
|
<<: Ubuntu starts the SSH service remote login operation
>>: MySQL 8.0.21 installation tutorial with pictures and text
This article introduces a detailed explanation of...
This article example shares the specific code of ...
The following command is often used: chmod 777 文件...
1. Going around in circles After going around in ...
To connect Node-red to the database (mysql), you ...
It's embarrassing to say that I had to search ...
Table of contents Preface How does antd encapsula...
Nginx global variables There are many global vari...
This article uses examples to illustrate the func...
MySQL official website zip file download link htt...
1. display:box; Setting this property on an eleme...
Good HTML code is the foundation of a beautiful w...
HTML-centric front-end development is almost what ...
This article shares the specific code for JavaScr...
1. Introduction to Distributed Storage System Wit...