JavaScript包含各種對(duì)典型編程思想有用的一些技巧，在實(shí)際開發(fā)中，我們通常希望減少代碼行數(shù)；因此，今天這些技巧代碼希望可以幫助到你。
現(xiàn)在我們就開始今天的內(nèi)容吧。
1、與Javascript對(duì)象相關(guān)的
01)、對(duì)象解構(gòu)
將對(duì)象的值解構(gòu)為變量是另一種在傳統(tǒng)點(diǎn)表示法之外讀取其值的方法。
下面的示例比較了用于讀取對(duì)象值的經(jīng)典點(diǎn)表示法和對(duì)象解構(gòu)快捷方式。
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 中引入的一項(xiàng)功能，它允許您將文字對(duì)象轉(zhuǎn)換為鍵/值對(duì)數(shù)組。
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() 但這沒有關(guān)鍵部分：
const credits = {
producer: "Open Replay",
editor: "Federico",
assistant: "John",
};
const arr = Object.values(credits);
console.log(arr);
Output: ["Open Replay", "Federico", "John"];04）、對(duì)象循環(huán)速記
傳統(tǒng)的 JavaScript for 循環(huán)語法是 for (let i = 0; i < x; i++) { … }。通過引用迭代器的數(shù)組長度，此循環(huán)語法可用于遍歷數(shù)組。共有三個(gè) for 循環(huán)快捷方式，它們提供了用于遍歷數(shù)組中的對(duì)象的各種方法：
for…of 創(chuàng)建一個(gè)循環(huán)遍歷內(nèi)置字符串、數(shù)組和類似數(shù)組的對(duì)象，甚至是 Nodelist
for...in 在記錄屬性名稱和值的字符串時(shí)訪問數(shù)組的索引和對(duì)象文字上的鍵。
Array.forEach 使用回調(diào)函數(shù)對(duì)數(shù)組元素及其索引執(zhí)行操作
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）、對(duì)象屬性簡寫
在 JavaScript 中定義對(duì)象字面量讓生活變得更輕松。ES6 在為對(duì)象賦予屬性方面提供了更多的簡單性。如果變量名和對(duì)象鍵相同，則可以使用速記符號(hào)。
通過在對(duì)象字面量中聲明變量，您可以在 JavaScript 中快速將屬性分配給對(duì)象。為此，必須使用預(yù)期的鍵命名變量。這通常在您已經(jīng)有一個(gè)與對(duì)象屬性同名的變量時(shí)使用。
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 循環(huán)
如果你想要簡單的 JavaScript 并且不想依賴第三方庫，這個(gè)小技巧很有用。
// Longhand:
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++) { /* something */ }
// Shorthand:
for (let fruit of fruits) { /* something */ }
如果您想訪問文字對(duì)象中的鍵，這也適用：
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數(shù)組相關(guān)的
01）、數(shù)組解構(gòu)
ES6 的一個(gè)有趣的新增功能是解構(gòu)賦值。解構(gòu)是一種 JavaScript 表達(dá)式，可以將數(shù)組值或?qū)ο髮傩苑蛛x到單獨(dú)的變量中。換句話說，我們可以通過從數(shù)組和對(duì)象中提取數(shù)據(jù)來將數(shù)據(jù)分配給變量。
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 中引入的展開運(yùn)算符，JavaScript 代碼使用起來更加高效和愉快。它可以代替特定的數(shù)組函數(shù)。展開運(yùn)算符中有一系列的三個(gè)點(diǎn)，我們可以用它來連接和克隆數(shù)組。
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() 函數(shù)不同，您可以使用擴(kuò)展運(yùn)算符將一個(gè)數(shù)組插入另一個(gè)數(shù)組中的任意位置。
const odd = [3, 5, 7];
const nums = [2, ...odd, 4, 6]; // 2 3 5 7 4 6
3、與Javascript字符串相關(guān)
01）、多行字符串
如果您曾經(jīng)發(fā)現(xiàn)自己需要在代碼中編寫多行字符串，那么您可以這樣寫：
// 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.";
但是有一種更簡單的方法，只需使用反引號(hào)即可完成。
// 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）、將字符串轉(zhuǎn)換為數(shù)字
您的代碼可能偶爾會(huì)收到必須以數(shù)字格式處理的字符串格式的數(shù)據(jù)。這不是一個(gè)大問題；我們可以快速轉(zhuǎn)換它。
// 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）、模板文字
我們可以在不使用 (+) 的情況下將許多變量附加到字符串中。模板文字在這里派上用場。用反引號(hào)包裹你的字符串，用 ${ } 包裹你的變量，以利用模板文字。
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}. `;
模板字面量為我們省去了許多使用 + 運(yùn)算符連接字符串的麻煩。
4、與指數(shù)有關(guān)的
01）、指數(shù)冪速記
將第一個(gè)操作數(shù)乘以第二個(gè)操作數(shù)的冪的結(jié)果是求冪運(yùn)算符 ** 返回的結(jié)果。它與 Math.pow 相同，只是 BigInts 也被接受為操作數(shù)。
// 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）、十進(jìn)制底指數(shù)
這個(gè)可能以前見過。本質(zhì)上，這是一種寫整數(shù)的奇特方法，沒有最后的零。例如，表達(dá)式 1e8 表示 1 后跟八個(gè)零。它表示十進(jìn)制基數(shù) 100,000,000，JavaScript 將其解釋為浮點(diǎn)類型。
// 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）、短路評(píng)估
短路評(píng)估也可以替代 if...else 子句。當(dāng)變量的預(yù)期值為 false 時(shí)，此快捷方式使用邏輯或運(yùn)算符 || 為變量提供默認(rèn)值。
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）、默認(rèn)參數(shù)
if 語句用于定義函數(shù)參數(shù)的默認(rèn)值。在 ES6 中，您可以在函數(shù)聲明本身中定義默認(rèn)值。如果沒有傳遞任何值或未定義，則默認(rèn)函數(shù)參數(shù)允許使用默認(rèn)值初始化參數(shù)。
以前都是在函數(shù)體中測(cè)試參數(shù)值，如果沒有定義就賦值。
默認(rèn)情況下，JavaScript 中的函數(shù)參數(shù)是未定義的。然而，設(shè)置不同的默認(rèn)設(shè)置通常是有利的。在這里，默認(rèn)設(shè)置可能很有用。
// 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）、隱式返回函數(shù)
我們經(jīng)常使用關(guān)鍵字 return 來指示函數(shù)的最終輸出。單語句箭頭函數(shù)將隱式返回其計(jì)算結(jié)果（該函數(shù)必須省略方括號(hào) {} 才能這樣做）。
對(duì)于多行語句，例如表達(dá)式，我們可以將返回表達(dá)式包裹在括號(hào) () 中。
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）、聲明變量
在函數(shù)的開頭聲明變量賦值是個(gè)好主意。這種精簡方法可以幫助您在一次創(chuàng)建大量變量時(shí)節(jié)省大量時(shí)間和空間。
// Longhand
let x;
let y;
let z = 3;
// Shorthand
let x, y, z=3;
但是，請(qǐng)注意，出于易讀性考慮，許多人更喜歡用手寫方式聲明變量。
05）、可選鏈接
我們可以使用點(diǎn)表示法訪問對(duì)象的鍵或值。我們可以通過可選鏈接更進(jìn)一步并讀取鍵或值，即使我們不確定它們是否存在或是否已設(shè)置。如果鍵不存在，則可選鏈接的值未定義。
下面是一個(gè)可選鏈的例子：
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）、雙位非運(yùn)算符
JavaScript 中的內(nèi)置 Math 對(duì)象通常用于訪問數(shù)學(xué)函數(shù)和常量。一些函數(shù)提供了有用的技術(shù)，讓我們可以在不引用 Math 對(duì)象的情況下調(diào)用它們。
例如，我們可以通過使用兩次按位非運(yùn)算符來獲得整數(shù)的 Math.floor() ~~。
const num = 7.5;
// Longhand
const floorNum = Math.floor(num); // 7
// Shorthand
const floorNum = ~~num; // 7
寫在最后
這些是已被證明的一項(xiàng)寶貴技巧，因?yàn)樗啙嵜髁耍咕幋a變得有趣并且代碼行易于記憶。但是請(qǐng)記住，它們的使用不能以犧牲代碼的其他方面為代價(jià)。如果您覺得我今天分享的內(nèi)容有用的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你的朋友，也許能夠幫助到他。
