免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
10 個(gè)你可能還不知道的很酷JavaScript特性

WEB前端開發(fā)社區(qū)

 2021-11-13

您可能使用 JavaScript 很長(zhǎng)時(shí)間了,它的最新版本是 ES12。您可能正在使用它的一些功能,今天,我想重點(diǎn)介紹其中的一些功能,它們可能有助于您編寫更好、更清晰、更優(yōu)的 JavaScript 代碼。
1、空運(yùn)算符
如果左側(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
2、Switch 語(yǔ)句優(yōu)化
如果你想優(yōu)化你的 switch 語(yǔ)句,那么,這個(gè)語(yǔ)句會(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");}
3、控制臺(tái)樣式
您是否厭倦了使用相同的控制臺(tái)?現(xiàn)在我們可以設(shè)計(jì)我們的控制臺(tái)。
console.log(`%cabc`, 'font-weight:bold;color:red');
4、AND (&&) 運(yùn)算符
如果我們想避免一個(gè) if 語(yǔ)句,那么這個(gè)速記會(huì)很有幫助。
//Longhand if (test1) { callMethod(); }//Shorthand test1 && callMethod();
5、短函數(shù)調(diào)用
我們可以使用三元運(yùn)算符來(lái)實(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
6、返回簡(jiǎn)寫
這將有助于避免大量代碼專門返回到基于返回語(yǔ)句的調(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');}
7、 If... else 簡(jiǎn)寫
當(dāng)我們有 if-else 語(yǔ)句時(shí),這會(huì)有所幫助(確保您有最多 2-3 個(gè) if...else 語(yǔ)句,因?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"
8、可選鏈
有時(shí),訪問未定義的屬性會(huì)出錯(cuò),我們需要為所有嵌套對(duì)象屬性添加空檢查。可以使用可選鏈接來(lái)減少它。
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
9、對(duì)象屬性賦值
當(dāng)我們想從兩個(gè)字符串創(chuàng)建對(duì)象并保持與字符串相同的鍵時(shí),可以使用這個(gè)技巧來(lái)完成。
let data1 = 'abcd'; let data2 = 'efgh';//Longhand let data = {data1: data1, data2: data2};//Shorthand let data = {data1, data2};
10、延遲
當(dāng) JavaScript 代碼量增加時(shí),可能會(huì)導(dǎo)致瀏覽器必須等到所有腳本都執(zhí)行完后再加載 DOM,從而增加了等待時(shí)間。
通過(guò)使用這個(gè)屬性,我們可以告訴瀏覽器不要等待腳本;相反,它將繼續(xù)構(gòu)建 DOM,并在后臺(tái)加載腳本。
<p>heading before loads</p><script defer src="src/test.js"></script><p>heading after loads</p>
總結(jié)
以上就是我今天與你分享的10個(gè)關(guān)于JavaScript 技巧的知識(shí),希望能夠有助于您的代碼看起來(lái)更好,并幫助您在 JavaScript 中編寫更清晰的代碼。
英文 | https://javascript.plainenglish.io/5-cool-javascript-features-you-might-not-know-about-yet-f2fc818bdd31
翻譯 | 楊小愛
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
一文帶你解讀?JavaScript的基本用法
【JavaScript 教程】入門篇-JavaScript 的基本語(yǔ)法
JavaScript中的運(yùn)算符和語(yǔ)句
JavaScript的簡(jiǎn)介與語(yǔ)法大合集
Nice!JavaScript基礎(chǔ)語(yǔ)法知識(shí)都在這兒了
初學(xué)者學(xué)習(xí) JavaScript – JS 基礎(chǔ)知識(shí)手冊(cè)正式版
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服