世界有超過 1000 萬 Javascript 開發(fā)人員，而且這個數(shù)字每天都在增加。盡管 JavaScript 以其動態(tài)特性而聞名，但它還具有許多其他出色的特性。在這篇博客中，我們將看到 10 個有用的 JavaScript 單行代碼，你應該知道它們來提高你的工作效率。

1、生成一個范圍內(nèi)的隨機數(shù)

在很多情況下，我們需要在一個范圍內(nèi)生成一個隨機數(shù)。Math.random() 函數(shù)可以為我們生成一個隨機數(shù)，然后我們可以將其轉(zhuǎn)換為我們想要的范圍。

const max = 20;
const min = 10;
// Math.floor() 返回小于或等于一個給定數(shù)字的最大整數(shù)。
// Math.random() 返回一個浮點型偽隨機數(shù)字，在0（包括0）和1（不包括）之間。
const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);
//output: 17
//output: 10

2、反轉(zhuǎn)字符串

有幾種不同的方法可以反轉(zhuǎn)字符串。這是最簡單的一個，使用 split() 、reverse() 和 join() 方法。

?split() 方法使用指定的分隔符字符串將一個String對象分割成子字符串數(shù)組。 ?reverse() 方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組?join() 方法將一個數(shù)組（或一個類數(shù)組對象）的所有元素連接成一個字符串并返回這個字符串。如果數(shù)組只有一個項目，那么將返回該項目而不使用分隔符。

reverse = (str) => str.split('').reverse().join('');
const str = 'hello world';
console.log(reverse(str));
// output: dlrow olleh

3、生成一個隨機的十六進制碼

適用于元素隨機顏色生成的場景

?padEnd() 方法會用一個字符串填充當前字符串（如果需要的話則重復填充），返回填充后達到指定長度的字符串。從當前字符串的末尾（右側(cè)）開始填充。

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

4、數(shù)組隨機排序

在使用隨機算法時，數(shù)組的隨機排序是一項經(jīng)常用到的場景，在 JavaScript 中，我們沒有模塊像python 中的 random.shuffle() 方法一樣實現(xiàn)數(shù)組元素的隨機排序，但仍然有一種方法只需一行代碼就可以將數(shù)組的所有元素隨機排序。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log('shuffled array: ', shuffleArray(arr));
//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]

5、滾動到頂部/滾動到底部

初學者經(jīng)常會發(fā)現(xiàn)自己很難正確地將元素滾動到視圖中。滾動元素最簡單的方法是使用 scrollIntoView() 方法。

//Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
   element.scrollIntoView({ behavior: 'smooth', block: 'start' });
const scrollToBottom = (element) =>
   element.scrollIntoView({ behavior: 'smooth', block: 'end' });

6、檢查是否有人在使用暗色主題

如果您希望您顯示的內(nèi)容遵循使用您網(wǎng)站的人的配色方案，JavaScript 包含一種檢測某人是否使用暗色主題的方法，以便您可以相應地調(diào)整顏色。

const isDarkMode1 =
   window.matchMedia &&
   window.matchMedia('(prefers-color-scheme: dark)').matches;
// 如果您想將其用作函數(shù)
const isDarkMode2 = () =>
   window.matchMedia &&
   window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode1);
console.log(isDarkMode2());
//output:
// true
// true

7、復制到剪貼板

將文本復制到剪貼板非常有用，也是一個難以解決的問題。您可以在網(wǎng)上找到各種解決方案，但下面的解決方案可能是最簡潔和最聰明的解決方案之一。

const copyToClipboard = (text) =>
   navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

8、獲取兩個日期之間的天數(shù)

確定如用戶的年齡時，你必須計算從某個時間點到現(xiàn)在已經(jīng)過去的天數(shù)。

const ageDays = (old, recent) =>
   Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';
const firstDate = new Date('2021-06-10');
const secondDate = new Date('2022-03-03');
console.log(ageDays(firstDate, secondDate));
// output: 266 Day(s)

9、獲取隨機布爾值

Javascript 中的 Math.random 函數(shù)可用于生成范圍之間的隨機數(shù)。要生成隨機布爾值，我們需要隨機獲取 0 到 1 之間的數(shù)字，然后檢查它是大于還是小于 0.5。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// output: false

10、 檢查當前用戶是否在蘋果設備上

我們可以使用 navigator.platform 來檢查瀏覽器運行的平臺。

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(navigator.platform);
console.log(isAppleDevice);
// output:
// Win32
// false

注意：此屬性的推薦替代方案是 navigator.userAgentData.platform。但是，navigator.userAgentData.platform 還沒有被一些主流瀏覽器支持，并且定義它的規(guī)范還沒有被任何標準組采用（具體來說，它不是 W3C 或 WHATWG 發(fā)布的任何規(guī)范的一部分）。

個 JS 開發(fā)人員都應該使用 javascript one liner 來提高生產(chǎn)力和技能，所以今天我們討論一些可以在日常開發(fā)生活中使用的 one liner。

1.對數(shù)組進行排序

使用 sort 方法對數(shù)組進行排序非常簡單。

const number = [2,6,3,7,8,4,0];
number.sort();
// expected output: [0,2,3,4,6,7,8]

2.檢查數(shù)組中的值

很多時候我們需要檢查值是否存在于數(shù)組中，借助 include 方法。

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true

3.過濾數(shù)組

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);console.log(result);

// expected output: Array ["exuberant", "destruction", "present"]

4.從數(shù)組中查找元素

如果你只需要一個元素，但你在數(shù)組中獲得了很多元素，不要擔心 JavaScript 有 find 方法。

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

5.查找數(shù)組中任何元素的索引

要查找數(shù)組中元素的索引，您可以簡單地使用 indexOf 方法。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1

6.將數(shù)組轉(zhuǎn)換為字符串

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join(", "));
// expected output: "Fire, Air, Water"

7.支票號碼是偶數(shù)還是奇數(shù)

很容易找出給定的數(shù)字是偶數(shù)還是奇數(shù)。

const isEven = num => num % 2 === 0;
or
const isEven = num => !(n & 1);

8.刪除數(shù)組中的所有重復值

刪除數(shù)組中所有重復值的一種非常簡單的方法

const setArray = arr => [...new Set(arr)];const arr = [1,2,3,4,5,1,3,4,5,2,6];
setArray(arr);
// expected output: [1,2,3,4,5,6]

9.合并多個數(shù)組的不同方式

// merge but don't remove duplications
const merge = (a, b) => a.concat(b);
or
const merge = (a, b) => [...a, ...b];// merge with remove duplications
const merge = (a, b) => [...new Set(a.concat(b))];
or
const merge = (a, b) => [...new Set([...a, ...b])];

10.滾動到頁面頂部

有很多方法可以將頁面滾動到頂部。

const goToTop = () => window.scrollTo(0,0, "smooth");
or
const scrollToTop = (element) => element.scrollIntoView({behavior: "smooth", block: "start"});
// scroll to bottom of the page
const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);

11.復制到剪貼板

在 Web 應用程序中，復制到剪貼板因其對用戶的便利性而迅速普及。

const copyToClipboard = text => (navigator.clipboard?.writeText ?? Promise.reject)(text);

以上就是今天跟你分享的11個JavaScript的單行代碼技巧，希望你能從中學到新的知識。

想了解更多精彩內(nèi)容，歡迎關注千鋒教育！