JavaScript入门（三）：运算符与流程控制语句

发表于 2022-01-22 分类于 JavaScript 阅读次数： Waline：本文字数： 2.1k 阅读时长 ≈ 8 分钟

续接前文，我们继续讲 JavaScript 中 ECMAScript 的部分，这节主要讲 JavaScript 中的运算符与流程控制语句的用法。

1. JavaScript 常用运算符

一元运算符

自增运算符 ++ ，自减运算符--和Java相同。

var i = 1
document.write(i + "<br/>"); //i 值为 1
i++
document.write(i + "<br/>"); //自增一次 i 值变为 2。

正负号：+(-)。正负号只有数据类型为数字number类型时才有意义，如果将正负号运算符放在非 number 数据类型之前，则需要进行类型转换。

一些类型转 number 的介绍：
- string 转 number：按照字面值转换，如果字面值不是数字，则转为 NaN。如字符串 “123” 转为 123 ，字符串 “123ab” 则转为 NaN。
- boolean 转 number：true 值转为 1 ，false 转为 0

算数运算符

和 Java一样，JavaScript 的算数运算符的用法基本相同：

算数运算符加： +
算数运算符减： -
算数运算符乘： *
算数运算符除： /。这里注意，在 JavaScript 中，由于 number 数据类型可以表示为整数以及小数，所以在执行除法时结果会有小数。如 5/2，结果为2.5。
算数运算符取余： %

比较运算符

在 JavaScript 中，比较运算符的类型和其他语言差不多，它们分别是：

比较运算符大于&大于等于：> >=
比较运算符小于&小于等于：< <=
比较运算符等于：==
比较运算符不等于：!=
比较运算符全等于：===

比较运算符的类型和其他语言差不多，不过要注意 JavaScript 中特有的===全等于比较运算符，稍后我们会给到解释。现在我们先来介绍一下在 JavaScript 中运算符作用的两种情况：

比较的数据类型相同：直接比较。

这里就不过多解释了，直接上示例：

<script>
    /*
    比较运算符，类型相同
    */
    document.write((1 > 3) + "<br/>"); //false
    document.write((2 > 1) + "<br/>"); // true
    document.write((1 == 1) + "<br/>"); // true

    // 字符串在进行比较时按字典顺序比较
    // 按位逐一比较，直到得出大小
    document.write(("123" > "121") + "<br/>"); //true
    document.write(("abc" > "abd") + "<br/>"); //false
    document.write(("abc" < "abd") + "<br/>"); //true
</script>

结果：

false
true
true
true
false
true

比较的数据类型不同：先进行类型转换，在进行比较。

同样给出示例：

<script>
44/*
        比较运算符，类型不同
        */
        //字符串和数字比较，字符串转为数字类型再进行比较
        document.write(("123" == 123) + "<br/>");//true
        document.write(("123" > 123) + "<br/>"); //false
        //全等于运算符"===",再比较之前，先判断两边的数据类型，如果类型不同，直接返回fals
        //字符串和数字类型不同，返回false
        document.write(("123" === 123) + "<br/>"); //false
</script>

结果：

true
false
false

逻辑运算符

JavaScript 中的逻辑运算符类型：

逻辑运算符与： & ,短路 &&。
逻辑运算符或：|,短路 ||。
逻辑运算符非：!。

运算数类型的自动转换

在 Java 中，逻辑运算符两边的数据类型必须为 boolean 类型才能进行逻辑运算，例如：

//可以，a>b 和 a<b 返回的都是boolean值
    int a = 1;
    int b = 2;
    if((a>b) && (a<b)){

    }
    //报错，两个整型值进行逻辑运算
    if(a && b) {

    }

而在 JavaScript 中，逻辑运算符两边的数据类型可以不仅限于boolean类型；在进行运算时，如果某个运算数不是 boolean 类型，运算数则会参照下表规则转为相应的 boolean 类型：

运算数类型	结果
Undefined	false
Null	false
Boolean	结果等于输入的参数（不转换）
Number	如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。
String	如果参数为空字符串，则结果为 false；否则为 true。
Object	true

示例：

<script>
     /*
     逻辑运算符，运算符类型不同时的相互转换
     */
    //null转为false
    document.write((!!(null)) + "<br/>"); //false
    //undefined转为false
    document.write((!!(undefined)) + "<br/>"); //false
    //number数据类型：0 或 NaN 为false，大于0为true
    document.write(!!(0) + "<br/>"); //false
    document.write(!!(NaN) + "<br/>"); //false
    document.write(!!(1) + "<br/>"); //true
    //string数据类型：空字符串 ""为false，其余都为true
    document.write(!!("") + "<br/>"); //false
    document.write(!!("a") + "<br/>"); //true
    //Object对象数据类型：除了对象为空(null),其余都为true
    var obj = new Date();
    document.write((!!(obj)) + "<br/>"); //true
    obj = null;
    document.write((!!(obj)) + "<br/>"); //false
</script>

结果：

false
false
false
false
true
false
true
true
false

不同逻辑运算符返回值的区别

不同于 Java，在 JavaScript 中，只有逻辑运算符 ! 返回值才一定是 boolean 类型。逻辑运算符&& 和 ||运算符并不一定返回 boolean 类型的值，而是会返回一个指定操作数的值。

逻辑运算符!的规则如下：

如果运算数是对象，返回 false
如果运算数是数字 0，返回 true
如果运算数是 0 以外的任何数字，返回 false
如果运算数是 null，返回 true
如果运算数是 NaN，返回 true
如果运算数是 undefined，发生错误

逻辑运算符&&的规则如下：

如果一个运算数是对象，另一个是 Boolean 值，返回该对象。
如果两个运算数都是对象，返回第二个对象。
如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，发生错误。

逻辑运算符||的规则如下：

如果一个运算数是对象，并且该对象左边的运算数值均为 false，则返回该对象。
如果两个运算数都是对象，返回第一个对象。
如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。
如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。
如果某个运算数是 undefined，发生错误。

但是，尽管 && 和 || 运算符能够返回非布尔值的操作数, 但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值（或者表达式）转换为布尔值，请使用双重非运算符（即!!）或者 Boolean 构造函数。

三元运算符

语法格式：

表达式 ? 值1:值2

例子：

<script>
     /*
     三元运算符
     */
    // 解释：1大于2吗？，大于返回5，不大于则返回6
    document.write(1>2 ? 5 : 6);//返回6
</script>

结果：

2. 流程控制语句

共有以下五种：

if….else
switch
while
do…while
for

特别注意这里的 switch 语句，在 Java 中，switch 语句可以接受的数据类型是有限制的：byte、int、short、char、enum（jdk1.5）、String（jdk1.7）。而在 JavaScript 中，switch 可以接受任意的原始数据类型（number、string、boolean……）。

一个简单的例子：

<script>
        //您可以通过变换不同的 a 值来测试
        var a = "abc";
        switch (a) {
            case 1:
                document.write("整型");
                break;
            case "abc":
                document.write("字符串");
                break;
            case true:
                document.write("布尔型");
                break;
            case null:
                document.write("null");
                break;
            case undefined:
                document.write("undefined");
                break;
            default:
                document.write("默认");
                break;
        }
</script>

除 switch 外，JavaScript 中其余的流程控制语句和 Java 并无区别，这里就不再细述。

3. JavaScript 变量特殊语法

在一行 JavaScript 语句的结尾;可以被省略。（不建议省略）如：
var a = 3
var b = 4

和

var a = 3;
var b = 4;

两种声明效果相同，也就是 JavaScript 中，换行符以及分号都能判断一行语句的结束。

变量的定义使用 var关键字，也可以不使用（不建议不使用）。两者的作用域不一样。

使用var 关键字定义的变量为局部变量，不使用 var关键字定义的变量为全局变量。

注意： 在最新的 ECMAScript 6 （简称 ES6）中，关键字 let、const被引入用来定义变量。其中 let 可定义普通变量，和 var 的区别仅仅在于其拥有变量作用域；而const 则用来定义常量，定义之后数据不可改变。更多细节可参考：

ES6 let 与 const | 菜鸟教程 (runoob.com)

let 和 const 命令 - ECMAScript 6入门 (ruanyifeng.com)

var 的用法请看下面的例子：

<script>
    /*
    变量的定义可以不使用var关键字
    */
4function fun(){
    4//用关键定义为局部变量，范围为函数体内
    4var a = 5;
    4//不用关键字定义，范围为全局
        b = 6;
    }
    fun();
    //变量a不会输出
    document.write(b);
    document.write(a);
</script>

输出：

在函数体内用var关键字定义的变量a作用域为函数体内，在函数外无法使用；而不使用var关键字定义的变量b 可以在函数体外使用。

参考

let 和 const 命令 - ECMAScript 6入门 (ruanyifeng.com)

JavaScript 教程 | 菜鸟教程 (runoob.com)