1.强制转换

  1. <script>
  2. /*number,string,boolean
  3.   1.string,boolean--->number
  4.   Number() ---强制转换
  5.   parseInt()
  6.   parseFloat()*/
  7.   var a="12";
  8.   var num=Number(a);
  9.   var str="12px";
  10.   console.log(typeof num)   //number(typeof：查看数据类型)
  11.   console.log(num)    //12
  12.   console.log(a)      //12
  13.   console.log(Number(str))   //NaN  (not a number)不是一个数字
  14.   //NaN和任何类型做运算返回的结果都是NaN
  15. </script>

1.1.string-number转换

  1. <script>
  2.     /*string-number
  3.     parseInt() 1.开头的字符必须以数字开头  2.遇到非数字的字符就停止解析
  4.     parseFloat()  1.遇到非数字的字符继续解析
  5.     Number-->
  6.     局限性：只能识别纯数字的字符串
  7.   */
  8.    var str="12.323px";
  9.    console.log(Number(str))   //NaN
  10.    console.log(parseInt(str)) //12
  11.    console.log(parseFloat(str))  //12.323
  12. </script>

1.2boolean-number转换

  1. <script>
  2.  /*boolean-number
  3.   Number()  1.只能识别纯数字的字符串  2.只能识别纯boolean类型
  4.   var t=true;
  5.   var f=false;
  6.   var str="true"
  7.   console.log(Number(t))  //1
  8.   console.log(Number(f))  //0
  9.   console.log(Number(str)) //NaN
  10. </script>
  1. <script>
  2.  /*boolean-number
  3.   Number()  1.只能识别纯数字的字符串  2.只能识别纯boolean类型
  4.   var t=true;
  5.   var f=false;
  6.   var str="true"
  7.   console.log(Number(t))  //1
  8.   console.log(Number(f))  //0
  9.   console.log(Number(str)) //NaN
  10. </script>

1.3any-string

  1. <script>
  2.     /* String() toString()*/
  3.   var a=1o;
  4.   var t=true;
  5.   console.log(typeof String(a));   //string
  6.   console.log(typeof t.toString())  //string
  7. </script>

1.4any-boolean

  1. <script>
  2.    /*Boolean()
  3.    Tip:"" NaN undefined null 0 -->以上五种情况输出：false  其余都是true
  4.    */
  5.    var a=10;
  6.    var b=0;
  7.    var c="hello world"
  8.    console.log(Boolean(a))  //true
  9.    console.log(Boolean(b))  //false
  10.    console.log(Boolean(c))  //true
  11.    var str="";
  12.    console.log(Boolean(null))  //false
  13. </script>

2.自动转换

2.1加运算

  1. <script>
  2.     /*不需要程序员干预，js自动完成的类型转换
  3.   场景：主要在算术计算中+,-,*,/,%
  4.   */
  5.   /*1.在加运算中的自动转换
  6.   算术计算中先将两边的变量转换为Number再计算  Number()
  7.   特殊：在加运算中，碰到字符串，+就会起到拼接符的作用
  8.   */
  9.    var a=1;
  10.    var b=true;
  11.    var c="hello world";
  12.    var str=a+b;
  13.    var sum=a+c;
  14.    var d="2"
  15.    /*var str=a+Number(b);*/
  16.    console.log(str);   //2
  17.    /*var sum=String(a+c)*/
  18.    console.log(sum)   //1hello world
  19.    console.log(a+d);  //12  
  20. </script>

2.2减运算

  1. <script>
  2. /* 在算术运算中，先将变量转换为Number再计算
  3.    特殊:在+运算中，如果有一边为字符串，+起到拼接符的作用，结果为字符串
  4.  */
  5.    var a=true;
  6.    var b="3";
  7.    var c=4;
  8.    /*Number(a)-Number(b)*/
  9.    console.log(a-b);  //-2
  10.    console.log(c-b);  //1
  11.    console.log(c-a);  //3
  12. </script>

2.3比较运算中的自动转换

  1. <script>
  2.     /*>,<,>=,<=  比较运算返回的结果是boolean
  3.   先将两边的值转换为Number在比较
  4.   */
  5.   var a=10;
  6.   var b="20";
  7.   var c="true";
  8.   console.log(a>b);  //false
  9.   /*Number(a)>Number(b)*/
  10.   console.log(a>c);  //false
  11.   /*Number(a)>Number(c)  10>NaN  NaN不能参与计算的，它和任何值做计算，返回都是NaN*/
  13. </script>

2.4算术运算符

  1. <script>
  2.     /* +,-,*,/,%,++,-- */
  3.     var a=10;
  4.     var c=3;
  5.     var b=2;
  6.     b++;
  7.     c=b++ +4;  
  8.     console.log(a%c)  //1
  9.     console.log(a%b)  //0
  10.     console.log(c)   //7
  11. </script>

2.5++/—运算

  1.  <script>
  2.    /* ++,-- 
  3.    在算术运算中++在前  先自增，后运算
  4.    ++在后  先运算，后自增
  5.    */
  6.    var a=10;
  7.    a++;   //11
  8.    /* a=a+1 */
  9.    var b=a++ +11;  //22
  10.    /* var b=++a +11;  //23 */
  11.    console.log(b) 
  13.   /*  var a=10;
  14.   a--;
  15.   var b=a-- -2;
  16.   console.log(b) */
  17. </script>

2.6.比较运算

  1. <script>
  2.     /*<,>,<=,>=,==,!=
  3.   返回boolean
  4.   */
  5.   var a=10;
  6.   var b=20;
  7.   console.log(a==b)  //false
  8.   console.log(a!=b)  //true
  9.   console.log(a!="true")  //NaN和任何数据做！=比较时，始终返回true
  10.   //isNaN  判断一个值是不是NaN
  11.   console.log(isNaN(NaN))
  12. </script>

2.7.逻辑运算

  1. <script>
  2.     /*&&   ||   !*/
  3.   /*
  4.   &&  逻辑与  两边都为true  结果才为true
  5.   ||  逻辑或  只要有一边为true结果就为true
  6.   !   取反
  7.   */
  8.   var a=20;
  9.   var b=30;
  10.   var c=40;
  11.   var d=50;
  12.   console.log(a<b && c<d)   //true
  13.   console.log(a<b && c>d)   //false
  14.   console.log(a<b || c>d)   //true
  15.   console.log(!a)   //false
  16. </script>

2.8.赋值运算

  1. <script>
  2.     /* +=,-=,*=,/=,%= */
  3.   var a=10;
  4.   a+=10;
  5.   //a=a+10;  //a=20
  6.   console.log(a)
  7. </script>

2.9三目运算

  1. <script>
  2.     var a=10;
  3.   var b=20;
  4.   var c=(a>b)?"a大于b":"a小于b";//如果a>b为true  则返回结果a大于b  否则返回a小于b
  5.   console.log(c)  //a小于b
  6. </script>

三目运算例子
  1. 引入vue
  2. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  3. <body>
  4.   <div id="app">
  5.       <img @click="handleClick" :src="isPlay?'images/credit.jpg':'images/jiaoban.jpg'" alt="">
  6.       <p>{{isPlay}}</p>
  7.   </div>
  8.   <script>
  9.       new Vue({
  10.       el:"#app",
  11.       data(){
  12.           return{
  13.              isPlay:false
  14.          }
  15.       },
  16.       methods:{
  17.           handleClick(){
  18.              this.isPlay=!this.isPlay
  19.           }
  20.       }
  21.     })
  22.   </script>
  23.   </body>