细数JavaScript中那些神乎其神的技巧

Sleepy 发布于2019-08-20 13:30 / 896人阅读

摘要：闲来无事，整理一下中那些神乎其神的技巧，假装大牛的样子字符串转换为数字同样可用于日期转换为数值数值向下取整字符串转换为数值并取整谢谢开始学习前端指正，该取整直接去除小数点后数字，仅对正数有效函数设置默认值为时最后都得到变量值交换使用

闲来无事，整理一下JavaScript中那些神乎其神的技巧，假装大牛的样子 1. 字符串转换为数字

    var a = "123";
    console.log(+a);         // 123
    console.log(typeof +a);  // number

    // 同样可用于日期转换为数值：
    var b = +new Date();     // 1468545682168

2. 数值向下取整

    var a = ~~3.14;   // 3
    var b = 3.14>>0;  // 3
    var c = 3.14|0;   // 3

3. 字符串转换为数值并取整

    var a = "3.14"|0;  // 3
    var b = "3.14"^0;  // 3

谢谢 @开始学习前端指正，该取整直接去除小数点后数字，仅对正数有效

4. 函数设置默认值

    function func(arg){
        var arg = arg || "default"; 
        // arg 为 undefined, null, "", 0, false, NaN 时最后都得到"default"
    }

5. 变量值交换

    var a = 1,
        b = 2;
    a = [b, b = a][0];
    console.log(a);  // 2
    console.log(b);  // 1

6. 使用for in遍历对象取到属性名与属性

    var obj = {
        a: 1,
        b: 2
    }
    for(var i in obj) {
        console.log("obj." + i + " = " + obj[i]);
    }
    // output: obj.a = 1
    //         obj.b = 2

7. 截断数组

    var arr = [1, 2, 3, 4, 5, 6];
    arr.length = 3;
    console.log(arr);  // [1, 2, 3]

8. 提高遍历较大Enumerable数据的性能

    var arr = [1, 2, 3, 4, 5, 6, ...];
    var len = arr.length;  // 缓存arr.length
    for(var i = 0; i < len; i++) {
        console.log(arr[i]);
    }
    
    // 也可将缓存写在for的声明中
    for(var i = 0, len = a.length; i < len; i++) {
        console.log(arr[i]);
    }

    // 或者（！注意：若数组中键值存在undefined、null、0、false等数据时会中断遍历）
    for(var i = 0, a; a = arr[i++];) {
        console.log(a);
    }

9. 使用 && 替代单一条件判断

    // 你可能这样写过
    if(!token) {
        login();
    }
    // 其实这样也可以
    !token && login();
    // 或
    token || login();

10. 检测对象/数组中是否有指定属性/元素

    var CURD = {
        add: function() {},
        delete: function() {},
        edit: function() {}
    }
    console.log("add" in CURD);   // true
    console.log("find" in CURD);  // false

    /* 误 */
    // var arr = [1, 2, 3];
    // console.log(1 in arr);  // true
    // console.log(6 in arr);  // false

谢谢 @zaaack 指正，数组的存在检测实质上是检测的是数组下标

11. 通过闭包调用setTimeout

    for(var i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);  // 10 10 10 ...
        },500);
    }

    for(var i = 0; i < 10; i++) {
        (function(i){
            setTimeout(function(){
                console.log(i);  // 0 1 2 3 ...
            },500)
        })(i);
    }

12. To be continue... Started At 函数式编程：柯里化的变型应用 | 熊D博客

云服务器 GPU云服务器 JAVASCRIPT技巧 javascript七大技巧 javascript调试技巧 Javascript注入技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81095.html

细数 JavaScript 实用黑科技(二)

摘要：前言书接上文细数实用黑科技一本文介绍独孤九剑和两篇最高内功心法。可以将变量转换为布尔值。可以把任何类型的值转换为布尔值，并且只有当这个变量的值为的时候才会返回，其他情况都返回。同样的，函数体内部声明的函数，作用域绑定函数体内部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言书接上文：细数 JavaS...

马忠志 2019-08-23 12:07 评论0 收藏0
细数 JavaScript 实用黑科技(一)

摘要：小汪经过实践得出以下用途。空数组的类型也是，这表示在内部，数组本质上只是一种特殊的对象。调用函数时，某个参数未设置任何值，这时就可以传入，表示该参数为空。前端还是很有未来的下节内容细数实用黑科技二。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言只有深入学精一门语言，学其他语言才能更好地举一反三，触类...

ConardLi 2019-08-23 12:07 评论0 收藏0
细数你不得不知的容器安全工具

摘要：你首先需要了解的安全工具之一就是。是另一个可为进行安全漏洞扫描的工具。和相似，是的安全审核工具。和其他容器安全工具不同，使用创建自定义配置文件非常容易。月日，北京海航万豪酒店，容器技术大会即将举行。网络安全问题的重要性大概毋庸置疑，最近无数关于恶意软件和安全漏洞的消息已充分证明了这一点。假如你要管理一个Docker环境，并希望帮助自己的公司或用户在下一个大漏洞来临时避免遇到麻烦，那...

刘德刚 2019-06-21 16:36 评论0 收藏0
细数你不得不知的容器安全工具

摘要：你首先需要了解的安全工具之一就是。是另一个可为进行安全漏洞扫描的工具。和相似，是的安全审核工具。和其他容器安全工具不同，使用创建自定义配置文件非常容易。月日，北京海航万豪酒店，容器技术大会即将举行。网络安全问题的重要性大概毋庸置疑，最近无数关于恶意软件和安全漏洞的消息已充分证明了这一点。假如你要管理一个Docker环境，并希望帮助自己的公司或用户在下一个大漏洞来临时避免遇到麻烦，那...

zhoutk 2019-06-28 15:56 评论0 收藏0