你對 JavaScript 了解多少？您知道如何充分發揮其潛力并避免常見的陷阱嗎？您知道如何編寫易于閱讀、維護和調試的代碼嗎？你知道如何使用 JavaScript 最新最酷的特性嗎？
如果您想提高 JavaScript 技能并成為更好的開發人員，那么本文適合您。本文將教您 11 個專業技巧，幫助您編寫更好的 JavaScript 代碼，你還在等什么？一起來學習吧。
1. 使用 XOR 運算符比較數字
按位異或運算符 (^) 對兩個操作數執行按位異或運算。這意味著如果位不同則返回 1，如果相同則返回 0。
const a = 1337;
const b = 69;
// nooby
a !== 69 ? console.log('Unequal') : console.log("Equal"); // Unequal
b !== 69 ? console.log('Unequal') : console.log("Equal"); // Equal
// pro
a ^ 69 ? console.log('Unequal') : console.log("Equal"); // Unequal
b ^ 69 ? console.log('Unequal') : console.log("Equal"); // Equal
2. 用數據即時創建和填充數組
// nooby
const array = new Array(3);
for(let i=0; i < array.length; i++){
array[i] = i;
}
console.log(array) // [ 0, 1, 2 ]
// pro
const filledArray = new Array(3).fill(null).map((_, i)=> (i));
console.log(filledArray) // [ 0, 1, 2 ]
3. 使用對象中的動態屬性
// nooby
let propertyName = "body";
let paragraph = {
id: 1,
};
paragraph[propertyName] = "other stringy";
// { id: 1, body: 'other stringy' }
console.log(paragraph)
// pro
let propertyName = "body";
let paragraph = {
id: 1,
[propertyName] : "other stringy"
};
// { id: 1, body: 'other stringy' }
console.log(paragraph)
4. 輕松消除數組中的重復值
您可以使用集合消除數組中的重復值。
// nooby
let answers = [7, 13, 31, 13, 31, 7, 42];
let leftAnswers = [];
let flag = false;
for (i = 0; i< answers.length; i++) {
for (j = 0; j < leftAnswers.length; j++) {
if (answers[i] === leftAnswers[j]) {
flag = true;
}
}
if (flag === false) {
leftAnswers.push(answers[i]);
}
flag = false;
}
//[ 7, 13, 31, 42 ]
console.log(leftAnswers)
// pro
let answers = [7, 13, 31, 13, 31, 7, 42];
let leftAnswers = Array.from(new Set(answers));
// [ 7, 13, 31, 42 ]
console.log(leftAnswers)
5. 輕松地將對象轉換為數組
您可以使用展開運算符將數組轉換為對象。
// nooby
let arr = ["v1", "v2", "v3"];
let objFromArray = {};
for (let i = 0; i < arr.length; ++i) {
if (arr[i] !== undefined) {
objFromArray[i] = arr[i];
}
}
// { '0': 'v1', '1': 'v2', '2': 'v3' }
console.log(objFromArray)
// pro
let objFromArrayPro = {...arr};
// { '0': 'v1', '1': 'v2', '2': 'v3' }
console.log(objFromArrayPro)
6. 使用邏輯運算符進行短路評估
您可以使用邏輯運算符進行短路評估，方法是使用 && 運算符返回表達式鏈中的第一個假值或最后一個真值，或者使用 || 運算符返回表達式鏈中的第一個真值或最后一個假值。
const dogs = true;
// nooby
if (dogs) {
runAway();
}
// pro
dogs && runAway()
function runAway(){
console.log('You run!');
}
7. 對象鍵維護它們的插入順序
對象鍵通過遵循一個簡單的規則來維護它們的插入順序：類整數鍵按數字升序排序，而非類整數鍵根據它們的創建時間排序。
const character = {
name: "Arthas",
age: 27,
class: "Paladin",
profession: "Lichking",
};
// name age class profession
console.log(Object.keys(character));8. 創建并填充指定大小的數組
您可以使用帶有兩個參數的 Array() 構造函數來創建和填充指定大小和值的數組：大小和值，或者對空數組使用 Array.fill() 方法。
// nooby
const size = 5;
const defaultValue = 0;
const arr = []
for(let i = 0; i < size; i++){
arr.push(defaultValue)
}
console.log(arr);
// pro
const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]
9. 理解 JavaScript 中的 Truthy 和 Falsy 值
在布爾上下文中使用時，Truthy 和 Falsy 值會隱式轉換為 true 或 false。
虛假值 => false, 0, ""(空字符串), null, undefined, &NaN
真值 => "Values", "0", {}（空對象），&[]（空數組）
// pro
if(![].length){
console.log("There is no Array...");
} else {
console.log("There is an Array, Hooray!");
}
if(!""){
console.log("There is no content in this string...");
} else {
console.log("There is content in this string, Hooray!");
}
10. 用更好的參數改進函數
不要使用單個多個參數，而是使用參數對象。在函數定義中解構它以獲得所需的屬性。
// nooby
function upload(user, resourceId, auth, files) {}
upload(...); // need to remember the order
// pro
function upload(
{ user, resourceId, auth, files } = {}
) {}
const uploadObj = {
user: 'me',
resourceId: uuid(),
auth: 'token',
files: []
}
upload(uploadObj);
11. Null 和 Undefined 在 JavaScript 中是不同的
Null 和 undefined 是兩個不同的值，表示沒有值。
- null => 是的，這是一個值。Undefined 不是
- 將 null 想象成在一個空盒子前面
- 把 undefined 想象成在沒有盒子的前面
const fnExpression = (s = 'default stringy') => console.log(s);
fnExpression(undefined); // default stringy
fnExpression(); // default stringy
fnExpression(null); // null
總結
以上就是我今天想與您分享的11個關于JavaScript的專業技巧，希望您能從中學到新東西。
