JavaScript包含各種對典型編程思想有用的一些技巧，在實際開發中，我們通常希望減少代碼行數；因此，今天這些技巧代碼希望可以幫助到你。
現在我們就開始今天的內容吧。
1、與Javascript對象相關的
01)、對象解構
將對象的值解構為變量是另一種在傳統點表示法之外讀取其值的方法。
下面的示例比較了用于讀取對象值的經典點表示法和對象解構快捷方式。
const restaurant = {
name: "Classico Italiano",
menu: ["Garlic", "Bread", "Salad", "Pizza", "Pasta"],
openingHours: {
friday: { open: 11, close: 24 },
saturday: { open: 12, close: 23 },
},
};
// Longhand
console.log("value of friday in restaurant:", restaurant.openingHours.friday);
console.log("value of name in restaurant:", restaurant.name);
// Shorthand
const { name, openingHours } = restaurant;
const { openingHours: { friday } } = restaurant;
//we can go further and get the value of open in friday
const { openingHours: { friday: { open } } } = restaurant;
console.log(name, friday, open);02）、Object.entries()
Object.entries() 是 ES8 中引入的一項功能，它允許您將文字對象轉換為鍵/值對數組。
const credits = {
producer: "Open Replay",
editor: "Federico",
assistant: "John",
};
const arr = Object.entries(credits);
console.log(arr);
Output: [
["producer", "Open Replay"],
["editor", "Federico"],
["assistant", "John"],
];03）、Object.values()
Object.values() 也是 ES8 中引入的新特性，與 Object 具有類似的功能。entries() 但這沒有關鍵部分：
const credits = {
producer: "Open Replay",
editor: "Federico",
assistant: "John",
};
const arr = Object.values(credits);
console.log(arr);
Output: ["Open Replay", "Federico", "John"];04）、對象循環速記
傳統的 JavaScript for 循環語法是 for (let i = 0; i < x; i++) { … }。通過引用迭代器的數組長度，此循環語法可用于遍歷數組。共有三個 for 循環快捷方式，它們提供了用于遍歷數組中的對象的各種方法：
for…of 創建一個循環遍歷內置字符串、數組和類似數組的對象，甚至是 Nodelist
for...in 在記錄屬性名稱和值的字符串時訪問數組的索引和對象文字上的鍵。
Array.forEach 使用回調函數對數組元素及其索引執行操作
const arr = ["Yes", "No", "Maybe"];
// Longhand
for (let i = 0; i < arr.length; i++) {
console.log("Here is item: ", arr[i]);
}
// Shorthand
for (let str of arr) {
console.log("Here is item: ", str);
}
arr.forEach((str) => {
console.log("Here is item: ", str);
});
for (let index in arr) {
console.log(`Item at index ${index} is ${arr[index]}`);
}
// For object literals
const obj = { a: 1, b: 3, c: 5 };
for (let key in obj) {
console.log(`Value at key ${key} is ${obj[key]}`);
}
05）、對象屬性簡寫
在 JavaScript 中定義對象字面量讓生活變得更輕松。ES6 在為對象賦予屬性方面提供了更多的簡單性。如果變量名和對象鍵相同，則可以使用速記符號。
通過在對象字面量中聲明變量，您可以在 JavaScript 中快速將屬性分配給對象。為此，必須使用預期的鍵命名變量。這通常在您已經有一個與對象屬性同名的變量時使用。
const a = 1;
const b = 2;
const c = 3;
// Longhand
const obj = {
a: a,
b: b,
c: c,
};
// Shorthand
const obj = { a, b, c };
06）、Javascript For 循環
如果你想要簡單的 JavaScript 并且不想依賴第三方庫，這個小技巧很有用。
// Longhand:
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++) { /* something */ }
// Shorthand:
for (let fruit of fruits) { /* something */ }
如果您想訪問文字對象中的鍵，這也適用：
const obj = { continent: "Africa", country: "Ghana", city: "Accra" };
for (let key in obj) console.log(key); // output: continent, country, city07）、Array.forEach 的簡寫：
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 4, 6].forEach(logArrayElements);
// a[0] = 2
// a[1] = 4
// a[2] = 62、與Javascript數組相關的
01）、數組解構
ES6 的一個有趣的新增功能是解構賦值。解構是一種 JavaScript 表達式，可以將數組值或對象屬性分離到單獨的變量中。換句話說，我們可以通過從數組和對象中提取數據來將數據分配給變量。
const arr = [2, 3, 4];
// Longhand
const a = arr[0];
const b = arr[1];
const c = arr[2];
// Shorthand
const [a, b, c] = arr;
02）、Spread Operator
得益于 ES6 中引入的展開運算符，JavaScript 代碼使用起來更加高效和愉快。它可以代替特定的數組函數。展開運算符中有一系列的三個點，我們可以用它來連接和克隆數組。
const odd = [3, 5, 7];
const arr = [1, 2, 3, 4];
// Longhand
const nums = [2, 4, 6].concat(odd);
const arr2 = arr.slice();
// Shorthand
const nums = [2, 4, 6, ...odd];
const arr2 = [...arr];
與 concat() 函數不同，您可以使用擴展運算符將一個數組插入另一個數組中的任意位置。
const odd = [3, 5, 7];
const nums = [2, ...odd, 4, 6]; // 2 3 5 7 4 6
3、與Javascript字符串相關
01）、多行字符串
如果您曾經發現自己需要在代碼中編寫多行字符串，那么您可以這樣寫：
// Longhand
const lorem =
"Lorem, ipsum dolor sit amet" +
"consectetur adipisicing elit." +
" Quod eaque sint voluptatem aspernatur provident" +
"facere a dolorem consectetur illo reiciendis autem" +
"culpa eos itaque maxime quis iusto quisquam" +
"deserunt similique, dolores dolor repudiandae!" +
"Eaque, facere? Unde architecto ratione minus eaque" +
"accusamus, accusantium facere, sunt" +
"quia ex dolorem fuga, laboriosam atque.";
但是有一種更簡單的方法，只需使用反引號即可完成。
// Shorthand:
const lorem = `Lorem, ipsum dolor sit amet
consectetur adipisicing elit.
Quod eaque sint voluptatem aspernatur provident
facere a dolorem consectetur illo reiciendis autem
culpa eos itaque maxime quis iusto quisquam
deserunt similique, dolores dolor repudiandae!
Eaque, facere? Unde architecto ratione minus eaque
accusamus, accusantium facere, sunt
quia ex dolorem fuga, laboriosam atque.`;
02）、將字符串轉換為數字
您的代碼可能偶爾會收到必須以數字格式處理的字符串格式的數據。這不是一個大問題；我們可以快速轉換它。
// Longhand
const num1 = parseInt('1000');
const num2 = parseFloat('1000.01')
// Shorthand
const num1 = +'1000'; //converts to int datatype
const num2 = +'1000.01'; //converts to float data type
03）、模板文字
我們可以在不使用 (+) 的情況下將許多變量附加到字符串中。模板文字在這里派上用場。用反引號包裹你的字符串，用 ${ } 包裹你的變量，以利用模板文字。
const fullName = "Ama Johnson";
const job = "teacher";
const birthYear = 2000;
const year = 2025;
// Longhand
const Fullstr =
"I am " + fullName + ", a " + (year - birthYear) + " years old " + job + ".";
// Shorthand
const Fullstr = `I am ${fullName}, a ${year - birthYear} years old ${job}. `;
模板字面量為我們省去了許多使用 + 運算符連接字符串的麻煩。
4、與指數有關的
01）、指數冪速記
將第一個操作數乘以第二個操作數的冪的結果是求冪運算符 ** 返回的結果。它與 Math.pow 相同，只是 BigInts 也被接受為操作數。
// Longhand
Math.pow(2, 3); //8
Math.pow(2, 2); //4
Math.pow(4, 3); //64
// Shorthand
2 ** 3; //8
2 ** 4; //4
4 ** 3; //64
02）、十進制底指數
這個可能以前見過。本質上，這是一種寫整數的奇特方法，沒有最后的零。例如，表達式 1e8 表示 1 后跟八個零。它表示十進制基數 100,000,000，JavaScript 將其解釋為浮點類型。
// Longhand
for (let i = 0; i < 10000000; i++) { /* something */ }
// Shorthand
for (let i = 0; i < 1e7; i++) { /* something */ }
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
1e6 === 1000000;
1e7 === 10000000;
1e8 === 100000000;
5、其他操作的 JavaScript 簡寫?
01）、短路評估
短路評估也可以替代 if...else 子句。當變量的預期值為 false 時，此快捷方式使用邏輯或運算符 || 為變量提供默認值。
let str = "";
let finalStr;
// Longhand
if (str !== null && str !== undefined && str != "") {
finalStr = str;
} else {
finalStr = "default string";
}
// Shorthand
let finalStr = str || "default string"; // 'default string'
02）、默認參數
if 語句用于定義函數參數的默認值。在 ES6 中，您可以在函數聲明本身中定義默認值。如果沒有傳遞任何值或未定義，則默認函數參數允許使用默認值初始化參數。
以前都是在函數體中測試參數值，如果沒有定義就賦值。
默認情況下，JavaScript 中的函數參數是未定義的。然而，設置不同的默認設置通常是有利的。在這里，默認設置可能很有用。
// Longhand
function volume(a, b, c) {
if (b === undefined) b = 3;
if (c === undefined) c = 4;
return a * b * c;
}
// Shorthand
function volume(a, b = 3, c = 4) {
return a * b * c;
}
03）、隱式返回函數
我們經常使用關鍵字 return 來指示函數的最終輸出。單語句箭頭函數將隱式返回其計算結果（該函數必須省略方括號 {} 才能這樣做）。
對于多行語句，例如表達式，我們可以將返回表達式包裹在括號 () 中。
function capitalize(name) {
return name.toUpperCase();
}
function add(numG, numH) {
return numG + numH;
}
// Shorthand
const capitalize = (name) => name.toUpperCase();
const add = (numG, numH) => numG + numH;
// Shorthand TypeScript (specifying variable type)
const capitalize = (name: string) => name.toUpperCase();
const add = (numG: number, numH: number) => numG + numH;04）、聲明變量
在函數的開頭聲明變量賦值是個好主意。這種精簡方法可以幫助您在一次創建大量變量時節省大量時間和空間。
// Longhand
let x;
let y;
let z = 3;
// Shorthand
let x, y, z=3;
但是，請注意，出于易讀性考慮，許多人更喜歡用手寫方式聲明變量。
05）、可選鏈接
我們可以使用點表示法訪問對象的鍵或值。我們可以通過可選鏈接更進一步并讀取鍵或值，即使我們不確定它們是否存在或是否已設置。如果鍵不存在，則可選鏈接的值未定義。
下面是一個可選鏈的例子：
const restaurant = {
details: {
name: "Classico Italiano",
menu: ["Garlic", "Bread", "Salad", "Pizza"],
},
};
// Longhand
console.log(
"Name ",
restaurant.hasOwnProperty("details") &&
restaurant.details.hasOwnProperty("name") &&
restaurant.details.name
);
// Shorthand
console.log("Name:", restaurant.details?.name);06）、雙位非運算符
JavaScript 中的內置 Math 對象通常用于訪問數學函數和常量。一些函數提供了有用的技術，讓我們可以在不引用 Math 對象的情況下調用它們。
例如，我們可以通過使用兩次按位非運算符來獲得整數的 Math.floor() ~~。
const num = 7.5;
// Longhand
const floorNum = Math.floor(num); // 7
// Shorthand
const floorNum = ~~num; // 7
寫在最后
這些是已被證明的一項寶貴技巧，因為它簡潔明了，使編碼變得有趣并且代碼行易于記憶。但是請記住，它們的使用不能以犧牲代碼的其他方面為代價。如果您覺得我今天分享的內容有用的話，請點贊我，關注我，并將它分享給你的朋友，也許能夠幫助到他。
