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");

11. 匿名函数的N种写法（涨姿式指数： ⭐️⭐️⭐️⭐️）

js的匿名函数是未申明函数名的自执行函数，格式是这样的

(function(){})();

可是在实际项目中，咱们常常这么些，在前面加上;或者+

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

虽然JS的语法是能够省略分号的，为了不代码上线后合并压缩成一个文件可能形成的语法错误，因此加上“;”能够避免未知错误。

而“+”在这里是运算符，运算符具备极高的优先级，因此右边的函数声明加上括号的部分（实际上就是函数执行的写法）就直接执行了。其实不止前面能够是“+”号，“-”、“！”、“~”、“++”等运算符都可。

JavaScript 之银弹の技法