15 個有用的 JavaScript 代碼段

英文 | https://levelup.gitconnected.com/15-useful-javascript-snippets-you-can-understand-in-15-seconds-3aa244d9c326

翻譯 | 楊小二

JavaScript 是你學習程式設計，可以選擇學習的最流行的語言之一。當我開始學習 JavaScript 時，我總是在 StackOverflow、Medium 和其他部落格上尋找優秀解決方案來處理實際開發中遇到的問題。在本文中，我将分享我發現的15個有用的JavaScript 代碼段。

1、不循環地重複一個字元串

此 JavaScript 代碼段将展示如何在不使用任何循環的情況下重複字元串。我們将通過JavaScript 中的repeat()方法來建構一個數字，該數字将作為你需要的數字副本。

//Old Method
for(var i = 0; i<5; i++)
{
  console.log("😃") // 😃😃😃😃😃
}
// Best Method
console.log("😃".repeat(5)) //😃😃😃😃😃      

2、 數組的差異

這一個很棒的代碼片段，可以幫助你區分數組。當你處理一個長數組并想知道該數組的相似之處或不同之處時，這個會派上用場。

下面的示例代碼将幫助你更加清晰了解，你可以在你的JavaScript 項目中自由使用這些代碼。

//Code Example
function 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

當你需要檢查資料是字元串，還是 JSON 時，此代碼段将派上用場。假設你從伺服器端獲得響應并解析該資料，你需要檢查它是 JSON 還是字元串。下面的代碼片段。

//Code Example
function isJSON(str)
{
  try
  {
      JSON.parse(str)
  }
  catch
  {
      return false
  }
return true
}
var str = "JavaScript"
console.log(isJSON(str)) //false      

4、簡短的 Console.log

厭倦了一遍又一遍地編寫 console.log() 嗎？不用擔心，這個片段會為你節省大量時間來編寫長長的 console.log()。

var cl = console.log.bind(document)
cl(345) 
cl("JAVASCRIPT")
cl("PROGRAMMING") 
<--Give it a try!-->      

5、全部替換

此代碼段将向你展示如何替換字元串中的單詞，而無需疊代每個單詞、比對它并放置新單詞。下面的代碼片段使用了 replaceAll( Target Word, New Word ) 方法。

//Code Example
var 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、将數字轉換數字數組

此代碼段可用于将數字轉換為數字數組。使用帶有 map 的擴充運算符，我們可以在一秒鐘内完成此操作。試一試：

//example code
const 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、檢查數字是否為 2 的幂

現在，此代碼段将幫助你檢查是否為 2 的幂。嘗試從下面的示例代碼中了解它。

//example code
const isPowerTwo = n => !!n &&( n & (n - 1) ) == 0;
console.log(isPowerTwo(3)) //true
console.log(isPowerTwo(8)) //true
console.log(isPowerTwo(4)) //true      

8、數字轉換為二進制

此代碼段将使用 toString() 方法簡單地将數字轉換為二進制。看看下面的代碼示例。

var n1 = 500
console.log(n1.toString(2)) // 111110100
var n2 = 4
console.log(n2.toString(2)) // 100
var n3 = 5004
console.log(n3.toString(2)) // 1001110001100      

9、傳回數組的幂集

此代碼段将傳回你的任何數字數組的 Powerset。檢查下面的代碼片段以獲得更好的了解。

//example code
const PowerSet = array => array.reduce((accumalator, current) => accumalator.concat(accumalator.map(n => [current].concat(n))), [[]]);
console.log(PowerSet([1,2]))      

10、從數組中删除元素

當你需要從數組中删除元素時，此代碼段将派上用場。在下面的代碼片段示例中，我們使用了 array.slice() 内置方法。

//example code
const 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、反轉字元串

現在你不需要循環周遊字元串來反轉它。此代碼段将展示如何使用擴充運算符 (...) 和 reverse() 函數來反轉字元串。

這在反轉大字元串時會派上用場，你需要為此提供快速片段代碼。檢查下面的代碼示例。

//example code
function Reverse(str){
return [...str].reverse().join('');
}
console.log(Reverse("data")) //atad
console.log(Reverse("Code")) //edoC      

12、深度扁平化陣列

展平數組是将任何有序數組和二維數組轉換為一維數組的過程。簡而言之，你可以降低數組的維數。你已經看過 Flatten Array 片段代碼，但是深展平數組呢。

當你有一個大的有序數組并且正常的展平對它不起作用時，此代碼段非常有用。為此，你将需要一個深展平。

//example code
function 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、計算位元組大小

每個程式員的目标都是讓他們的 JavaScript 程式高效并具有良好的性能。為此，我們需要確定我們有一些不會讓我們的記憶體過載的資料大小。檢視下面的代碼片段以了解如何檢查任何資料的位元組。

// byte size calculation
const ByteSize = string => new Blob([string]).size;
console.log(ByteSize("Codding")) // 7 
console.log(ByteSize(true)) // 4
console.log(ByteSize("😄")) // 4      

14、數組轉為CSV

CSV 是當今廣泛使用的電子表格，你可以使用如下所示的簡單代碼段将數組轉換為 CSV檔案。

// Code Example
const 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、數組的最後一個元素

現在，你不再需要周遊或循環整個數組并提取最後一個元素。你可以使用以下簡單的代碼片段執行相同的操作。

//code example
const LastElement = array => array[array.length - 1];
console.log(LastElement([2,3,4])) // 4
console.log(LastElement([2,3,4,5])) // 5
console.log(LastElement([2,3])) // 3      

最後的想法

以上就是我今天與你分享的15個JavaScript代碼片段，我希望你喜歡這篇文章，并從這篇文章中學到一些新東西。

最後，如果你覺得今天内容對你有幫助，請與你的 JavaScript 開發人員朋友分享 它。

感謝你的閱讀。

學習更多技能

請點選下方公衆号

​