JaveScript基础 运算符与类型的转换 与或非 显式number 隐式 parseInt parseFloat

算术运算符

+  一   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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343