22個有用的JavaScript單行程序

全世界有超過1000萬的Javascript開發人員，並且這個數字天天都在增長。儘管JavaScript更出名的是它的動態特性，但它也有許多其餘很棒的特性。在這篇博客中，咱們將看到20個你應該知道的JavaScript單行程序。

1.隨機ID生成

當你在進行原型設計並須要惟一的id時，這能夠成爲你的首選功能。

const a = Math.random().toString(36).substring(2);
console.log(a)
----------------------------
72pklaoe38u

2.生成範圍內的隨機數

在不少狀況下，咱們須要在一個範圍內生成一個隨機數。Math.random函數能夠幫助咱們生成隨機數，而後將其轉換爲所需的範圍。

max = 20
min = 10
var a = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(a)
-------------------------
17

3.隨機排列數組(洗牌)

在JavaScript中，咱們沒有一個模塊，由於python有 random.shuffle()，但仍是有一種方法能夠在一行代碼中洗牌一個數組。

var arr = ["A", "B", "C","D","E"];
console.log(arr.slice().sort(() => Math.random() - 0.5))
------------------------------
[ 'C', 'B', 'A', 'D', 'E' ]

4.獲取隨機布爾值

Javascript中的 Math.random 函數可用於生成範圍之間的隨機數。要生成一個隨機布爾值，咱們須要隨機獲取一個介於0到1之間的數字，而後檢查它是否大於或小於0.5。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
---------------------------------------
false

5.生成隨機十六進制代碼

您可使用這個一行程序挑戰本身做爲web開發人員的能力。這個一行程序將生成一個隨機的十六進制代碼。您可使用一行程序生成3-6種顏色代碼，這將爲您建立一個顏色托盤。

console.log('#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0'));

------------------1st Run------------
#48facd
------------------2nd Run-------------
#93d806
------------------3rd Run-------------
#9072f9

6.反轉字符串

反轉字符串有不少方法，但這是我在互聯網上找到的最簡單的方法之一。

const reverse = str => str.split('').reverse().join('');
console.log(reverse('javascript'));
----------------------------------------
tpircsavaj

7.交換兩個變量

下面的代碼展現了一些簡單的方法來交換兩個變量，而不須要使用第三個變量，只須要一行代碼。

a = 5
b = 7
---------方法 1---------
b = [a, a = b][0]; // One Liner 
----------方法 2-----------
[a,b] = [b,a];
console.log("A=",a)
console.log("B=",b)

8.多變量分配

像Python同樣，JavaScript還可使用這種巧妙的解構技術在同一行代碼中同時分配多個變量。

var [a,b,c,d] = [20,14,30,"COD"]
console.log(a,b,c,d)
------------------------------------
20 14 30 COD

9.檢查偶數和奇數

有不少方法能夠作到這一點，最簡單的方法之一就是使用箭頭函數並只用一行編寫整個代碼。

const isEven = num => num % 2 === 0;
console.log(isEven(2));
---------------------------------
true
console.log(isEven(3));
----------------------------------
false

10.FizzBuzz

這個問題是用來檢查程序員核心的著名面試問題之一。在這個測試中，咱們須要編寫一個程序來打印從1到100的數字。但若是是3的倍數，則打印「Fizz」而不是數字，若是是5的倍數，則打印「Buzz」。

for(i=0;++i<10;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
----------------------------------
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz

11.迴文

迴文是一個字符串或數字，當它被反轉時看起來徹底相同。例如：abba，121等。

const isPalindrome = str => str === str.split('').reverse().join('');

result = isPalindrome('abcba');
console.log(result)
-----------------------------------
true

result = isPalindrome('abcbc');
console.log(result)
---------------------------------
false

12.檢查數組中的全部元素是否都知足特定條件

const hasEnoughSalary = (salary) => salary >= 30000
const salarys = [70000, 19000, 12000, 30000, 15000, 50000]
result = salarys.every(hasEnoughSalary) 
console.log(result)
-------------------------------
false
const salarys = [70000, 190000 ,120000, 30000, 150000,50000]
result = salarys.every(hasEnoughSalary) // Results in false
console.log(result)
---------------------------------
true

13.計算兩個給定日期之間的天數

const days = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (86400000));
result = days(new Date('2020-04-15'), new Date('2021-01-15'));
console.log(result)
--------------------------------------------------------
275

爲了計算兩個日期之間的天數，咱們首先找到兩個日期之間的絕對值，而後用86400000除以它，它等於一天內的毫秒數，最後，咱們四捨五入並返回結果。

14.將字符串轉換爲數字

將字符串轉換爲數字的一種很是簡單的方法是使用類型轉換。

toNumber = str => +str;
toNumber = str => Number(str);
result = toNumber("2");
console.log(result)
console.log(typeof(result))
----------------------------------
2
number

15.合併多個數組

const cars = ['🚓', '🚗'];
const trucks = ['🚚', '🚛'];
----- 方法 1 -------
const combined = cars.concat(trucks);
console.log(combined)
--------------------------------------------------
[ '🚓', '🚗', '🚚', '🚛' ]
----- 方法 2 --------
const combined = [].concat(cars,trucks);
console.log(combined)
--------------------------------------------------
[ '🚓', '🚗', '🚚', '🚛' ]

16.將數字截斷爲固定的小數點

藉助 Math.pow() 你能夠將數字截斷爲某個小數點的方法。

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
-----------------------------------------------------------------
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

17.滾動到頁面頂部

window.scrollTo() 方法能夠幫助你完成任務。它須要滾動到頁面上該位置的x和y座標。若是將它們設置爲（0,0），它將滾動到頁面頂部。

const goToTop = () => window.scrollTo(0, 0);
goToTop();

18.將華氏溫度轉換爲攝氏溫度(反之亦然)

不管選擇華氏溫度仍是攝氏溫度，將全部溫度參數都轉換爲一個單位始終是一個更好的主意。

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9; 
--------Examples-------
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

19.特定Cookie的值

cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
// Result: "GA1.3.974792242.1509957189"

20.將文字複製到剪貼板

將文本複製到剪貼板很是有用，也是一個很難解決的問題。您能夠在Internet上找到各類解決方案，可是下面的解決方案多是最小，最聰明的解決方案之一。

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
}

21.刪除HTML標籤

這種單行代碼使用正則表達式刪除了任何看起來像 <xxx> 的字符串，其中 x 能夠是任何字符，包括 /

"<b>A</b>".replace(/<[^>]+>/gi, "");

22.克隆數組

它將返回原始數組的副本。

oldArray = [1,4,2,3]
var newArray = oldArray.slice(0);
console.log(newArray)
------------------------------------
[1,4,2,3]