js中布尔值的重要作用(精华版)

布尔值在js中是五种基本数据类型中的一种，有true和false两种状态。
其他的数据类型在转换为布尔值时，只有""(空字符串),0,NaN,undefined,null是false，别的都是true,
这里值得注意的是负数不属于这五种，负数转换为布尔值也是true，进行判断的时候要注意，尤其是排序的时候。
下面说说常用的用法和注意的地方
1.判断 排序

      var arr = [1, 7, 2, 5, 0, 4];
        function sort(arr, fn) {
            var temp, len = arr.length;
            while (len > 0) {
                for (var i = 0; i < arr.length; i++) {
                    if (fn(arr[i], arr[i + 1]) > 0) {   //返回值有正负，但是布尔值都是true，所以要用0来判断
                        temp = arr[i];
                        arr[i] = arr[i + 1];
                        arr[i + 1] = temp;
                    }
                }
                len--;
            }
            return arr;
        }
        var s = sort(arr, function (a, b) {
            return a - b;
        })
        console.log(s);  

2.开关 通过每次点击bool的变化，来控制自己想要的效果

       var bool=false;
        init();
        function init(){
            var div=document.createElement("div");
            Object.assign(div.style,{
                "100px",
                height:"100px",
                background:"red",
            })
            document.body.appendChild(div);
            div=document.querySelector("div");
            div.addEventListener("click",clickHandler);
        }
        function clickHandler(){
            bool=!bool
            this.style.background=bool?"blue":"red";
        }

3.程序的模块化开发，通过bool来控制后面模块的执行
存储坐标
js代码

        var arr=[],
            record=false,   //控制记录
            bool=false;   //控制行动
       
        var div;
       
        init();
        function init(){
            div=document.querySelector("div");
            Utils.dragElem(div);
            div.addEventListener("mousedown",mouseHandler);
            document.addEventListener("mouseup",mouseHandler);
            setInterval(animation,16);
        }

        function mouseHandler(e){
            if(e.type==="mousedown"){
               record=true;       //鼠标按下，变为true,开始记录
            }else if(e.type==="mouseup"){
                bool=true;  //鼠标松开，开始行动
                record=false;  //鼠标松开,停止记录
                arr.reverse();
            }
        }

        function animation(){  //每16s执行一次，通过两个布尔值的控制，达到下面记录和重复路径的效果
            recordPath();
            elemMove();
        }

        function recordPath(){
            if(!record) return;
            arr.push({x:div.offsetLeft,y:div.offsetTop});
        }

        function elemMove(){
            if(!bool) return;
            if(arr.length===0){
                bool=false;
                return;
            }
            var point=arr.pop();
            div.style.left=point.x+"px";
            div.style.top=point.y+"px";
        }

html代码

 <div></div>

css

            div {
             25px;
            height: 25px;
            position: absolute;
            background-color: red;
            border:1px solid #000000;
            left:0;
            top:0;
        }