32個有用的JavaScript片段，讓你像專業人士一樣編寫JavaScript代碼

英文 | https://javascript.plainenglish.io/32-useful-snippets-to-code-like-a-pro-in-javascript-c8b5be11752f

翻譯 | 楊小二

JavaScript 無疑是 Web 開發中最流行的程式設計語言之一。無論你選擇使用 Angular、jQuery、Vue.js 還是 React，JavaScript 在所有這些中都扮演着重要的角色。

由于 JavaScript 的龐大社群，它們擁有大量的内置庫來解決你的日常問題。

在本文中，我們将研究 32 個片段，這些技巧可以讓你更像 JavaScript 專家一樣進行程式設計。我們将看到一些有趣的代碼片段，它們将幫助你解決程式設計中的日常問題，并且你将學習如何進行通用程式設計。

其中一些你可能已經知道，但其中大部分都是新的并且很有趣，你可以學習。

1、位元組大小

此代碼段将顯示你的字元串或整數的位元組大小。簡單來說，它會顯示字元串或整數的長度。

const byteSize1 = str => new Blob([str]).size; 
const byteSize2 = int => new Blob([int]).size;
byteSize1("JavaScript") // 10 
byteSize2(101) // 3      

2、轉換為數組

這個簡單的代碼片段方法會将你的非數組值或資料轉換為數組形式。

const convertToArray = val => (Array.isArray(val) ? val : [val]);
convertToArray("Pro") // [Pro] 
convertToArray(101) // [101]      

3、大寫

此代碼段方法将以大寫形式轉換字元串中字元的每個第一個字母。檢查下面的代碼以了解它是如何工作的。

const capitalize = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalize('code'); //Code
capitalize('javascript programming'); //Javascript Programming      

4、 擷取目前網址

此代碼段将有助于擷取運作 javascript 的目前 URL。這在前端調試中派上用場。

const currentURL = () => window.location.href;
currentURL() // https://medium.com/@codedev101      

5、數字化

這個是很棒的片段，它會将你的數字轉換為數字數組。檢視下面的代碼示例。

const digitize = n => [...`${n}`].map(i => parseInt(i));
digitize(345) // [3,4,5] 
digitize(123) // [1,2,3] 
digitize(6) // [6]      

6、計數出現次數

此片段代碼将計算數組中某個值的出現次數。當你想知道一個值在大尺寸數組中出現多少次時，這會派上用場。

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([2,4,6,2,5,2], 2) // 3 
countOccurrences([1,4,6,2,5,6], 6) // 2      

7、字謎

此片段代碼用于檢查特定字元串是否為字謎。字謎是可以改寫成另一個詞的詞。

const Anagram = (string1, string2) => {
  const normalize = str =>str 
  .toLowerCase() 
  .replace(/[^a-z0-9]/gi, '')
  .split('')
  .sort()
  .join('');
  return normalize(string1) === normalize(string2);
};
Anagram("race", "care") // true
Anagram("part", "trap") // true      

8、檢查浏覽器标簽焦點

此片段代碼将告訴你目前運作 javaScript 的浏覽器頁籤是否處于焦點狀态。

const Browser_Tab_Focused = () => !document.hidden;
Browser_Tab_Focused(); // true      

9、檢查浏覽器

這段代碼會告訴你運作 JavaScript 的環境是浏覽器還是非浏覽器。衆所周知，我們可以在浏覽器中運作 JavaScript，node js如果我們可以檢查我們在哪個環境中工作，那就太好了。

const isBrowser = () => ![typeof window, typeof document].includes('undefined');
isBrowser() // true   if on isBrowser
isBrowser() // false  if we are on node js or any other environment      

10、檢查空

這段代碼将檢查變量或值是否為空。

const checkNull = val => val === undefined || val === null;
checkNull() // true
checkNull(234) // false      

11、 isNumber

這個簡單的片段代碼将檢查值的變量是否為數字。

function isNumeric(num) { 
  return !isNaN(parseFloat(num)) && isFinite(num); 
}
isNumeric(324) //true 
isNumeric("Code") // false      

12、 isString

此片段代碼将檢查變量或值是否為字元串。

const isString = val => typeof val === 'string';
isString('hello world'); // true
isString('1234'); // true
isString(345); // false      

13、最大數字

此代碼段方法将傳回清單中的最大數字。這是從清單中找到最大數字的最快方法。

const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
maxN([3,8,7]) // 8 
maxN([1,5,6,23]) // 23      

14、反轉

此片段代碼隻是反轉字元串。這在你需要反轉字元串或檢查回文的簡短任務中派上用場。

const reverseStr = str => [...str].reverse().join('');
console.log(reverseStr("JavaScript")) // tpircSavaJ 
console.log(reverseStr("123")) // 321      

15、從清單中随機

此片段代碼用于從清單中選擇随機數。

const random = arr => arr[Math.floor(Math.random() * arr.length)];
console.log(random([1,4,5,6])) // 6 
console.log(random([1,4,0,6])) // 1      

16、重定向到網址

這個片段是我最喜歡的片段，它會将你重定向到 URL。當你重定向到網站時，這在 Web 開發中會派上用場。當使用者執行任何操作時。

const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://medium.com/')
redirect('https://codedev101.medium.com/')      

17、清單的頭部元素

這段代碼将展示如何快速擷取任何清單的第一個元素。

const head = arr => arr[0];
head([1,2,3]) // 1 
head(["JavaScript", "Python", "C++"]) // JavaScript      

18、List的尾部元素

這段代碼将展示如何以簡單快捷的方式擷取任何清單的尾部元素。

const tail = arr => arr[arr.length - 1];
console.log(tail([1,2,3])); // 1 
console.log(tail(["JavaScript", "Python", "C++"])); // JavaScript      

19、最小數量

這段代碼将快速傳回清單中最小的數字。

const minimum = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
console.log(minimum([2,4,6,1]))   // 1
console.log(minimum([22, 55, 66, 77, 11, 19]))  // 11      

20、 isUpper Case

當你想檢查 String 是否為大寫時，此片段代碼将很有用。

const isUpperCase = str => str === str.toUpperCase();
isUpperCase("Code") //false 
isUpperCase("PROGRAMMING") //true 
isUpperCase("aB") //false      

21、 isLower Case

我們看到的這個大寫片段代碼将檢查字元串是否為小寫。

const isLowerCase = str => str === str.toLowerCase();
isLowerCase("code") //true 
isLowerCase("PROGRAMMING") //false      

22、範圍生成器中的整數數組

這段代碼将向你展示如何生成一個帶有n數字且在一個範圍内的随機整數數組。檢查下面的代碼以了解它是如何工作的。

const randomIntArrayInRange = (min, max, n = 1) => 
  Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min);
console.log(randomIntArrayInRange(10, 15, 5)); // [ 14, 11, 15, 10, 13 ]      

23、 範圍生成器中的随機整數

此片段代碼用于生成給定範圍内的随機整數。

const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
console.log(randomInteger(1,10)) // 6 
console.log(randomInteger(1,20)) // 8      

24、 擷取類型

此片段代碼可用于檢查 JavaScript 中任何變量或值的類型。

const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
getType([3,4,5]) //array
getType("JavaScript")  //string
getType(true)  //boolean      

25、 從數組中删除重複項

這段代碼是從數組中删除重複項的一種快速簡便的方法。

const filterNonUnique = arr => [...new Set(arr)];
console.log(filterNonUnique([2,2,5,5,7,7,8])) // [ 
2,5,7,8 ] console.log(filterNonUnique([1,2,3,2,3] ,6])) // [1,2,3,6]      

26、半徑的度數

此片段代碼将向你展示如何以快速簡便的方式将度數轉換為半徑。

const degreeToRad = deg => (deg * Math.PI) / 180.0;
degreeToRad(80.0) // 1.3962634015954636 
degreeToRad(360.0) // 6.283185307179586      

27、 一年中的一天

此代碼段将傳回一年中的哪一天。

const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()) // 140      

28、從清單中删除 False 元素

此代碼段方法将從清單中删除 false 元素，如 null、false、0 或空元素。

const compactJs = arr => arr.filter(Boolean);
compactJs([2,4,false,NaN,5,"",0]) //[2,4,5]      

29、 檢查所有相等

此代碼段将檢查數組的所有元素是否相等。

const AllEqual = arr => arr.every(val => val === arr[0]);
AllEqual([1, 2, 3]); // false
AllEqual([1, 2, 2]); // false
AllEqual([2, 2, 2]); // true      

30、删除元素

這段代碼是從左側的清單中删除元素。

const drop = (arr, n = 1) => arr.slice(n);
console.log(drop([2, 4, 6])) // [4, 6] 
console.log(drop([2, 4, 6], 2)) //[6]      

31、争取時間

此片段代碼将以字元串格式從資料對象傳回目前時間。

const getTime = date => date.toTimeString().slice(0, 8);
getTime(new Date()) // "10:45:12"      

32、 讀取檔案行

此片段代碼将讀取檔案并将其行以數組格式存儲。

const fs = require('fs');
const readFileLines = filename =>fs
  .readFileSync(filename)
  .toString('UTF8')
  .split('\n');
let arr = readFileLines('test.txt');
console.log(arr); // ['line 1', 'line 2', 'line 3' ,'line 4]      

最後的想法

我希望你覺得這篇文章有趣和有幫助。這些片段代碼将有助于初學者和目前的 JavaScript 開發人員提高他們的JavaScript程式設計技能。

如果我錯過了任何有用的片段，請在留言區告訴。

感謝你的閱讀，祝 JavaScript 程式設計愉快！

​