JavaScript簡寫優化方法
阿新 • • 發佈:2021-08-16
1、如果有多個條件
我們可以在陣列中儲存多個值,並且可以使用陣列 include 方法。
//優化前 if ( x === "abc" || x === "def" || x === "ghi" || x === "jkl" ) { //logic } //優化後 //Shorthand if (["abc", "def", "ghi", "jkl"].includes(x)) { //logic }
2、如果只有一個條件
這對於我們有if-else
條件,裡面不包含更大的邏輯時,是一個較大的捷徑。我們可以簡單的使用三元運算子來實現這個簡寫。
// 優化前 let test: boolean; if (x > 100) { test = true; } else { test = false; } // 優化後 let test = x > 10 ? true : false; //or we can use directly let test = x > 10;
3.宣告變數
當我們要宣告兩個具有共同值或共同型別的變數時,可以使用此簡寫形式。
//優化前 let test1; let test2 = 1; //優化後 let test1, test2 = 1;
4、null/undefined值檢查和分配預設值
let test1 = null, test2= test1 || ""; console.log("null check", test2); // output will be "" let test1 = undefined, test2 = test1 || ""; console.log("undefined check", test2); // output will be "" //正常值檢查 let test1 = "test", test2 = test1 || ""; console.log(test2); // output: 'test'
5.將值分配給多個變數
當我們處理多個變數並希望將不同的值分配給不同的變數時,可以用解構賦值此簡寫技術非常有用。
//優化前 let test1, test2, test3; test1 = 1; test2 = 2; test3 = 3; //優化後 let [test1, test2, test3] = [1, 2, 3];
6.賦值運算子簡寫
我們在程式設計中處理很多算術運算子,這是將運算子分配給 JavaScript 變數的有用技術之一。
// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// Shorthand
test1++;
test2--;
test3 *= 20;
7.用for...in與for...of
// Longhand for (var i = 0; i < testData.length; i++) // Shorthand for (let i in testData) or for (let i of testData)
8.箭頭函式
//Longhand function add(a, b) { return a + b; } //Shorthand const add = (a, b) => a + b;
9.短函式呼叫
我們可以使用三元運算子來實現這些功能
// Longhand function test1() { console.log("test1"); } function test2() { console.log("test2"); } var test3 = 1; if (test3 == 1) { test1(); } else { test2(); } // Shorthand (test3 === 1 ? test1 : test2)();
10.Switch 簡寫
// Longhand switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // And so on... } // Shorthand var data = { 1: test1, 2: test2, 3: test, }; data[something] && data[something]();
11.用解構簡寫
//longhand const test1 = this.data.test1; const test2 = this.data.test2; const test2 = this.data.test3; //shorthand const { test1, test2, test3 } = this.data;
12.Array.find
當我們確實有一個物件陣列並且我們想要根據物件屬性查詢特定物件時,find 方法確實很有用。
const data = [ { type: "test1", name: "abc", }, { type: "test2", name: "cde", }, { type: "test1", name: "fgh", }, ]; function findtest1(name) { for (let i = 0; i < data.length; ++i) { if (data[i].type === "test1" && data[i].name === name) { return data[i]; } } } //Shorthand filteredData = data.find( (data) => data.type === "test1" && data.name === "fgh" ); console.log(filteredData); // { type: 'test1', name: 'fgh' }
13.查詢條件簡寫
如果我們有程式碼來檢查型別,根據型別需要呼叫不同的方法,我們可以選擇使用多個 else ifs 或者 switch,但是如果我們有比這更好的簡寫方法呢?
// Longhand if (type === "test1") { test1(); } else if (type === "test2") { test2(); } else if (type === "test3") { test3(); } else if (type === "test4") { test4(); } else { throw new Error("Invalid value " + type); } // Shorthand var types = { test1: test1, test2: test2, test3: test3, test4: test4, }; var func = types[type]; !func && throw new Error("Invalid value " + type); func();