18個JavaScript技巧：編寫簡潔高效的代碼
作者：南城
在這篇文章中，我將分享18個JavaScript技巧，以及一些你應該知道的示例代碼，以編寫簡潔高效的代碼。
本文翻譯自 18 JavaScript Tips : You Should Know for Clean and Efficient Code，作者：Shefali， 略有刪改。
在這篇文章中，我將分享18個JavaScript技巧，以及一些你應該知道的示例代碼，以編寫簡潔高效的代碼。
讓我們開始吧！??
箭頭函數
可以使用箭頭函數來簡化函數聲明。
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;Array.from()
Array.from()方法可用于將任何可迭代對象轉換為數組。
const str = "Hello!";
const arr = Array.from(str);
console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']使用console.table顯示數據
如果您希望在控制臺中組織數據或以表格格式顯示數據，則可以使用console.table()。
const person = {
name: 'John',
age: 25,
profession: 'Programmer'
}
console.table(person);輸出效果：
圖片
使用const和let
對于不會被重新分配的變量使用const
const PI = 3.14;
let timer = 0;使用解構提取對象屬性
通過使用解構從對象中提取屬性，可以增強代碼的可讀性。
const person = {
name: 'John',
age: 25,
profession: 'Programmer'
}
//Instead of this ??
console.log(person.name);
console.log(person.age);
//Use this??
const {name, age} = person;
console.log(name);
console.log(age);使用邏輯OR運算符設置默認值
使用||操作符輕松設置默認值。
function greet(name) {
name = name || 'Person';
console.log(`Hello, ${name}!`);
}
greet(); //Output: Hello, Person!
greet("John"); //Output: Hello, John!清空數組
你可以使用length屬性輕松清空數組。
let numbers = [1, 2, 3, 4];
numbers.length = 0;
console.log(numbers); //Output: []JSON.parse()
使用JSON.parse()將JSON字符串轉換為JavaScript對象，這確保了無縫的數據操作。
const jsonStr = '{"name": "John", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person);
//Output: {name: 'John', age: 25}Map()函數
使用map()函數轉換新數組中的元素，而不修改原始數組。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(numbers); //Output: [1, 2, 3, 4]
console.log(doubled); //Output: [2, 4, 6, 8]Object.seal()
您可以使用Object.seal()方法來防止在對象中添加或刪除屬性。
const person = {
name: 'John',
age: 25
};
Object.seal(person);
person.profession = "Programmer";
console.log(person); //Output: {name: 'John', age: 25}Object.freeze()
您可以使用Object.freeze()方法來阻止對對象的任何更改，包括添加，修改或刪除屬性。
const person = {
name: 'John',
age: 25
};
Object.freeze(person);
person.name = "Mark";
console.log(person); //Output: {name: 'John', age: 25}刪除數組重復項
您可以使用Set從數組中刪除重復的元素。
const arrWithDuplicates = [1, 12, 2, 13, 4, 4, 13];
const arrWithoutDuplicates = [...new Set(arrWithDuplicates)];
console.log(arrWithoutDuplicates);
//Output: [1, 12, 2, 13, 4]使用解構交換值
你可以使用解構輕松地交換兩個變量。
let x = 7, y = 13;
[x, y] = [y, x];
console.log(x); //13擴展運算符
您可以使用擴展運算符有效地復制或合并數組。
const arr1 = [1, 2, 3];
const arr2 = [9, 8, 7];
const arr3 = [...arr2];
const mergedArr = [...arr1, ...arr2];
console.log(arr3); //[9, 8, 7]
console.log(mergedArr); //[1, 2, 3, 9, 8, 7]模板字符串
利用模板文字進行字符串插值并增強代碼可讀性。
const name = 'John';
const message = `Hello, ${name}!`;三元運算符
可以用三元運算符簡化條件語句。
const age = 20;
//Instead of this??
if(age>=18){
console.log("You can drive");
}else{
console.log("You cannot drive");
}
//Use this??
age >= 18 ? console.log("You can drive") : console.log("You cannot drive");使用===代替==
通過使用嚴格相等（===）而不是==來防止類型強制轉換問題。
const num1 = 5;
const num2 = '5';
//Instead of using ==
if (num1 == num2) {
console.log('True');
} else {
console.log('False');
}
//Use ===
if (num1 === num2) {
console.log('True');
} else {
console.log('False');
}使用語義化變量和函數名稱
為變量和函數使用有意義的描述性名稱，以增強代碼的可讀性和可維護性。
// Don't declare variable like this
const a = 18;
// use descriptive names
const numberOfTips = 18;今天的內容就到這里，希望對你有幫助。
責任編輯：武曉燕
來源：
南城大前端
