摘要:極大的簡(jiǎn)化了代碼量變量聲明盡管會(huì)自動(dòng)講變量上提,使用該方法可以講所有的變量都在函數(shù)的頭部用一行搞定。簡(jiǎn)化前簡(jiǎn)化后譯者譯文原文
微信公眾號(hào) 個(gè)人博客 知乎
本文是并非本人所寫(xiě),只是我看了覺(jué)得對(duì)自己很有幫助,所以分享給大家,原文鏈接在最下面,謝謝觀看。
1. 空(null, undefined)驗(yàn)證
當(dāng)我們創(chuàng)建了一個(gè)新的變量,我們通常會(huì)去驗(yàn)證該變量的值是否為空(null)或者未定義(undefined)。這對(duì)于JavaScript編程來(lái)說(shuō),是一個(gè)經(jīng)常要考慮到的驗(yàn)證。
如果直接寫(xiě),像下面這樣:
if (variable1 !== null || variable1 !== undefined || variable1 !== ""){ let variable2 = variable1; }
我們可以使用一個(gè)更加簡(jiǎn)潔的版本
let variable2 = variable1 || "";
如果你不信,可以在谷歌瀏覽器開(kāi)發(fā)者模式下的控制臺(tái)中試試!
//值為null的例子 let variable1 = null; let variable2 = variable1 || ""; console.log(variable2); //輸出: "" //值為undefined的例子 let variable1 = undefined; let variable2 = variable1 || ""; console.log(variable2); //輸出: "" //正常情況 let variable1 = "hi there"; let variable2 = variable1 || ""; console.log(variable2); //輸出: "hi there"
在這里要注意的是,你在調(diào)試完一組代碼后要刷新下頁(yè)面,或者定義不同的變量,不然會(huì)報(bào)錯(cuò):
修改:有讀者評(píng)論應(yīng)該加上0和false,我也去運(yùn)行了,的確應(yīng)該加上,但這邊原作者寫(xiě)的標(biāo)題是null和undefined的鑒定,或許是因?yàn)檫@樣才沒(méi)加上去。那我在這邊就自己修改一下:
if (variable1 !== null || variable1 !== undefined || variable1 !== "" || variable1 !== 0 || variable1 !== false){ let variable2 = variable1; }
簡(jiǎn)化后
let variable2 = variable1 || "";
2. 數(shù)組
這個(gè)好像比較簡(jiǎn)單!
非優(yōu)化代碼:
let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
優(yōu)化代碼:
let a = ["myString1", "myString2", "myString3"];
3. if true .. else 的優(yōu)化
let big; if (x > 10) { big = true; } else { big = false; }
簡(jiǎn)化后:
let big = x > 10 ? true : false;
這是三目運(yùn)算,當(dāng)判斷條件和結(jié)果都只有一個(gè)的時(shí)候可以使用。
極大的簡(jiǎn)化了代碼量!
let big = (x > 10); let x = 3, big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10"; console.log(big); //"less 5" let x = 20, big = {true: x>10, false : x< =10}; console.log(big); //"Object {true=true, false=false}"
4. 變量聲明
盡管JavaScript會(huì)自動(dòng)講變量上提(hoist),使用該方法可以講所有的變量都在函數(shù)的頭部用一行搞定。
優(yōu)化錢:
let x; let y; let z = 3;
優(yōu)化后:
let x, y, z=3;
5. 賦值語(yǔ)句的簡(jiǎn)化
簡(jiǎn)化前:
x=x+1; minusCount = minusCount - 1; y=y*10;
簡(jiǎn)化后:
x++; minusCount --; y*=10;
假設(shè)x=10,y=5,那么基本的算術(shù)操作可以使用如下的簡(jiǎn)寫(xiě)方式:
x += y // x=15 x -= y // x=5 x *= y // x=50 x /= y // x=2 x %= y // x=0
6. 避免使用RegExp對(duì)象
簡(jiǎn)化前:
var re = new RegExp("d+(.)+d+","igm"), result = re.exrc("padding 01234 text text 56789 padding"); console.log(result);//"01234 text text 56789"
簡(jiǎn)化后:
var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding"); console.log(result); //"01234 text text 56789"
7. If 條件優(yōu)化
簡(jiǎn)化前:
if (likeJavaScript === true)
簡(jiǎn)化后:
if (likeJavaScript)
我們?cè)賮?lái)個(gè)判斷非真的例子:
let c; if ( c!= true ) { // do something... }
簡(jiǎn)化后:
let c; if ( !c ) { // do something... }
9. 函數(shù)參數(shù)優(yōu)化
我個(gè)人傾向于使用獲取對(duì)象元素的方式來(lái)訪問(wèn)函數(shù)參數(shù),當(dāng)然這個(gè)見(jiàn)仁見(jiàn)智啦!
通常使用的版本:
function myFunction( myString, myNumber, myObject, myArray, myBoolean ) { // do something... } myFunction( "String", 1, [], {}, true );
我喜歡的版本:
function myFunction() { /* 注釋部分 console.log( arguments.length ); // 返回 5 for ( i = 0; i < arguments.length; i++ ) { console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean } */ } myFunction( "String", 1, [], {}, true );
譯者注:原文下方有評(píng)論表示不建議用樓主的方法,使用第一種方法函數(shù)參數(shù)的順序是可以變動(dòng)的,第二種你就要小心了。
10. charAt()的替代品
簡(jiǎn)化前:
"myString".charAt(0);
簡(jiǎn)化后:
"myString"[0];//返回"m"
譯者注:我相信用第一種方法的人已經(jīng)不多了吧!
11. 函數(shù)調(diào)用還可以更短
簡(jiǎn)化前:
function x() {console.log("x")};function y() {console.log("y")}; let z = 3; if (z == 3) { x(); } else { y(); }
簡(jiǎn)化后:
function x() {console.log("x")};function y() {console.log("y")};let z = 3; (z==3?x:y)();
12. 如何優(yōu)雅的表示大數(shù)字
在JavaScript中,有一個(gè)簡(jiǎn)寫(xiě)數(shù)字的方法,也許你忽略了。1e7表示10000000。
簡(jiǎn)化前:
for (let i = 0; i < 10000; i++) {
簡(jiǎn)化后:
for (let i = 0; i < 1e7; i++) {
譯者:Fundebug
譯文:http://www.cnblogs.com/fundeb...
原文:https://hackernoon.com/12-ama...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/87199.html
摘要:因?yàn)樵谒械那闆r下,響應(yīng)式都不是唯一需要考慮的問(wèn)題合理使用簡(jiǎn)寫(xiě)工作組可能會(huì)在未來(lái)引入更多的展開(kāi)式屬性合理使用簡(jiǎn)寫(xiě)是一種良好的防衛(wèi)性編碼方式,可以抵御未來(lái)的風(fēng)險(xiǎn)。試試用預(yù)處理器能否做到 1、在增強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)效果時(shí),應(yīng)該使用生成性內(nèi)容,而不是依賴冗余的標(biāo)簽和圖片。2、要把表單元素的字體設(shè)定為與頁(yè)面的其他部分相同,你并不需要重復(fù)指定字體屬性,只需利用 inherit 的特性即可3、利用 CSS...
摘要:因?yàn)樵谒械那闆r下,響應(yīng)式都不是唯一需要考慮的問(wèn)題合理使用簡(jiǎn)寫(xiě)工作組可能會(huì)在未來(lái)引入更多的展開(kāi)式屬性合理使用簡(jiǎn)寫(xiě)是一種良好的防衛(wèi)性編碼方式,可以抵御未來(lái)的風(fēng)險(xiǎn)。試試用預(yù)處理器能否做到 1、在增強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)效果時(shí),應(yīng)該使用生成性內(nèi)容,而不是依賴冗余的標(biāo)簽和圖片。2、要把表單元素的字體設(shè)定為與頁(yè)面的其他部分相同,你并不需要重復(fù)指定字體屬性,只需利用 inherit 的特性即可3、利用 CSS...
摘要:各種各樣的編碼錯(cuò)誤可能會(huì)導(dǎo)致網(wǎng)站加載速度非常慢,從而用戶離開(kāi)的網(wǎng)站。同時(shí)提高網(wǎng)站加載速度也是提高網(wǎng)站排名的必要步驟之一。 翻譯:瘋狂的技術(shù)宅原文:https://likegeeks.com/improve... 為你網(wǎng)站的用戶留下良好的第一印象是非常必要的。隨著商業(yè)領(lǐng)域的競(jìng)爭(zhēng),擁有一個(gè)吸引人的網(wǎng)站可以幫助你脫穎而出。研究表明,如果加載時(shí)間超過(guò)3秒,會(huì)有 40% 的用戶放棄訪問(wèn)你的網(wǎng)站...
摘要:本文列舉了一些日常會(huì)使用到的技巧,可以明顯提升代碼的表現(xiàn)力。看出問(wèn)題來(lái)了吧被聲明了兩次,這是不允許的,此時(shí),我們可以在聲明時(shí),為兩個(gè)指定不同的名稱輸出輸出數(shù)組的解構(gòu)中同樣支持重命名。 本文列舉了一些日常會(huì)使用到的 Javascript技巧,可以明顯提升代碼的表現(xiàn)力。 解構(gòu)賦值 首先,我們來(lái)看一下下面這段代碼: const animal = { type: { mammal:...
閱讀 2650·2021-11-25 09:43
閱讀 670·2021-11-12 10:36
閱讀 4615·2021-11-08 13:18
閱讀 2168·2021-09-06 15:00
閱讀 3106·2019-08-30 15:56
閱讀 924·2019-08-30 13:57
閱讀 1985·2019-08-30 13:48
閱讀 1413·2019-08-30 11:13