2021-11-13
您可能使用 JavaScript 很長(zhǎng)時(shí)間了，它的最新版本是 ES12。您可能正在使用它的一些功能，今天，我想重點(diǎn)介紹其中的一些功能，它們可能有助于您編寫更好、更清晰、更優(yōu)的 JavaScript 代碼。
如果左側(cè)為空或未定義，則此運(yùn)算符返回右側(cè)值。const data= null ?? 'data';console.log(data);// expected output: "data"const data1 = 1 ?? 4;console.log(data1);// expected output: 1
邏輯 OR (||) 運(yùn)算符執(zhí)行相同的操作，但是，當(dāng)將 0 作為值傳遞時(shí)，它將視為 false，這使得它容易用于數(shù)字。function add(a, b) { val1 = a || 1; val2 = b || 1; sum = val1 + val2; return sum;}
console.log(add(0, 0)); //output:2
當(dāng)我們使用 Nullish 運(yùn)算符時(shí)，同樣的事情function add1(a, b) { val1 = a ?? 1; val2 = b ?? 1; sum = val1 + val2; return sum;}
console.log(add1(0, 0)); //ouput:0
如果你想優(yōu)化你的 switch 語句，那么，這個(gè)語句會(huì)有所幫助。// Longhandswitch (data) { case 1: data1(); break; case 2: data2(); break; case 3: data(); break; // And so on...}// Shorthandvar data = { 1: data1, 2: data2, 3: data};const val = 1data[val]();function data1() { console.log("data1");}function data2() { console.log("data2");}function data() { console.log("data");}您是否厭倦了使用相同的控制臺(tái)？現(xiàn)在我們可以設(shè)計(jì)我們的控制臺(tái)。console.log(`%cabc`, 'font-weight:bold;color:red');
如果我們想避免一個(gè) if 語句，那么這個(gè)速記會(huì)很有幫助。//Longhand if (test1) { callMethod(); }//Shorthand test1 && callMethod();我們可以使用三元運(yùn)算符來實(shí)現(xiàn)這些功能。// Longhandfunction data1() { console.log('data1');};function data2() { console.log('data2');};var data3 = 1;if (data3 == 1) { data1();} else { data2();} //data1// Shorthand(data3 === 1 ? data1 : data2)(); //data1這將有助于避免大量代碼專門返回到基于返回語句的調(diào)用方法。// Longhandlet value;function returnMe() { if (!(value === undefined)) { return value; } else { return callFunction('value'); }}var data = returnMe();console.log(data); //output valuefunction callFunction(val) { console.log(val);}// Shorthandfunction returnMe() { return value || callFunction('value');}當(dāng)我們有 if-else 語句時(shí)，這會(huì)有所幫助（確保您有最多 2-3 個(gè) if...else 語句，因?yàn)槎嘤谶@些會(huì)降低代碼的可讀性）。// Longhandlet mychoice: boolean;if (money > 100) { mychoice= true;} else { mychoice= false;}// Shorthandlet mychoice= (money > 10) ? true : false;//or we can use directlylet mychoice= money > 10;console.log(mychoice);let salary = 300,checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(checking); // "greater than 100"
有時(shí)，訪問未定義的屬性會(huì)出錯(cuò)，我們需要為所有嵌套對(duì)象屬性添加空檢查?？梢允褂每蛇x鏈接來減少它。const data = { a: 1, b: 'atit', d: { test1: { test2: 'patel', }, },};console.log(data.val.test1); // here val is not present in object which leads the errorError: Cannot read properties of undefined (reading 'test1')console.log(data?.val); // using this we can check if the val is present in the data or not當(dāng)我們想從兩個(gè)字符串創(chuàng)建對(duì)象并保持與字符串相同的鍵時(shí)，可以使用這個(gè)技巧來完成。let data1 = 'abcd'; let data2 = 'efgh';//Longhand let data = {data1: data1, data2: data2};//Shorthand let data = {data1, data2};當(dāng) JavaScript 代碼量增加時(shí)，可能會(huì)導(dǎo)致瀏覽器必須等到所有腳本都執(zhí)行完后再加載 DOM，從而增加了等待時(shí)間。通過使用這個(gè)屬性，我們可以告訴瀏覽器不要等待腳本；相反，它將繼續(xù)構(gòu)建 DOM，并在后臺(tái)加載腳本。<p>heading before loads</p><script defer src="src/test.js"></script><p>heading after loads</p>
以上就是我今天與你分享的10個(gè)關(guān)于JavaScript 技巧的知識(shí)，希望能夠有助于您的代碼看起來更好，并幫助您在 JavaScript 中編寫更清晰的代碼。英文 | https://javascript./5-cool-javascript-features-you-might-not-know-about-yet-f2fc818bdd31
