JavaScript入门(三):运算符与流程控制语句

续接前文,我们继续讲 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 中运算符作用的两种情况:

  1. 比较的数据类型相同:直接比较。

    这里就不过多解释了,直接上示例:

    <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
  2. 比较的数据类型不同:先进行类型转换,在进行比较。

    同样给出示例:

    <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>

结果:

6

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 变量特殊语法

  1. 在一行 JavaScript 语句的结尾;可以被省略。(不建议省略)如:

    var a = 3
    var b = 4

var a = 3;
var b = 4;

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

  1. 变量的定义使用 var关键字,也可以不使用(不建议不使用)。两者的作用域不一样。

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

    注意: 在最新的 ECMAScript 6 (简称 ES6) 中,关键字 letconst被引入用来定义变量。其中 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>

    输出:

    6

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

参考

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

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