在編程中，解決同一個問題通常有多種方法。這些解決方案在不同方面可能有所不同，例如長度、性能、使用的算法、可讀性等。
在本文中，我們將研究幾種快速簡潔的單行解決方案，以解決 JavaScript 中經常出現的各種問題。
什么是單行代碼？
在我們開始之前，讓我們確保我們了解是什么單行代碼。
單行代碼是問題的代碼解決方案，使用特定編程語言中的單個語句實現，無需任何第三方實用程序。
該定義包含許多其他定義中沒有的重要區別特征：
1）. “……單句……”
并非每一段只占用一行的代碼都是單行代碼。例如，看看這個將兩個平方和相加并返回結果的方法。
const sum = (a, b) => { const s1 = a * a; const s2 = b * b; return s1 + s2; }你會稱之為單行代碼嗎？在大多數情況下，這只會作為格式錯誤的代碼通過。Prettier 之類的工具可以輕松地將這三個語句自動拆分為多行。
獲得兩個平方和的真正單行方法是這樣的：
一個簡短、簡潔的陳述可以同樣清晰地完成同樣的工作。
另一方面，此方法跨越多行代碼以提高可讀性，但它仍然可以作為一行代碼通過：
const capitalizeWithoutSpaces = (str) =>
str
.split('')
.filter((char) => char.trim())
.map((char) => char.toUpperCase())
.join('');
因此，盡管名稱如此，“單行”并不一定意味著是一行代碼。
2）. “……特定的編程語言……”
這與每個高級語言程序在執行前都必須翻譯成低級語言這一事實有關。一個非常簡單的程序最終可能會占用數十或數百行匯編代碼和機器代碼。
例如，這里是另一個也添加兩個平方和的單行代碼，這次是在 C++ 中：
int sum(int a, int b) {
return a * a + b * b;
}讓我們看看編譯成匯編語言后的樣子：
sum(int, int):
push rbp
mov rbp, rsp
mov DWORD PTR [rbp-4], edi
mov DWORD PTR [rbp-8], esi
mov eax, DWORD PTR [rbp-4]
imul eax, eax
mov edx, eax
mov eax, DWORD PTR [rbp-8]
imul eax, eax
add eax, edx
pop rbp
ret
這個匯編程序顯然不止一行或一行代碼。 想象一下等效的機器語言程序會有多少。 所以這個函數可以說是僅在 C++ 上下文中的單行函數。
3）. “……沒有任何第三方實用程序”
對于單行代碼，它不應該引用編程語言本身不可用的任何方法或函數，記住我們之前看過的單行代碼：
const capitalizeWithoutSpaces = (str) =>
str
.split('')
.filter((char) => char.trim())
.map((char) => char.toUpperCase())
.join('');
這里使用的所有方法都是內置的 JavaScript 方法。 它不包括來自 NPM 或其他地方的第三方代碼。
但是，如果我們決定實現自己的 filter() 方法來替換 Array filter()，則該方法將不再符合單行方法的條件。
// Not a one-liner
const capitalizeWithoutSpaces = (str) =>
filter(str.split(''), (char) => char.trim())
.map((char) => char.toUpperCase())
.join('');
function filter(arr, callback) {
// Look at all these lines
const result = [];
for (const item of arr) {
if (callback(item)) {
result.push(item);
}
}
return result;
}
拋開定義，現在讓我們看一些聰明的 JavaScript 單行代碼以及它們解決方案。
1. 獲取數組的最小元素
要獲得數組中的最小項，我們可以采用這種使用 for 循環和 if 語句的命令式方法。
const getSmallest = (arr) => {
let smallest = Number.POSITIVE_INFINITY;
for (const num of arr) {
if (num < smallest) {
smallest = num;
}
}
return smallest;
};
const arr = [13, 7, 11, 3, 9, 15, 17];
console.log(getSmallest(arr)); // 3這沒關系，但有一個簡潔且聲明性的單行替代方案同樣有效：
const getSmallest = (arr) =>
arr.reduce((smallest, num) => Math.min(smallest, num));
const arr = [13, 7, 11, 3, 9, 15, 17];
console.log(getSmallest(arr)); // 3
2. 獲取數組的最大元素
這是獲取數組中最大元素的可接受方法。
const getLargest = (arr) => {
let largest = Number.NEGATIVE_INFINITY;
for (const num of arr) {
if (num > largest) {
largest = num;
}
}
return largest;
};
const arr = [13, 7, 11, 3, 9, 15, 17];
console.log(getLargest(arr)); // 17但就像我們看到的獲取最小數組元素一樣，有一種更短、更簡潔的方法。
const getLargest = (arr) =>
arr.reduce((largest, num) => Math.max(largest, num));
const arr = [13, 7, 11, 3, 9, 15, 17];
console.log(getLargest(arr)); // 17
您可以看到，此函數與單行 getSmallest() 函數之間的唯一區別是 Math.min() 已替換為 Math.max()。
3. 打亂數組
數組/列表洗牌的一個常見用途是在紙牌游戲中，其中牌組中的牌必須隨機排序。
Fisher-Yates 洗牌是一種著名的洗牌算法。 查看它在 JavaScript 中的可能實現：
const shuffleArray = (arr) => {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
};
const arr = [1, 2, 3, 4, 5];
shuffleArray(arr);
// [ 2, 3, 5, 1, 4 ] (varies)
console.log(arr);用一些函數式編程魔法重構它，我們有：
const shuffleArray = (arr) =>
[...Array(arr.length)]
.map((_, i) => Math.floor(Math.random() * (i + 1)))
.reduce(
(shuffled, r, i) =>
shuffled.map((num, j) =>
j === i ? shuffled[r] : j === r ? shuffled[i] : num
),
arr
);
// [ 2, 4, 1, 3, 5 ] (varies)
console.log(shuffleArray([1, 2, 3, 4, 5]));
這以 O(n2) 時間復雜度（二次）運行，并且可能會導致大型數組出現性能問題，但它是一種優雅的解決方案。 此外，與第一種方法不同，它不會改變原始數組。
另一種函數式方法利用 Array sort() 方法的實現方式來隨機排列數組。
const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);
const arr = [1, 2, 3, 4, 5];
// [ 5, 2, 4, 1, 3 ] (varies)
console.log(shuffleArray(arr));
由于它使用了 sort()，因此，它的運行時間復雜度為 O(n log n)，并且比前面的方法具有更好的性能。
4. 按對象屬性對數組進行分組
有時我們需要使用它們都具有的特定屬性對一組對象進行分組，例如，按國家/地區對用戶進行分組，按出版年份對書籍進行分組，按顏色對汽車進行分組等。
在下面的示例中，我們根據姓名的長度將人物對象分組到一個數組中。
const groupBy = (arr, groupFn) => {
const grouped = {};
for (const obj of arr) {
const groupName = groupFn(obj);
if (!grouped[groupName]) {
grouped[groupName] = [];
}
grouped[groupName].push(obj);
}
return grouped;
};
const people = [
{ name: 'Matt' },
{ name: 'Sam' },
{ name: 'John' },
{ name: 'Mac' },
];
const groupedByNameLength = groupBy(people, (person) => person.name.length);
/**
{
'3': [ { name: 'Sam' }, { name: 'Mac' } ],
'4': [ { name: 'Matt' }, { name: 'John' } ]
}
*/
console.log(groupedByNameLength);這是單行代碼的解決方案：
const groupBy = (arr, groupFn) =>
arr.reduce(
(grouped, obj) => ({
...grouped,
[groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj],
}),
{}
);
const people = [
{ name: 'Matt' },
{ name: 'Sam' },
{ name: 'John' },
{ name: 'Mac' },
];
const groupedByNameLength = groupBy(people, (person) => person.name.length);
/**
{
'3': [ { name: 'Sam' }, { name: 'Mac' } ],
'4': [ { name: 'Matt' }, { name: 'John' } ]
}
*/
console.log(groupedByNameLength);
5.反轉字符串
我們可以在 JavaScript 中使用反向 for 循環來反轉字符串，如下所示：
const reverseString = (str) => {
let reversed = '';
for (let i = str.length - 1; i >= 0; i--) {
const ch = str[i];
reversed += ch;
}
return reversed;
};
const reverse = reverseString('javascript');
console.log(reverse); // tpircsavaj但是再一次，我們可以利用強大的內置數組方法，如 reverse() 和 join() 來創建一個做同樣事情的單行代碼。
const reverseString = (str) => str.split('').reverse().join('');
const reverse = reverseString('javascript');
console.log(reverse); // tpircsavaj6. 生成隨機的十六進制顏色
十六進制顏色代碼是指定 RGB 顏色的一種方式。 它們具有#RRGGBB 格式，其中 RR 代表紅色，GG 代表綠色，BB 代表藍色。 每種顏色的值范圍從 0 到 255，并以十六進制格式表示 - 0 到 FF。
這個單行生成一個隨機的十六進制顏色并返回結果。
const randomHexColor = () =>
`#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;
console.log(randomHexColor()); // #7a10ba (varies)
console.log(randomHexColor()); // #65abdc (varies)
7. 獲取數組的平均值
這是眾多問題中的另一個問題，其中涉及循環的解決方案可以使用一種或多種 Array 方法來縮短。
因此，雖然我們可以像這樣獲得數組中數字的平均值：
const getAverage = (arr) => {
let sum = 0;
for (const num of arr) {
sum += num;
}
return sum / arr.length;
};
const arr = [5, 13, 9, 11, 10, 15, 7];
const average = getAverage(arr);
console.log(average); // 10Array reduce() 方法讓我們創建了這個緊湊的單行替代方案：
const getAverage = (arr) => arr.reduce((sum, num) => sum + num, 0) / arr.length;
const arr = [5, 13, 9, 11, 10, 15, 7];
const average = getAverage(arr);
console.log(average); // 10
8. 檢查兩個數組是否包含相同的值
這是一個確保兩個數組包含相同元素（以任何順序）并且這些元素在兩個數組中出現相同次數的問題。
使用 for 循環，我們可以實現以下解決方案：
const areEqual = (arr1, arr2) => {
if (arr1.length === arr2.length) {
for (const num of arr1) {
if (!arr2.includes(num)) {
return false;
}
}
return true;
}
return false;
};
const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 1, 2];
const arr3 = [1, 2, 3];
console.log(areEqual(arr1, arr2)); // true
console.log(areEqual(arr1, arr3)); // false使用 Array sort() 和 join() 方法，我們可以創建這個單行替代方案：
const areEqual = (arr1, arr2) =>
arr1.sort().join(',') === arr2.sort().join(',');
const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 1, 2];
const arr3 = [1, 2, 3];
console.log(areEqual(arr1, arr2)); // true
console.log(areEqual(arr1, arr3)); // false
9. 從數組中刪除重復項
我們可以像這樣從數組中刪除重復項：
const removeDuplicates = (arr) => {
const result = [];
for (const num of arr) {
if (!result.includes(num)) {
result.push(num);
}
}
return result;
};
const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5];
const distinct = removeDuplicates(arr);
console.log(distinct); // [1, 2, 3, 4, 5]但是我們可以利用 Set() 構造函數在短短一行中刪除重復項：
const removeDuplicates = (arr) => [...new Set(arr)];
const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5];
const distinct = removeDuplicates(arr);
console.log(distinct); // [1, 2, 3, 4, 5]
10. 將Map轉換為 JSON
這個簡短的函數讓我們可以快速將 Map 對象轉換為 JSON 字符串而不會丟失任何信息：
const mapToJson = (map) => JSON.stringify(Object.fromEntries(map));
const map = new Map([
['user1', 'John'],
['user2', 'Kate'],
['user3', 'Peter'],
]);
const json = mapToJson(map);
// {"user1":"John","user2":"Kate","user3":"Peter"}
console.log(json);
另一個一行可以反轉上面的轉換。 以下函數會將 JSON 字符串轉換為 Map 對象。
const jsonToMap = (json) => new Map(Object.entries(JSON.parse(json)));
const json = '{"user1":"John","user2":"Kate","user3":"Peter"}';
const map = jsonToMap(json);
// Kate
console.log(map.get('user2'));
// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(map);
12. 將蛇形字符串轉換為駝峰大小寫
在蛇形字符串中，每個單詞由下劃線 (_) 分隔并以小寫字母開頭，例如：variable_name、bread_and_eggs 等。
但是，對于駝峰式字符串，第一個單詞以小寫字母開頭，后面的單詞均以大寫字母開頭。 單詞之間沒有空格或標點符號。 駝峰式字符串的示例有：variableName、breadAndEggs 等。
使用這個簡潔的函數，我們可以將任何蛇形大小寫的字符串轉換為駝峰大小寫。
const snakeToCamelCase = (s) =>
s.toLowerCase().replace(/(_\w)/g, (w) => w.toUpperCase().substr(1));
const str1 = 'learn_javascript';
const str2 = 'coding_beauty';
console.log(snakeToCamelCase(str1)); // learnJavaScript
console.log(snakeToCamelCase(str2)); // codingBeauty
13.生成隨機UUID
“UUID”是大學唯一標識符的首字母縮寫詞。 UUID 是一個 128 位的值，可唯一標識 Internet 上的對象或實體。
這個單行生成一個隨機 UUID：
const generateRandomUUID = (a) =>
a
? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
: ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
/[018]/g,
generateRandomUUID
);
console.log(generateRandomUUID()); // f138f635-acbd-4f78-9be5-ca3198c4cf34
console.log(generateRandomUUID()); // 8935bb0d-6503-441f-bb25-7bc685b5b5bc
14.條件流控制
我們可以使用嵌套的三元運算符將 if...else 或 switch 語句轉換為單行語句。 考慮一個返回特定范圍內數字的英文單詞形式的函數。
使用 if...else 語句，這樣的函數可以這樣實現：
const getNumWord = (num) => {
if (num === 1) {
return 'one';
} else if (num === 2) {
return 'two';
} else if (num === 3) {
return 'three';
} else if (num === 4) {
return 'four';
} else return 'unknown';
};
console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown使用 switch...case 語句：
const getNumWord = (num) => {
switch (num) {
case 1:
return 'one';
case 2:
return 'two';
case 3:
return 'three';
case 4:
return 'four';
default:
return 'unknown';
}
};
console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown現在使用嵌套的三元組來創建單行代碼：
const getNumWord = (num) =>
num === 1
? 'one'
: num === 2
? 'two'
: num === 3
? 'three'
: num === 4
? 'four'
: 'unknown';
console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown
結論
我們已經了解了針對常見JavaScript編程問題的簡明解決方案。 我們看到許多實例，其中包含多個語句的命令式解決方案被轉換為使用各種內置方法和語言結構的聲明式單行代碼。
這些緊湊的解決方案有時性能和可讀性較低，但使用它們可以證明您的編程能力和對語言的掌握程度。使用任何一種方法，我們都是需要根據具體的情況來使用。
