JavaScript 之銀彈の技法

HollisChuang 發(fā)布于2019-08-20 19:04 / 1072人閱讀

摘要：之銀彈技法下文這些淫巧在之前自認(rèn)為是居家必備，裝逼撩妹的必備之物，博主一直敝帚自珍，不愿拿出來分享，現(xiàn)如今，極盡能事，我知道再不拿出來就在沒有價(jià)值了來由博主入行前端寫時(shí)候，因?yàn)樾枰嫒莸桶姹荆瑫r(shí)常需要在繁雜冗長(zhǎng)的操作夾雜的代碼中，盡可能巧妙

JavaScript 之銀彈の技法

下文這些淫巧在之前自認(rèn)為是居家必備，裝逼撩妹的必備之物，博主一直敝帚自珍，不愿拿出來分享，現(xiàn)如今，ES6+極盡能事，我知道再不拿出來就在沒有價(jià)值了?

來由

博主入行前端寫JavaScript時(shí)候，因?yàn)樾枰嫒軮E低版本，時(shí)常需要在繁雜冗長(zhǎng)的DOM操作夾雜的代碼中，盡可能巧妙地節(jié)省代碼了，保持代碼清潔和逼格，久而久之，在維護(hù)前輩舊代碼和新功能開發(fā)時(shí)積累了一套代碼書寫的奇技淫巧，你也可以把它看作是抖機(jī)靈，不過它的確是豐盈了我的codeの時(shí)光，讓我們不至?xí)鴮憳I(yè)務(wù)那么枯燥。

1. 取整

2. 多行字符串

3. 快速輸出重復(fù)字符串

4. 用switch case代替if else

5. 截取數(shù)組

6. 獲取數(shù)組中的最大值和最小值

7. 日期轉(zhuǎn)數(shù)字

8. 用 && || ?: , 節(jié)省代碼行數(shù)

9. 隱式轉(zhuǎn)換

10. 利用對(duì)象數(shù)組取值、方法

11. 匿名函數(shù)的N種寫法

1. 取整（任性指數(shù)： ??????????）

var a = ~~1.2; //1

還可以用位右移符>>

var a = 3.4>>0; //3

簡(jiǎn)單解釋，~是按位取反的運(yùn)算符，可以將浮點(diǎn)數(shù)通過舍去小數(shù)點(diǎn)后面的所有位來轉(zhuǎn)換為整數(shù)。

注意：如果需要做嚴(yán)格的四舍五入運(yùn)算就要慎用此方法，那就還是得用Math函數(shù)

2. 多行字符串（銀彈指數(shù)： ????????）

var temp1 = "" +
    "" +
    "<%=data%>" +
    "
";

這樣一段多行的js字符串我們一般通過行尾+字符串來實(shí)現(xiàn)連接，這樣的寫法既不好看，不容易維護(hù)，代碼量又多，當(dāng)然我們知道ES6的字符串模版可以輕松實(shí)現(xiàn)優(yōu)雅寫法：

const temp2 = `

    
        <%=data%>
    
`;

想知道在遠(yuǎn)古時(shí)代，我們智慧的勞動(dòng)人民刀耕火種這樣寫：

var temp3 = "
    
    <%=data%>
    
 
";

3. 快速輸出重復(fù)字符串（腦洞指數(shù)： ??????????）

我們笨辦法是

for (var i = 0, temp = ""; i < 200; i++, temp += "leo");
console.log(temp)

在ES6+寫法中我們使用 "leo".repeat（200）"

在以前我們可以這樣抖機(jī)靈：

var temp = Array(201).join("leo");

經(jīng)過提醒，此處用該把200換成了201。

4. 用switch case代替if else（腦洞指數(shù)： ????????）

這種代替可能會(huì)讓第一次看到的你覺得腦洞大開：這樣玩也行？對(duì)的，case后面跟上Boolean判斷而不是具體值。

switch (true) {
    case (a > 10):
        do_something();
        break;
    case (a < 100):
        others();
        break;
    default:
        break;
}

5. 截取數(shù)組（奇葩指數(shù)： ??????）

var arr = [1,2,3,4,5,6];
arr = arr.slice(0,3);

我們可以利用length在這種情況

var arr = [1,2,3,4,5,6];
arr.length=3;

6. 獲取數(shù)組中的最大值和最小值（實(shí)用指數(shù)： ????????）

var numbers = [ 5, 458, 120, -215, 228, 400, 122205, -85411 ];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);

7. 日期轉(zhuǎn)數(shù)字（銀彈指數(shù)： ??????）

var time1 = new Date().getTime();

我們可以這樣

var time2 = + new Date();

8. 用 && || ?: , 節(jié)省代碼行數(shù) （用多了會(huì)被打指數(shù)： ??????????）

在我們代碼簡(jiǎn)短的判斷邏輯，我們經(jīng)常會(huì)使用運(yùn)算符去實(shí)現(xiàn)，用if else反而顯得不簡(jiǎn)潔，特別注意用,可以把多個(gè)短句合成一句。

data = {
        currpage: (obj.role == 4 || obj.role == 7) ? ++_this.curpage_store : ++_this.curpage_agent,
        ajaxType: "GET"
}


!localData[type][number] && (localData[type][number] = data, localStorage.setItem(this.jobid, JSON.stringify(localData)));

!$allCity.hasClass("active") ?
            ($(this).addClass("active"), $allCity.addClass("active"), lastPos = xk_www.$bd.scrollTop()) :
            ($(this).removeClass("active"), $allCity.removeClass("active"), lastPos != null && xk_www.$bd.animate({
                scrollTop: lastPos
            }));

9. 隱式轉(zhuǎn)換（實(shí)用指數(shù)： ??????????）

data.isDeep == ‘0’;    // 有時(shí)候返回的deep可能為0可能為“0”
data.isDeep > 0 ;
...

合理優(yōu)雅的運(yùn)用JavaScript的弱類型特點(diǎn)的靈活性，可以在很多時(shí)候巧妙地做到節(jié)省代碼量，如果我們很好掌握隱式轉(zhuǎn)換，比如在很多時(shí)候我們用==反而比===更得心應(yīng)手，用>的布爾比較反而比嚴(yán)格的類型檢查和值比較更快捷。

10. 利用對(duì)象數(shù)組取值、方法（實(shí)用指數(shù)： ????????）

const config={
    1:"周一",
    2:"周二",
    3:"周三",
    4:"周四",
    5:"周五",
    6:"周六",
    7:"周日",
};
config[1];

const doSomething={
    a(){
        ...
    }
    b(){
        ...
    }
    c(){
        ...
    }
    d(){
        ...
    }
}
doSomething("a");

11. 匿名函數(shù)的N種寫法（漲姿勢(shì)指數(shù)： ????????）

js的匿名函數(shù)是未申明函數(shù)名的自執(zhí)行函數(shù)，格式是這樣的

(function(){})();

但是在實(shí)際項(xiàng)目中，我們經(jīng)常這么些，在前面加上;或者+

;function(){}();
+function(){}();

雖然JS的語法是可以省略分號(hào)的，為了避免代碼上線后合并壓縮成一個(gè)文件可能造成的語法錯(cuò)誤，所以加上“;”可以避免未知錯(cuò)誤。

而“+”在這里是運(yùn)算符，運(yùn)算符具有極高的優(yōu)先級(jí)，所以右邊的函數(shù)聲明加上括號(hào)的部分（實(shí)際上就是函數(shù)執(zhí)行的寫法）就直接執(zhí)行了。其實(shí)不止前面可以是“+”號(hào)，“-”、“！”、“~”、“++”等運(yùn)算符均可。