JaveScript基础 运算符与类型的转换 与或非 显式nu
算术运算符
+ 一 x / % (模) 取余的意思（余数）
例：
var a = 10 % 4 ; 余 2； a = 2;
image.png
例2：
var a = 10. 5% 4 ; 余 2.5； a = 2.5;
image.png
小数不参与运算；
小模大一定等于小的值
赋值运算符
单单只有赋值： =
带运算的赋值： += -= x= /= %= ++ --
var a = 10 ;
a%=2; ===>a=10%2 余：0
%实例：
<style type="text/css">
*{margin: 0;padding: 0;}
ul li{list-style: none;}
div{
width: 200px;
height: 50px;
margin-bottom: 5px;
background: #000;
line-height: 50px;
color: white;
text-align: center;
}
.a{
background: red;
}
</style>
</head>
<body>
<div class="a">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<script type="text/javascript">
var aDiv = document.getElementsByTagName('div');
var index = 0;
document.onclick = function(){
aDiv[index].className = '';
index ++ ;
if( index > aDiv.length-1 ){
index = 0;
}
aDiv[index].className = 'a';
}
</script>
上面if可以用%来做：
<script type="text/javascript">
var aDiv = document.getElementsByTagName('div');
var index = 0;
document.onclick = function(){
aDiv[index].className = '';
index ++ ;
index %= aDiv.length;
aDiv[index].className = 'a';
}
</script>
index %= aDiv.length 等同于index = index % aDiv.length
index = index % aDiv.length
当 0 0 5
1 1 5
2 2 5
3 3 5
4 4 5
0 5 5
image.png
用%运算会比if判断运算快，碰到这种情况的用%比较好；
比较运算符
< > <= >= == != === !==
比较运算符最终会得到一个 布尔值 数据 true false
特殊：字符串比较
var a = '6';
var b= '50';
alert( a<b );
弹出：false
当两个字符在做比较的时候，比较的是挨个挨个字符的ANSII码；
a = '6'
b = '50' 会比较位置 6>5 就不会向下比了；
如果
var a = '551';
var b = '552';
alert( a === b );
会 5比5 5比5 1不等于2 弹出false
逻辑运算符
&& 碰到 假 才停下来，值为假的那个；如果都为真那值是最后一个；
var a = 3<2 && 3<6 // false && true ==> 弹出false
先比较运算符再算逻辑符 布尔值（false ）就停下来了 值就是false
|| 碰到 真 才停下来，值为真的那个；如果都为 假 那值是最后一个；
var a = 3<2 || 3<6 // false && true ==> 弹出true
先比较算运算符再算逻辑符 布尔值（true）就停下来了 值就是true
优先级： ！> && > ||
var a = 3<4 || 3<6 && 3<2;
先判断 3<6 && 3<2 true && fslse ==>值就是fslse
再判断 3<4 || fslse true || fslse ==>值就是true
两边不是布尔值的时候
例：
var a = 5 && 0 && 4;
a = 0;
var b = 5 && false && 4;
b = false
var c = 5 || 0 || 2;
c = 5;
var d = "" || 5 && 0;
d= 0; ==>先执行 && 得到0 再比 “” || 0 都为假 取最后值 0
var e = 10 && function(){}; //函数为真
e = function(){};
特别注意：
var a = true || 5 && alert( 1 ) // 这里不会弹窗
因为如果这种表达式 电脑不会考虑优先级，而是先执行 true || 5
|| 遇真停 就停在true上不会往后再执行了
var a = false || 3 && alert( 5 );
false || 3 不停 继续向后 3 && alert( 5 ) 3是真 alert()可以执行到
var a = 333;
if ( a ) {
alert( 55 )
}
可以写成
a && alert( 55 );
如果是
var a = false;
if( a ){
//一般真部分不能空
} else {
alert( 55 )
}
改成 if ( !a ){ ! a 就变成真
alert( 55 )
}
可以写成： !a && alert( 55 );
不会写成： a || alert( 55 )
与或非的流程控制
例：
3 > 2 && fn();
function fn(){ alert( 1 ) };
当3 > 2 这个条件为真时都会执行 fn()
想当于：if ( 3 > 2 ){ fn() };
仅当只有一句循环体才能这样用，用这样方法会比if运行得快；
例：
if( 3>2 ){
fn();
i++;
}
2句循环体，不能用&&；
例题：
var obj = document.getElementsById ( 'box' ); //没有box obj为假
var a ;
if( obj ){
a = obj;
} else{
a = 10;
}
可以写成
a = obj || 10;
类型转换
js的某些数据之间是可以通过一些方式（ 显式 跟 隐式 ）进行类型转换
1.显式类型转换
通过明摆着的，js给我们提供的API去转换；
常用显式类型转换
parseInt() 强制取整数
parseFloat() 强制取数字 可以带小数
转换规则：从第一位非空格开始找，有满足数学规则才会转，直到不满足停下来；
这两个方法最终都会得到一个number类型的数据，可能是数字也可以是NaN
转换原理：会先稳式的调用toString再进行转换
console.log( parseInt( [ 55.5 ] ) );
[ 55.5 ].toString() ===> '55.5' ==>parseInt( '55.5' ) ==> 55
例：
parseInt()
var a = '12.345'; var a = '12px45'; var a = ' 12px45';
var b = parseInt( a ); var b = parseInt( a ); var b = parseInt( a );
alert ( b ); ===> 弹出12 alert ( b ); ===> 弹出12 alert ( b ); ===> 弹出12
var a = '-12.345'; var a = 'x12.25'; var a = ' 20/40px45';
var b = parseInt( a ); var b = parseInt( a ); var b = parseInt( a );
alert ( b ); ===> 弹出-12 alert ( b ); ===> 弹出NaN转不了 alert ( b ); ===> 弹出20
parseFloat()
特殊：parseFloat( '1.1.21' ) ==> 1.1
浮点只有保留一个点所以只有是1.1
var a = '12.345'; var a = '12px45'; var a = ' 12px45';
var b = parseFloat( a ); var b = parseFloat( a ); var b = parseFloat( a );
alert ( b ); ===> 弹出12.345 alert ( b ); ===> 弹出12 alert ( b ); ===> 弹出12
var a = '-12.345'; var a = 'x12.25'; var a = ' 20/40px45';
var b = parseFloat( a ); var b = parseFloat( a ); var b = parseFloat( a );
alert ( b ); ===> 弹出-12.345 alert ( b ); ===> 弹出NaN转不了 alert ( b ); ===> 弹出20
Number()
将一个非数字数据，转换成一个数字数据；
通过 Number() 内建函数
空字符串 ===》0
null ===> 0
true/false ===> 1/0
undefined ===> NaN
[] ==> 0
{} ==> NaN
原理：对象会调用toString()方法再来通过Number()来对照上面转的值
console.log( Number( [] ) ) ===> 0
转换原理：
先调用[]里的.toString()方法 再调用Number()内建函数
[].toString() ===》 '' （空字符 ）===》 0
console.log( Number( [ 55554 ] ) ) ===> 55554
[ 55554 ] ===> '55554' ===> 55554
console.log( Number( [ 1 , 2 ] ) ) ===> NaN
[ 1 , 2 ] ===> ' 1,2'(字符串（1，2）) ===》 NaN
console.log( Number( {}) ) ===> NaN
{} ====> [object Object] ===> NaN
例：
var y = '123';
var x = Number( y );
alert( x ); ===>弹出123
alert( typeof x ) ===>弹出number 类型
var y = '1.24.223';
var x = Number( y );
alert( x ); ===>弹出NaN NaN ( not a number)不是个数字
alert( typeof x ) ===>弹出number 类型
1.24.223不符合数字的结构；所有Number不知道怎么转，转不了就觉得委屈（NaN可以看哭的样子）
所有Number类型都是数字 （错误：NaN不是数字）
所有数字都是Number类型 （正确的）
NaN
NaN跟自己不相等：
例：
alert( NaN === NaN ); 弹出false
var a = NaN;
alert( a===a ); false 相当于同一个NaN相比也不相等；
判断一个数据是不是NaN
isNaN(); 会先让Number先转一下，再判断；
例：
var x =NaN ;
alert( isNaN(x) ) 弹出true；
哪些数据可以转
var y = '00.125.3' ===>NaN
var y = '123b'; ===>NaN
var y = true; ===>1 true 1 false 0
var y ={}; ===>NaN
var y =[]; ===>0
var y =[1]; ===>1
var y =[1,2]; ===>NaN
只有当一个数据也会单独拿出来去转换这个数据，多个数据不能转（NaN）
var y ; ===>NaN
var y = function(){} ; ===>NaN
var y = null ; ===>0
总结：
Number能将哪些数据转成数字
1、number类型中的 数字
2、string类型中符合数字格式的数字 “10.5” "10.56.2"(不是了)
3、boolean类型中的true(1) false(0)
4、object类型中的空数组（0） 或者 只有一个数据且数据能被转换的数组；
5、object类型中null(0)
String()转换
alert弹窗什么样，得到的字符串就是怎样；
例：
var a = document;
alert( a ) ===>[ object HTMLDocument ]
alert( String( a ) ) ===>[ object HTMLDocument ] 转换后得到的
alert( typeof( String( a ) ) )===>string类型
注意：
通常我们都是通过：
var x = y + ''; +做拼接 （隐式类型转换）
toFixed(n) 保留几位小数 n 要保留的位数
var num = 1.3353;
console.log( num.toFixed( 2 ) ) //保留2位
注意 这个是4舍6入 5的时候看后面 后面如果有有数字而进1 如果没有数字则舍去
四舍五入封装方法
function numRound( num , n ) {
return Math.round( num*Math.pow(10,n) )/Math.pow(10,n)
}
//利用Math.round 的取整
先把num乘上 Math.pow(10,n)（10的n次方）
转化后再除以Math.pow(10,n) 还原
Boolean()布尔值转换
例：
var y = 0;
var x = Boolean( y );
var x = !!y; //这个实际比较常用（隐式类型转换）
！y变成假 再 ！ 就是真
隐式类型转换
通过运算符转换
布尔值在做数学运算的时候：true 相当于1 false 相当于0
例：
var a = 4 +true; ===> 5；
var a = 4 +false; ===> 4；
var a =true + false; ===> 1；
字符串在做数学运算时：+是拼接（得到字符串） - x / %才会得到数字；
没办法做数学运算的时候得到NaN; ===>var x = 'a' - 0; NaN
例：
var a = '20' - 0; ===> 20 数字类型；
var a = '20' x 1; ===> 20 数字类型；
var a = '20' / 1; ===> 20 数字类型；
var a = '20' % 1; ===> 0 数字类型；
var a = parseInt( ' 20 '); ===> 20 数字类型；
var a = parseFloat( ' 20 '); ===> 20 数字类型；
++ --强制转换数字再运算
a = '2';
虽然可以拆分为a = a+1
但是++会进行隐式强制类型转换 a 变成 数字2再进去运算
a ++ 结果是3
例：
var x = '20';
x ++ ===> x等于21 这里 x = x + 1不会做拼接；
x -- ===> x等于19 x = x - 1
注意：+=是拼接
例：
var x = '20';
x += 2 ===> x等于202 这里 x = x + 2 做拼接；
x -= ===> x等于18 x = x - 2
