這裡有多種簡短而強大的 JavaScript 技巧，可以最大限度地提高生產力 ⚡️ 並最大限度地減少痛苦 🩸。
讓我們深入研究看看🤘
原文出處：https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp
唯一陣列
過濾掉陣列中的重複值。
const arr = ["a", "b", "c", "d", "d", "c", "e"]
const uniqueArray = Array.from(new Set(arr));
console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e']
唯一的物件陣列
Set 物件不允許您過濾掉重複的物件，因為每個物件都是不同的。 JSON.stringify 在這裡幫我們解決了這個問題。
const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }];
const uniqueObjects = Array.from(
new Set(
arr.map(JSON.stringify)
)
).map(JSON.parse)
console.log(uniqueObjects);
在 此評論 中查看更有效但稍長的方法。
陣列迭代器索引
通過 .map 和 .forEach javascript 迭代函數，您可以獲得每個項目的索引。
const arr = ['a', 'b', 'c'];
const letterPositions = arr.map(
(char, index) => `${char} is at index ${index}`
)
按字元數拆分字串
我們可以使用 .match 正則表達式函數將字串拆分為 n 個字符。
const str = "asdfghjklmnopq";
const splitPairs = str.match(/.{1,2}/g);
console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq']
用不同的字元拆分字串
另一個使用 .match 的正則表達式 hack 允許您將像“aabbc”這樣的字串拆分為陣列“[”aa”，“bb”，“c”]`。
const str = "abbcccdeefghhiijklll";
const splitChars = str.match(/(.)\1*/g);
console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll']
遍歷物件
Object.entries 允許我們將 JSON 物件轉換為鍵值對陣列，從而使我們能夠使用循環或陣列迭代器對其進行迭代。
const obj = {
"key1": "value1",
"key2": "value2",
"key3": "value3"
};
const iteratedObject = Object.entries(obj)
.map(([key, value]) => `${key} = ${value}`);
console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3']
鍵值陣列到物件
您可以使用“Object.fromEntries”將“Object.entryified”鍵值對陣列轉換回物件
const entryified = [
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
];
const originalObject = Object.fromEntries(entryified);
console.log(originalObject); // { key1: 'value1', ... }
發生次數計數
您可能想計算一個專案在陣列中出現的次數。我們可以使用帶有迭代器的 .filter 函數來完成此操作。
const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"];
// creating a unique array to avoid counting the same char more than once
const unique = Array.from(new Set(occurrences));
const occurrenceCount = Object.fromEntries(
unique.map(char => {
const occurrenceCount = occurrences.filter(c => c === char).length;
return [char, occurrenceCount]
})
)
console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... }
在 此評論 中查看可靠的單行程式碼以執行此操作！
替換回調
.replace 函數並不限制您只能用固定字串替換。您可以將回調傳遞給它並使用匹配的子字串。
const string = "a dog went to dig and dug a doggone large hole";
const replacedString = string.replace(/d.g/g, str => str + "gy")
console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole
條件串接
你們中的許多人都熟悉在 JS 中遇到未定義的錯誤，條件連結可以防止很多這種情況的發生。
可選連結 (
?.) 運算符存取物件的屬性或呼叫函數。如果使用此運算符存取的對像或呼叫的函數未定義或為空，則表達式短路併計算為未定義，而不是拋出錯誤。
const obj = {
"a": "aaaaaaa",
"b": null
};
console.log(obj.b.d); // throws an error
console.log(obj.b?.d); // returns undefined
限定一個數字
通常，您可能需要將數字限制在特定範圍內。每次需要時都用三元運算符來做是一件很痛苦的事情。函數要乾淨得多。
const constrain = (num, min, max) => {
if(num < min) return min;
else if(num > max) return max;
else return num;
}
constrain(5, 1, 3) // 3
constrain(2, 1, 5) // 2
constrain(0, -100, 100) // 0
一個更好的方法是像這樣使用 Math.min 和 Math.max：
const constrain = (num, min, max) => Math.min(Math.max(num, min), max)
索引陣列的前後
.at 函數允許您使用正數和負數從頭到尾對陣列進行索引。
const arr = [1, 2, 3, 4, 5];
arr.at(0) // 1
arr.at(1) // 2
arr.at(-1) // 5
arr.at(-2) // 4
按字母順序排序
按字母順序對字串陣列進行排序
const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"];
const sorted = words.sort((a, b) => a.localeCompare(b));
console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript']
💡 提示：您可以通過將 a.localeCompare(b) 切換為 b.localeCompare(a) 來切換升序和降序
按 Truthy/Falsy 值排序
您可以按真值/假值對陣列進行排序，將具有真值的值放在最前面，然後是假值。
const users = [
{ "name": "john", "subscribed": false },
{ "name": "jane", "subscribed": true },
{ "name": "jean", "subscribed": false },
{ "name": "george", "subscribed": true },
{ "name": "jelly", "subscribed": true },
{ "name": "john", "subscribed": false }
];
const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))
Number(false) 等於 0，Number(true) 等於 1。這就是我們如何通過排序函數傳遞它。
四捨五入到 n 位
您可以使用 .toFixed 將小數四捨五入為 n 位。請注意，.toFixed 將數字轉換為字串，因此我們必須將其重新解析為數字。
console.log(Math.PI); // 3.141592653589793
console.log(Number(Math.PI.toFixed(2)))
感謝閱讀✨！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
