Javascript运算符和数据类型如何转换

本篇内容主要讲解“Javascript运算符和数据类型如何转换”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Javascript运算符和数据类型如何转换”吧!

一。if else 语句

if else用来表示中文里的 如果…， 就…， 否则……

// 条件为true, 执行if后面的括号代码， 否则执行 else 后面括号代码

if（条件） {

// todo

}else{

// todo

}

// 多重判断

if（）{

} else if（） {

} else {

}

具体例子

<script>

   var a = 100;

   var b = 20;

   debugger;

   if （a > b） {

      console.log（'a 大于 b'）;

   } else {

      console.log（'a 小于 b'）;

   } 

</script>

<!-- 多重判断 -->

<script>

   var gender = prompt（'请输入性别'）;

   if （gender === '男'） {

      alert（'你是个男的'）;

   } else if（gender === '女'） {

      alert（'你是个妹子'）;

   } else {

      alert（'性别未知'）;

   }

</script>

二。类型转换

【腾讯文档】05-类型转换-备课

问题： 以下代码会打印什么

<script>

   var a = 'aa';

   var b = 'bb';

   if （a+b） {

      console.log（'xxxxxxx'）;

   } else {

      console.log（'yyyyyyyy'）;

   } 

</script>

1.显式转换

1.Number（变量名）将其他类型转为数字//快捷方式  变量名*1

2.String（变量名）；转字符串// 变量名+ &lsquo;&rsquo;

3.Boolean（变量名）；//!!变量名

<script>

    var str = '123';

    // 转换为数字

    var num = Number（str）;

    console.log（num）;

    console.log（typeof num）;

    // 结果为NaN

    var str2 = 'abcd';

    var num2 = Number（str2）;

    console.log（num2）;

    //结果为0

    var str3 = '';

    var num3 = Number（str3）;

    console.log（num3）; 

 </script>

2.隐式转换

<script>

   var a = 'aa';

   var b = 'bb';

    // a+b => aabb aabb会自动转换为true, 所以执行结果为 xxxxxx

   if （a+b） {

      console.log（'xxxxxxx'）;

   } else {

      console.log（'yyyyyyyy'）;

   } 

</script>

3.数据类型转换规则

【腾讯文档】类型转换规则 腾讯文档

三。运算符

【腾讯文档】js运算符思维导图 腾讯文档

1.算术运算

1.+-*/

2.相加的生活，有一个数为字符串，则+表示字符串拼接

<script>

    var a = 20;

    var b = 7;

    var num1 = a+b;

    var num2 = a-b;

    var num3 = a*b;

    var num4 = a/b;

    // 计算余数

    var num5 = a % b; 

    console.log（num1）;

    console.log（num2）;

    console.log（num3）;

    console.log（num4）;

    console.log（num5）; 

</script> 

<script>

  // 有一个数为字符串， 则+表示字符串拼接  

  var a = 100;

  var b = prompt（'请输入数字'）;

  console.log（typeof b）;

  console.log（a+Number（b））;

</script>  

2.关系运算符（比较运算符）

var a = 10;

var b = '10';

console.log（a == b）; // true,类型不同， 先转换成相同类型

console.log（a === b）; // false, 类型不同为false, 类型相同再判断值是否相同

3.逻辑运算符

1.逻辑非！，取反即可

var boo1 = false;  // !boo1 => true  !!bool 

var num = 100; //  !num => false

var str = ''; //  !str => true

var obj = null; // !obj => true

var username; // !username => true

2.逻辑与&&：中文里并且的意思

        规律：前者为true取后者，否则取前者

        当都是布尔的时候，只有当俩者为true时结果为true，否则为false。

// 计算以下式子的值（参与运算的都是布尔类型）

true && true => true

true && false => false

false && true => false

false && false =>   false

// 计算以下式子的值（参与运算的是其他类型）

var num1 = 100;

var num2 = 0;

num1 && num2 => 0

num2 && num1 => 0

var a = 'web';

var b; 

a && c =>  // 报错，计算的结果为c, 而c没有声明

b && c =>   undefined

3.逻辑或||:中文里的或者意思

        规律：前者为true取前者，否则取后者

        当都是布尔的生活，只要有一个为true，结果皆为true，否则为false。

<script>

console.log（true || true ）;  // true

console.log（true || false ）;  // true

console.log（false || true ）; // true

console.log（false || false ）; // false

 var num1 = 100;

var num2 = 0;

console.log（num1 || num2 ）;  // 100

console.log（num2 || num1 ）;  // 100

var a = 'web';

var b; 

console.log（a || c ）;  // web

console.log（b || c ）; // 报错，计算的结果为c, 而c没有声明

</script>

4.一元计算符

i++，i先用原值运算，再自加1，后面要是有i它值为i+1；

++i，i先是给自己加1，再进行运算。

<!-- ++ 自加 -->

<script>

var i = 10;

var j = 20;

var i2 = 10 + i++;   // i先运算再自加1

console.log（'i2',i2）; // 20

console.log（'i',i）; // 11

var j2 = 10 + ++j; // j先自加1再运算

console.log（'j2',j2）; // 31

console.log（'j',j）;  // 21 

</script>

自减运算， 道理类似自加运算

<script>

var i = 10;

var j = 20;

var i2 = 10 + i--;   // i先运算在自减1

console.log（'i2',i2）; //  20

console.log（'i',i）; //  9

var j2 = 10 + --j; // j先自减1再运算

console.log（'j2',j2）; //  29

console.log（'j',j）;  //  19

</script>

练习：

<!-- 练习1 -->

<script>

var i = 10; 

var i2 = 10 + i++; // i=10 i2=20

var i3 = 10+ ++i; // i=12 i3=22

var i4 = 10 + i--; // i=11 i4=22   

var i5 = 10 + --i;  // i =10 i5=20   

// 求i,i2,i3,i4,i5的值

console.log（i,i2,i3,i4,i5）;

var count = 60; // 说出控制台打印的值

console.log（--count）;  // 59

console.log（--count）;  // 58

console.log（--count）;//57

console.log（--count）;//56

console.log（--count）; //55

</script>

<!-- 练习2 -->    

<script>

var i = 1;

var j = 1;

var a = 10;

// 11   10+ 1

var b = a + i++;

//     11+  3   + 3   + 2

var c = b + ++i + i++ + ++j;

var d = a + b + c;

// i=4 j=2 a=10,b=11, c=19 d=40

console.log（i,j,a,b,c,d）; 

</script>   

5.复合赋值运算符

<script>

var a = 10;

a += 10;  

console.log（a）; // 20

a -= 10;

console.log（a）; // 10

a *= 10;

console.log（a）; // 100

a /= 10;

console.log（a）; // 10

a %= 10;

console.log（a）; // 0 

</script>

6.运算符优先级

（） > 自加（自减） > 算术 > 关系 > 逻辑 > 赋值

到此，相信大家对“Javascript运算符和数据类型如何转换”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！