布尔值在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,{
width:"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 {
width: 25px;
height: 25px;
position: absolute;
background-color: red;
border:1px solid #000000;
left:0;
top:0;
}