JavaScript 之銀彈の技法

時間 2019-12-05

原文原文鏈接

JavaScript 之銀彈の技法

下文這些淫巧在以前自認爲是居家必備，裝逼撩妹的必備之物，博主一直敝帚自珍，不肯拿出來分享，現現在，ES6+極盡能事，我知道再不拿出來就在沒有價值了?前端

來由

博主入行前端寫JavaScript時候，由於須要兼容IE低版本，時常須要在繁雜冗長的DOM操做夾雜的代碼中，儘量巧妙地節省代碼了，保持代碼清潔和逼格，長此以往，在維護前輩舊代碼和新功能開發時積累了一套代碼書寫的奇技淫巧，你也能夠把它看做是抖機靈，不過它的確是豐盈了個人codeの時光，讓咱們不至書寫業務那麼枯燥。ajax

1. 取整數組
2. 多行字符串app
3. 快速輸出重複字符串函數
4. 用switch case代替if elsethis
5. 截取數組spa
6. 獲取數組中的最大值和最小值code
7. 日期轉數字對象
8. 用 && || ?: , 節省代碼行數ip
9. 隱式轉換
10. 利用對象數組取值、方法
11. 匿名函數的N種寫法

1. 取整（任性指數： ⭐️⭐️⭐️⭐️⭐️）

var a = ~~1.2; //1

還能夠用位右移符>>

var a = 3.4>>0; //3

簡單解釋，~是按位取反的運算符，能夠將浮點數經過捨去小數點後面的全部位來轉換爲整數。

注意：若是須要作嚴格的四捨五入運算就要慎用此方法，那就仍是得用Math函數

2. 多行字符串（銀彈指數： ⭐️⭐️⭐️⭐️）

var temp1 = "<div>" +
    "<p><span>" +
    "<%=data%>" +
    "</span></p></div>";

這樣一段多行的js字符串咱們通常經過行尾+字符串來實現鏈接，這樣的寫法既很差看，不容易維護，代碼量又多，固然咱們知道ES6的字符串模版能夠輕鬆實現優雅寫法：

const temp2 = `
<div>
    <p>
        <span><%=data%></span>
    </p>
</div>`;

想知道在遠古時代，咱們智慧的勞動人民刀耕火種這樣寫：

var temp3 = "<div>\
    <p>\
    <span><%=data%></span>\
    </p>\
 </div>";

3. 快速輸出重複字符串（腦洞指數： ⭐️⭐️⭐️⭐️⭐️）

咱們笨辦法是

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

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

在之前咱們能夠這樣抖機靈：

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

通過提醒，此處用該把200換成了201。

4. 用`switch case`代替`if else`（腦洞指數： ⭐️⭐️⭐️⭐️）

這種代替可能會讓第一次看到的你以爲腦洞大開：這樣玩也行？對的，case後面跟上Boolean判斷而不是具體值。

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

5. 截取數組（奇葩指數： ⭐️⭐️⭐️）

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. 獲取數組中的最大值和最小值（實用指數： ⭐️⭐️⭐️⭐️）

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. 日期轉數字（銀彈指數： ⭐️⭐️⭐️）

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

咱們能夠這樣

var time2 = + new Date();

8. 用 && || ?: , 節省代碼行數（用多了會被打指數： ⭐️⭐️⭐️⭐️⭐️）

在咱們代碼簡短的判斷邏輯，咱們常常會使用運算符去實現，用if else反而顯得不簡潔，特別注意用,能夠把多個短句合成一句。

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. 隱式轉換（實用指數： ⭐️⭐️⭐️⭐️⭐️）

data.isDeep == ‘0’;    // 有時候返回的deep可能爲0可能爲「0」
data.isDeep > 0 ;
...

合理優雅的運用JavaScript的弱類型特色的靈活性，能夠在不少時候巧妙地作到節省代碼量，若是咱們很好掌握隱式轉換，好比在不少時候咱們用==反而比===更駕輕就熟，用>的布爾比較反而比嚴格的類型檢查和值比較更快捷。

10. 利用對象數組取值、方法（實用指數： ⭐️⭐️⭐️⭐️）

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

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