天天看點

22個有用的JavaScript單行代碼

22個有用的JavaScript單行代碼

英文 | https://levelup.gitconnected.com/20-useful-javascript-one-liners-that-you-should-know-7f6271426bfb

翻譯 | web前端開發公衆号

世界各地有超過一千萬的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、擷取随機布爾值

Math.randomJavascript中的函數可用于生成範圍之間的随機數。要生成一個随機布爾值,我們需要随機擷取一個介于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
---------Method : 1---------
b = [a, a = b][0]; // One Liner 
----------Method : 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、檢查偶數和奇數

這是每個程式員在開始編碼生涯時面臨的基本問題之一。有很多方法可以做到這一點,最簡單的方法之一就是使用arrow函數并隻用一行編寫整個代碼。

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

10、FizzBuzz

這個問題是用來檢查程式員核心的著名面試問題之一。在此測驗中,我們需要編寫一個程式來列印從1到100的數字。

但是,對于三個的倍數,請列印“ Fizz ”而不是數字;對于五個的倍數,請列印“ 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 = ['🚚', '🚛'];
----- METHOD : 1 -------
const combined = cars.concat(trucks);
console.log(combined)
--------------------------------------------------
[ '🚓', '🚗', '🚚', '🚛' ]
----- METHOD : 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可以是任何char的字元串,包括/。

“ <b> A </ b>”。replace(/ <[^>] +> / gi,“”);      

22、克隆數組

它将傳回原始數組的副本。

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

總結

這個就是我今天跟你分享的22個非常有用的JavaScript的代碼片段功能,我個人覺得非常簡單友善,希望,這個内容也能夠對你有所幫助。

感謝你的閱讀。

22個有用的JavaScript單行代碼

繼續閱讀