30 個鮮為人知的 JavaScript 技巧，讓你的代碼更具可讀性
作者：佚名
在今天這篇文章中，我們為大家精心整理了30個 JavaScript 技巧合集，它將幫助你優化代碼，使其更具可讀性，提升工作效率，并節省你的時間。
在今天這篇文章中，我們為大家精心整理了30個 JavaScript 技巧合集，它將幫助你優化代碼，使其更具可讀性，提升工作效率，并節省你的時間。
現在，就讓我們開始吧。
1 、使用 !! 轉換為布爾值
使用雙重否定快速將任何值轉換為布爾值。
let truthyValue = !!1; // true
let falsyValue = !!0; // false2 、 默認函數參數
設置函數參數的默認值以避免定義錯誤。
function greet(name = "Guest") {
return `Hello, ${name}!`;
}3 、 短 If-Else 的三元運算符
if-else 語句的簡寫。
let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";4 、動態字符串的模板文字
使用模板文字將表達式嵌入字符串中。
let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);5 、解構賦值
輕松從對象或數組中提取屬性。
let [x, y] = [1, 2];
let {name, age} = {name: "Alice", age: 30};6 、用于數組和對象克隆的擴展運算符
克隆數組或對象而不引用原始對象。
let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];7 、短路求值
使用邏輯運算符進行條件執行。
let isValid = true;
isValid && console.log("Valid!");8 、可選鏈接 (?.)
如果引用為空，則安全地訪問嵌套對象屬性而不會出現錯誤。
let user = {name: "John", address: {city: "New York"}};
console.log(user?.address?.city); // "New York"9 、空值合并運算符 (??)
使用 ?? 為空或未定義提供默認值。
let username = null;
console.log(username ?? "Guest"); // "Guest"10 、使用 map、filter 和 reduce 進行數組操作
無需傳統循環即可優雅地處理數組。
// Map
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
// Filter
const evens = numbers.filter(x => x % 2 === 0);
// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);11 、標記模板文字
使用模板文字進行函數調用，以進行自定義字符串處理。
function highlight(strings, ...values) {
return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
}
let price = 10;
console.log(highlight`The price is ${price} dollars.`);12 、使用 Object.entries() 和 Object.fromEntries()
將對象轉換為數組并轉換回來，以便于操作。
let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);13 、 用于唯一元素的 Set 對象
使用 Set 存儲任何類型的唯一值。
let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];14 、 對象中的動態屬性名稱
在對象文字表示法中使用方括號來創建動態屬性名稱。
let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"};15 、使用 bind() 進行函數柯里化
創建一個新函數，當調用該函數時，將其 this 關鍵字設置為提供的值。
function multiply(a, b) {
return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 1016 、使用 Array.from() 從類似數組的對象創建數組
將類似數組或可迭代的對象轉換為真正的數組。
let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList);17 、可迭代對象的 for…of 循環
直接迭代可迭代對象（包括數組、映射、集合等）。
for (let value of ['a', 'b', 'c']) {
console.log(value);
}18 、 使用 Promise.all() 實現并發 Promise
同時運行多個 Promise 并等待所有 Promise 完成。
let promises = [fetch(url1), fetch(url2)];
Promise.all(promises)
.then(responses => console.log('All done'));19 、函數參數的 Rest 參數
將任意數量的參數捕獲到數組中。
function sum(...nums) {
return nums.reduce((acc, current) => acc + current, 0);
}20 、用于性能優化的記憶化
存儲函數結果以避免冗余處理。
const memoize = (fn) => {
const cache = {};
return (...args) => {
let n = args[0]; // assuming single argument for simplicity
if (n in cache) {
console.log('Fetching from cache');
return cache[n];
} else {
console.log('Calculating result');
let result = fn(n);
cache[n] = result;
return result;
}
};
};21 、使用 ^ 交換值
使用 XOR 按位運算符交換兩個變量的值，無需臨時變量。
let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 122 、使用 flat() 展平數組
使用 flat() 方法輕松展平嵌套數組，展平深度作為可選參數。
let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);23 、使用一元加法轉換為數字
使用一元加法運算符快速將字符串或其他值轉換為數字。
let str = "123";
let num = +str; // 123 as a number24 、 HTML 片段的模板字符串
使用模板字符串創建 HTML 片段，使動態 HTML 生成更清晰。
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;25 、使用 Object.assign() 合并對象
將多個源對象合并為目標對象，有效地組合它們的屬性。
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;26 、短路默認值
處理可能未定義或為空的變量時，利用邏輯運算符分配默認值。
let options = userOptions || defaultOptions;27 、 使用括號表示法動態訪問對象屬性
使用括號表示法動態訪問對象的屬性，當屬性名稱存儲在變量中時很有用。
let property = "name";
let value = person[property]; // Equivalent to person.name28 、 使用 Array.includes() 進行存在性檢查
使用 includes() 檢查數組是否包含某個值，這是 indexOf 的更清晰的替代方案。
if (myArray.includes("value")) {
// Do something
}29 、 Function.prototype.bind() 的強大功能
將函數綁定到上下文（此值）并部分應用參數，創建更可重用和模塊化的代碼。
const greet = function(greeting, punctuation) {
return `${greeting}, ${this.name}${punctuation}`;
};
const greetJohn = greet.bind({name: 'John'}, 'Hello');
console.log(greetJohn('!')); // "Hello, John!"30 、防止對象修改
使用 Object.freeze() 防止對對象的修改，使其不可變。為了實現更深層次的不變性，請考慮更徹底地實施不變性的庫。
let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mod總結
以上就是我們今天跟你分享的30個JavaScript代碼技巧，希望這些技巧能夠對你有所幫助。
責任編輯：華軒
來源：
web前端開發
