15 個(gè)有用的 JavaScript 代碼段
//Old Methodfor(var i = 0; i<5; i++){console.log("??") // ??????????}// Best Methodconsole.log("??".repeat(5)) //??????????
2、 數(shù)組的差異
這一個(gè)很棒的代碼片段，可以幫助你區(qū)分?jǐn)?shù)組。當(dāng)你處理一個(gè)長數(shù)組并想知道該數(shù)組的相似之處或不同之處時(shí)，這個(gè)會(huì)派上用場(chǎng)。
下面的示例代碼將幫助你更加清晰理解，你可以在你的JavaScript 項(xiàng)目中自由使用這些代碼。
//Code Examplefunction ArrayDiff(a, b){const setX = new Set(a)const setY = new Set(b)return [...a.filter(x=>!setY.has(x)),...b.filter(x=>!setX.has(x))]}const Array1 = [1, 2, 3];const Array2 = [1, 2, 3, 4, 5];console.log(ArrayDiff(Array1, Array2)) // [4, 5]
3、 String 是否為 Json
當(dāng)你需要檢查數(shù)據(jù)是字符串，還是 JSON 時(shí)，此代碼段將派上用場(chǎng)。假設(shè)你從服務(wù)器端獲得響應(yīng)并解析該數(shù)據(jù)，你需要檢查它是 JSON 還是字符串。下面的代碼片段。
//Code Examplefunction isJSON(str){try{JSON.parse(str)}catch{return false}return true}var str = "JavaScript"console.log(isJSON(str)) //false
4、簡(jiǎn)短的 Console.log
厭倦了一遍又一遍地編寫 console.log() 嗎？不用擔(dān)心，這個(gè)片段會(huì)為你節(jié)省大量時(shí)間來編寫長長的 console.log()。
var cl = console.log.bind(document)cl(345)cl("JAVASCRIPT")cl("PROGRAMMING")<--Give it a try!-->
5、全部替換
此代碼段將向你展示如何替換字符串中的單詞，而無需迭代每個(gè)單詞、匹配它并放置新單詞。下面的代碼片段使用了 replaceAll( Target Word, New Word ) 方法。
//Code Examplevar str = "Python is a Programming Language, Python is a top programming language and favourite of every developer"str = str.replaceAll("Python", "JavaScript")console.log(str) // JavaScript is a Programming Language, JavaScript 5is a top programming language and favourite of every developer
6、將數(shù)字轉(zhuǎn)換數(shù)字?jǐn)?shù)組
此代碼段可用于將數(shù)字轉(zhuǎn)換為數(shù)字?jǐn)?shù)組。使用帶有 map 的擴(kuò)展運(yùn)算符，我們可以在一秒鐘內(nèi)完成此操作。試一試：
//example codeconst NumberToArray = number => [...`${number}`].map(i => parseInt(i));console.log(NumberToArray(86734)) //[8,6,7,3,4]console.log(NumberToArray(1234)) //[1,2,3,4]console.log(NumberToArray(9000)) //[9,0,0,0]
7、檢查數(shù)字是否為 2 的冪
現(xiàn)在，此代碼段將幫助你檢查是否為 2 的冪。嘗試從下面的示例代碼中理解它。
//example codeconst isPowerTwo = n => !!n &&( n & (n - 1) ) == 0;console.log(isPowerTwo(3)) //trueconsole.log(isPowerTwo(8)) //trueconsole.log(isPowerTwo(4)) //true
8、數(shù)字轉(zhuǎn)換為二進(jìn)制
此代碼段將使用 toString() 方法簡(jiǎn)單地將數(shù)字轉(zhuǎn)換為二進(jìn)制?？纯聪旅娴拇a示例。
var n1 = 500console.log(n1.toString(2)) // 111110100var n2 = 4console.log(n2.toString(2)) // 100var n3 = 5004console.log(n3.toString(2)) // 1001110001100
9、返回?cái)?shù)組的冪集
此代碼段將返回你的任何數(shù)字?jǐn)?shù)組的 Powerset。檢查下面的代碼片段以獲得更好的理解。
//example codeconst PowerSet = array => array.reduce((accumalator, current) => accumalator.concat(accumalator.map(n => [current].concat(n))), [[]]);console.log(PowerSet([1,2]))
10、從數(shù)組中刪除元素
當(dāng)你需要從數(shù)組中刪除元素時(shí)，此代碼段將派上用場(chǎng)。在下面的代碼片段示例中，我們使用了 array.slice() 內(nèi)置方法。
//example codeconst DropElement = (array, num = 1) => array.slice(num);console.log(DropElement([2,45,6,7],2)) //[6, 7]console.log(DropElement([2,45,6,7],1)) //[45, 6, 7]
11、反轉(zhuǎn)字符串
現(xiàn)在你不需要循環(huán)遍歷字符串來反轉(zhuǎn)它。此代碼段將展示如何使用擴(kuò)展運(yùn)算符 (...) 和 reverse() 函數(shù)來反轉(zhuǎn)字符串。
這在反轉(zhuǎn)大字符串時(shí)會(huì)派上用場(chǎng)，你需要為此提供快速片段代碼。檢查下面的代碼示例。
//example codefunction Reverse(str){return [...str].reverse().join('');}console.log(Reverse("data")) //atadconsole.log(Reverse("Code")) //edoC
12、深度扁平化陣列
展平數(shù)組是將任何有序數(shù)組和二維數(shù)組轉(zhuǎn)換為一維數(shù)組的過程。簡(jiǎn)而言之，你可以降低數(shù)組的維數(shù)。你已經(jīng)看過 Flatten Array 片段代碼，但是深展平數(shù)組呢。
當(dāng)你有一個(gè)大的有序數(shù)組并且正常的展平對(duì)它不起作用時(shí)，此代碼段非常有用。為此，你將需要一個(gè)深展平。
//example codefunction DeepFlat(array){return [].concat(...array.map(value=> (Array.isArray(value) ? DeepFlat(value) : value)));}console.log(DeepFlat([1,[2,[4,6,6,[9]],0,],1])) // [1, 2, 4, 6, 6, 9, 0, 1]
13、計(jì)算字節(jié)大小
每個(gè)程序員的目標(biāo)都是讓他們的 JavaScript 程序高效并具有良好的性能。為此，我們需要確保我們有一些不會(huì)讓我們的內(nèi)存過載的數(shù)據(jù)大小。查看下面的代碼片段以了解如何檢查任何數(shù)據(jù)的字節(jié)。
// byte size calculationconst ByteSize = string => new Blob([string]).size;console.log(ByteSize("Codding")) // 7console.log(ByteSize(true)) // 4console.log(ByteSize("??")) // 4
14、數(shù)組轉(zhuǎn)為CSV
CSV 是當(dāng)今廣泛使用的電子表格，你可以使用如下所示的簡(jiǎn)單代碼段將數(shù)組轉(zhuǎn)換為 CSV文件。
// Code Exampleconst ArrayToCsv= (array, delimiter =',')=> array.map(value => value.map(num => `"${num}"`).join(delimiter)).join('\n');console.log(ArrayToCsv([['name', 'age'], ['haider', '22'], ['Peter', '23']]))// Output// "name","age"// "haider","22"// "Peter","23"
15、數(shù)組的最后一個(gè)元素
現(xiàn)在，你不再需要遍歷或循環(huán)整個(gè)數(shù)組并提取最后一個(gè)元素。你可以使用以下簡(jiǎn)單的代碼片段執(zhí)行相同的操作。
//code exampleconst LastElement = array => array[array.length - 1];console.log(LastElement([2,3,4])) // 4console.log(LastElement([2,3,4,5])) // 5console.log(LastElement([2,3])) // 3
最后的想法
以上就是我今天與你分享的15個(gè)JavaScript代碼片段，我希望你喜歡這篇文章，并從這篇文章中學(xué)到一些新東西。
最后，如果你覺得今天內(nèi)容對(duì)你有幫助，請(qǐng)與你的 JavaScript 開發(fā)人員朋友分享 它。
感謝你的閱讀。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
