<轉>JavaScript代碼工程片段記錄

作者：Luka
鏈接：https://zhuanlan.zhihu.com/p/419215760
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。本文只做學習使用

01、獲取瀏覽器Cookie的值通過document.cookie 來查找cookie值
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"
02、顏色RGB轉十六進制
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255); 
// Result: #0033ff
03、復制到剪貼板借助navigator.clipboard.writeText可以很容易的講文本復制到剪貼板規范要求在寫入剪貼板之前使用 Permissions API 獲取“剪貼板寫入”權限。但是，不同瀏覽器的具體要求不同，因為這是一個新的API。有關詳細信息，請查看compatibility table and Clipboard availability in Clipboard。
const copyToClipboard = (text) => navigator.clipboard.writeText(text);  
copyToClipboard("Hello World");
04、檢查日期是否合法使用以下代碼段檢查給定日期是否有效。
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true
05、查找日期位于一年中的第幾天
const dayOfYear = (date) =>
      Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
    
dayOfYear(new Date());
// Result: 272
06、英文字符串首字母大寫JavaScript沒有內置的首字母大寫函數，因此我們可以使用以下代碼。
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more

07、計算2個日期之間相差多少天

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)   
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366
08、清除全部Cookie通過使用document.cookie訪問cookie并將其清除，可以輕松清除網頁中存儲的所有cookie
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
09、生成隨機十六進制顏色可以使用 Math.random 和 padEnd 屬性生成隨機的十六進制顏色。
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; 
 console.log(randomHex());
// Result: #92b008
10、數組去重可以使用 JavaScript 中的Set輕松刪除重復項
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]
11、從 URL 獲取查詢參數可以通過傳遞 window.location 或原始 URL goole.com?search=easy&page=3 輕松地從 url 檢索查詢參數
const getParameters = (URL) => {
  URL = jsON.parse(
    '{"' +
      decodeURI(URL.split("?")[1])
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  );
  return jsON.stringify(URL);
};

getParameters(window.location);
// Result: { search : "easy", page : 3 }
// 或者更為簡單的：
Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }
12、時間處理我們可以從給定日期以 hour::minutes::seconds 格式記錄時間。
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"
13、校驗數字是奇數還是偶數
const isEven = num => num % 2 === 0;   
console.log(isEven(2)); 
// Result: True
14、求數字的平均值使用reduce方法找到多個數字之間的平均值。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5
15、回到頂部可以使用 window.scrollTo(0, 0) 方法自動滾動到頂部。將 x 和 y 都設置為 0。
const goToTop = () => window.scrollTo(0, 0);
goToTop();
16、翻轉字符串可以使用 split、reverse 和 join 方法輕松反轉字符串。
const reverse = str => str.split('').reverse().join(''); 
reverse('hello world');     
// Result: 'dlrow olleh'
17、校驗數組是否為空一行代碼檢查數組是否為空,將返回true或false
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;    
isNotEmpty([1, 2, 3]);
// Result: true
18、獲取用戶選擇的文本使用內置的getSelection 屬性獲取用戶選擇的文本。
const getSelectedText = () => window.getSelection().toString();  
getSelectedText();
19、打亂數組可以使用sort 和 random 方法打亂數組
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]
20、檢查用戶的設備是否處于暗模式使用以下代碼檢查用戶的設備是否處于暗模式。
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    
console.log(isDarkMode) 
// Result: True or False

作者：_紅領巾
鏈接：https://juejin.cn/post/7000919400249294862
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

1. 下載一個excel文檔

同時適用于word,ppt等瀏覽器不會默認執行預覽的文檔,也可以用于下載后端接口返回的流數據，見3
//下載一個鏈接

function download(link, name) {
    if(!name){
            name=link.slice(link.lastIndexOf('/') + 1)
    }
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.style.display = 'none'
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}
//下載excel
download('http://111.229.14.189/file/1.xlsx')

復制代碼

2. 在瀏覽器中自定義下載一些內容

場景：我想下載一些DOM內容，我想下載一個JSON文件

/**
 * 瀏覽器下載靜態文件
 * @param {String} name 文件名
 * @param {String} content 文件內容
 */
function downloadFile(name, content) {
    if (typeof name == 'undefined') {
        throw new Error('The first parameter name is a must')
    }
    if (typeof content == 'undefined') {
        throw new Error('The second parameter content is a must')
    }
    if (!(content instanceof Blob)) {
        content = new Blob([content])
    }
    const link = URL.createObjectURL(content)
    download(link, name)
}
//下載一個鏈接
function download(link, name) {
    if (!name) {//如果沒有提供名字，從給的Link中截取最后一坨
        name =  link.slice(link.lastIndexOf('/') + 1)
    }
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.style.display = 'none'
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}
復制代碼
使用方式：
downloadFile('1.txt','lalalallalalla')
downloadFile('1.json',JSON.stringify({name:'hahahha'}))

復制代碼

3. 下載后端返回的流

數據是后端以接口的形式返回的,調用1中的download方法進行下載

 download('http://111.229.14.189/gk-api/util/download?file=1.jpg')
 download('http://111.229.14.189/gk-api/util/download?file=1.mp4')

復制代碼

4. 提供一個圖片鏈接，點擊下載

圖片、pdf等文件，瀏覽器會默認執行預覽，不能調用download方法進行下載，需要先把圖片、pdf等文件轉成blob，再調用download方法進行下載，轉換的方式是使用axios請求對應的鏈接

//可以用來下載瀏覽器會默認預覽的文件類型，例如mp4,jpg等
import axios from 'axios'
//提供一個link，完成文件下載，link可以是  http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
    axios.request({
        url: link,
        responseType: 'blob' //關鍵代碼，讓axios把響應改成blob
    }).then(res => {
    const link=URL.createObjectURL(res.data)
        download(link, fileName)
    })

}

復制代碼
注意：會有同源策略的限制，需要配置轉發

6 防抖

在一定時間間隔內，多次調用一個方法，只會執行一次.
這個方法的實現是從Lodash庫中copy的

/**
 *
 * @param {*} func 要進行debouce的函數
 * @param {*} wait 等待時間,默認500ms
 * @param {*} immediate 是否立即執行
 */
export function debounce(func, wait=500, immediate=false) {
    var timeout
    return function() {
        var context = this
        var args = arguments

        if (timeout) clearTimeout(timeout)
        if (immediate) {
            // 如果已經執行過，不再執行
            var callNow = !timeout
            timeout = setTimeout(function() {
                timeout = null
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timeout = setTimeout(function() {
                func.apply(context, args)
            }, wait)
        }
    }
}

使用方式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input id="input" />
        <script>
            function onInput() {
                console.log('1111')
            }
            const debounceOnInput = debounce(onInput)
            document
                .getElementById('input')
                .addEventListener('input', debounceOnInput) //在Input中輸入，多次調用只會在調用結束之后，等待500ms觸發一次   
        </script>
    </body>
</html>

如果第三個參數immediate傳true，則會立即執行一次調用，后續的調用不會在執行，可以自己在代碼中試一下

7 節流

多次調用方法，按照一定的時間間隔執行
這個方法的實現也是從Lodash庫中copy的

/**
 * 節流，多次觸發，間隔時間段執行
 * @param {Function} func
 * @param {Int} wait
 * @param {Object} options
 */
export function throttle(func, wait=500, options) {
    //container.onmousemove = throttle(getUserAction, 1000);
    var timeout, context, args
    var previous = 0
    if (!options) options = {leading:false,trailing:true}

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime()
        timeout = null
        func.apply(context, args)
        if (!timeout) context = args = null
    }

    var throttled = function() {
        var now = new Date().getTime()
        if (!previous && options.leading === false) previous = now
        var remaining = wait - (now - previous)
        context = this
        args = arguments
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout)
                timeout = null
            }
            previous = now
            func.apply(context, args)
            if (!timeout) context = args = null
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining)
        }
    }
    return throttled
}

第三個參數還有點復雜，options

leading，函數在每個等待時延的開始被調用，默認值為false
trailing，函數在每個等待時延的結束被調用，默認值是true

可以根據不同的值來設置不同的效果：

leading-false，trailing-true：默認情況，即在延時結束后才會調用函數
leading-true，trailing-true：在延時開始時就調用，延時結束后也會調用
leading-true, trailing-false：只在延時開始時調用

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input id="input" />
        <script>
            function onInput() {
                console.log('1111')
            }
            const throttleOnInput = throttle(onInput)
            document
                .getElementById('input')
                .addEventListener('input', throttleOnInput) //在Input中輸入，每隔500ms執行一次代碼
        </script> 
    </body>
</html>

復制代碼

8. cleanObject

去除對象中value為空(null,undefined,'')的屬性,舉個栗子：

let res=cleanObject({
    name:'',
    pageSize:10,
    page:1
})
console.log("res", res) //輸入{page:1,pageSize:10}   name為空字符串，屬性刪掉

復制代碼
使用場景是：后端列表查詢接口，某個字段前端不傳，后端就不根據那個字段篩選，例如name不傳的話，就只根據page和pageSize篩選，但是前端查詢參數的時候（vue或者react）中，往往會這樣定義

export default{
    data(){
        return {
            query:{
                name:'',
                pageSize:10,
                page:1
            }
        }
    }
}


const [query,setQuery]=useState({name:'',page:1,pageSize:10})

復制代碼
給后端發送數據的時候，要判斷某個屬性是不是空字符串，然后給后端拼參數，這塊邏輯抽離出來就是cleanObject，代碼實現如下

export const isFalsy = (value) => (value === 0 ? false : !value);

export const isVoid = (value) =>
  value === undefined || value === null || value === "";

export const cleanObject = (object) => {
  // Object.assign({}, object)
  if (!object) {
    return {};
  }
  const result = { ...object };
  Object.keys(result).forEach((key) => {
    const value = result[key];
    if (isVoid(value)) {
      delete result[key];
    }
  });
  return result;
};
let res=cleanObject({
    name:'',
    pageSize:10,
    page:1
})
console.log("res", res) //輸入{page:1,pageSize:10}
獲取文件后綴名
/**
 * 獲取文件后綴名
 * @param {String} filename
 */
export function getExt(filename) {
    if (typeof filename == 'string') {
        // 如果文件沒有后綴名，返回null
        if(!filename.includes('.')){return null}
        return filename
            .split('.')
            .pop()
            .toLowerCase()
    } else {
        throw new Error('filename must be a string type')
    }
}
//使用方式
getExt("1.mp4") //->mp4
休眠多少毫秒
/**
 * 休眠xxxms
 * @param {Number} milliseconds
 */
export function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

//使用方式
const fetchData=async()=>{
    await sleep(1000)
}
生成隨機id
/**
 * 生成隨機id
 * @param {*} length
 * @param {*} chars
 */
export function uuid(length=8, chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
    let result = ''
    for (let i = length; i > 0; --i)
        result += chars[Math.floor(Math.random() * chars.length)]
    return result
}
//第一個參數指定位數，第二個字符串指定字符，都是可選參數，如果都不傳，默認生成8位
uuid()

對象轉化為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
}
保留小數點以后幾位，默認2位
// 保留小數點以后幾位，默認2位
export function cutNumber(number, no = 2) {
    if (typeof number != 'number') {
        number = Number(number)
    }
    return Number(number.toFixed(no))
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容