JavaScript基础语法之运算符

一、运算符

1、JavaScript 拥有二元和一元运算符， 和一个特殊的三元运算符（条件运算符）。

一元运算符：

运算符 操作数
操作数 运算符

<script type="text/javascript">

            /*
             * 一元运算符，只需要一个操作数
             *  + 正号
             *      - 正号不会对数字产生任何影响
             *  - 负号
             *      - 负号可以对数字进行负号的取反
             */

            var a = 123;    
            a = -a; 
            console.log(a);



        </script>

二元运算符：

    操作数1 运算符 操作数2

三元运算符：

    条件 ? 值1 : 值2

2、JavaScript 拥有如下类型的运算符。

算数运算符(Arithmetic operators)
赋值运算符(Assignment operators)
逻辑运算符(Logical operators)
字符串运算符(String operators)
条件（三元）运算符(Conditional operator)
比较运算符(Comparison operators)

二、算数运算符

算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值.标准的算术运算符就是加减乘除(+ - * / %)。特殊要注意的是，除零会产生Infinity。

除了标准的算术运算符（+， - ，* /），JavaScript还提供了如下的算术运算符：
自增(++)
一元运算符. 将操作数的值加一. 如果放在操作数前面 (++x), 则返回加一后的值; 如果放在操作数后面 (x++), 则返回操作数原值,然后再将操作数加一。

自减(–)
一元运算符. 将操作数的值减一. 前后缀两种用法的返回值类似自增运算符.

一元负值符(-)
返回操作数的负值
一元正值符(+)
如果操作数不是number则试图将其转换为number
指数运算符(**)
计算底数的指数次方。

注意：
对字符串进行+运算时，本质是进行的字符串拼接操作

代码示例：

标准算数运算符：

<script type="text/javascript">

            /*
             * 运算符也叫操作符
             *  通过运算符可以对一个或多个值进行运算,并获取运算结果
             * 
             *  算数运算符
             *      +
             *          +可以对两个值进行加法运算，并将结果返回
             *           如果对两个字符串进行加法运算，则会做拼串
             *              会将两个字符串拼接为一个字符串，并返回
             *      -
             *          - 可以对两个值进行减法运算，并将结果返回
             * 
             *      *
             *          * 可以对两个值进行乘法运算
             *      /
             *          / 可以对两个值进行除法运算
             *      %
             *          % 取模运算（取余数）
             */
            var result;

            result = 1 + 2;


            result = 100 - 5;

            result = 2 * 2;

            result = 2 * undefined;

            result = 2 * null;

            result = 4 / 2;

            result = 3 / 2;

            result = "你好" + "大帅哥";
        </script>

自增与自减：

<script type="text/javascript">
            /*
             * 自增 ++
             *   - 通过自增可以使变量在自身的基础上增加1
             *   - 对于一个变量自增以后，原变量的值会立即自增1
             *   - 自增分成两种：后++(a++) 和 前++(++a)   
             *      无论是a++ 还是 ++a，都会立即使原变量的值自增1
             *          不同的是a++ 和 ++a的值不同
             *      a++的值等于原变量的值（自增前的值）
             *      ++a的值等于新值 （自增后的值）
             * 
             * 自减 --
             *  - 通过自减可以使变量在自身的基础上减1
             *  - 自减分成两种：后--(a--) 和 前--(--a)
             *      无论是a-- 还是 --a 都会立即使原变量的值自减1
             *          不同的是a-- 和 --a的值不同
             *              a-- 是变量的原值 （自减前的值）
             *              --a 是变量的新值 （自减以后的值）
             *          
             *  
             */
            var a = 1;
            console.log("++a = " + ++a);
            console.log("a++ = " + a++);
            console.log("a = "+a);


            var c = 10;
            c++;
            console.log(c++);


            var d = 20;
            console.log(d++ + ++d +d);

            var e =20;
            e = e++;
            console.log(e);
        </script>

三、 字符串运算符

连接操作符（+）连接两个字符串值相连接，返回另一个字符串，它是两个操作数串的结合。

四、逻辑运算符

逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上&&和||返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值

逻辑与 (&&)

&&用于布尔值时，当操作数都为true时返回true；否则返回false.

逻辑或 (||)
||用于布尔值时，当任何一个操作数为true则返回true；如果操作数都是false则返回false。

逻辑非 (!)

!expr(逻辑非) 如果操作数能够转换为true则返回false；否则返回true。

代码示例：

<script type="text/javascript">

            /*
             * JS中为我们提供了三种逻辑运算符
             * ! 非
             *  - !可以用来对一个值进行非运算
             *  - 所谓非运算就是值对一个布尔值进行取反操作，
             *      true变false，false变true
             *  - 如果对一个值进行两次取反，它不会变化
             * 
             * && 与
             *  - &&可以对符号两侧的值进行与运算并返回结果
             *  - 运算规则
             *      - 两个值中只要有一个值为false就返回false，
             *          只有两个值都为true时，才会返回true
             * 
             * || 或
             *  - ||可以对符号两侧的值进行或运算并返回结果
             *  - 运算规则：
             *      - 两个值中只要有一个true，就返回true
             *          如果两个值都为false，才返回false
             */

            var a = false;
            console.log(!a);


            //如果两个值都是true则返回true
            var result = true && true;
            //只要有一个false，就返回false
            result = true && false;
            result = false && true;
            result = false && false;


            //两个都是false，则返回false
            result = false || false;
            //只有有一个true，就返回true
            result = true || false;
            result = false || true ;
            result = true || true ;


        </script>

五、 赋值运算符

一个赋值运算符就是将它右边操作数的值赋给它左边的操作数。最简单的赋值运算符是等于（=），它将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x

复合赋值操作符如下：

加法赋值    x += y  x = x + y
减法赋值    x -= y  x = x - y
乘法赋值    x *= y  x = x * y
除法赋值    x /= y  x = x / y
求余赋值    x %= y   x = x % y

代码示例：

<script type="text/javascript">
            /*
             * =
             *  可以将符号右侧的值赋值给符号左侧的变量
             * += 
             *  a += 5 等价于 a = a + 5
             * -=
             *  a -= 5 等价于 a = a - 5
             * *=
             *  a *= 5 等价于 a = a * 5
             * /=
             *  a /= 5 等价于 a = a / 5
             * %=
             *  a %= 5 等价于 a = a % 5
             *  
             */
            var a = 10;

            //a = a + 5;
            //a += 5;

            //a -= 5;

            //a *= 5;

            // a = a%3;
            a %= 3;

            console.log("a = "+a);

        </script>

六、 比较运算符

通过关系运算符可以比较两个值之间的大小关系，
如果关系成立它会返回true，如果关系不成立则返回false

> 大于号    >= 大于等于
< 小于号   <= 小于等于
==  ===
!=  !==

注意：==&=== 比较数字 == === 相同，！= ！== 相同;
==：比较的是栈内容;=== ：比较的是值

代码示例：

<script type="text/javascript">
        /*
         * 通过关系运算符可以比较两个值之间的大小关系，
         *  如果关系成立它会返回true，如果关系不成立则返回false
         * 
         * > 大于号
         *  - 判断符号左侧的值是否大于右侧的值
         *  - 如果关系成立，返回true，如果关系不成立则返回false
         * 
         * >= 大于等于
         *  - 判断符号左侧的值是否大于或等于右侧的值
         * 
         * < 小于号
         * <= 小于等于
         * 
         */
            var result = 5 > 10;//false

            result = 5 > 4; //true

            result = 5 > 5; //false

            result = 5 >= 5; //true

            result = 5 >= 4; //true

            result = 5 < 4; //false

            result = 4 <= 4; //true

        </script>

相等运算符：

<script type="text/javascript">

            /*
             * 相等运算符用来比较两个值是否相等，
             *  如果相等会返回true，否则返回false
             * 
             * 使用 == 来做相等运算
             *  - 当使用==来比较两个值时，如果值的类型不同，
             *      则会自动进行类型转换，将其转换为相同的类型
             *      然后在比较
             * 不相等
             *   不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
             *  - 使用 != 来做不相等运算
             *  - 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
             * 
             *      
             *  ===
             *      全等
             *      - 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
             *          如果两个值的类型不同，直接返回false
             *  !==
             *      不全等
             *      - 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
             *          如果两个值的类型不同，直接返回true
             */

            console.log(1 == 1); //true



        </script>

七、条件（三元）运算符

条件运算符也叫三元运算符
语法：

    条件表达式?语句1:语句2;

执行的流程：

• 条件运算符在执行时，首先对条件表达式进行求值，
• 如果该值为true，则执行语句1，并返回执行结果
• 如果该值为false，则执行语句2，并返回执行结果

代码示例：

<script type="text/javascript">
            /*
             * 条件运算符也叫三元运算符
             *  语法：
             *      条件表达式?语句1:语句2;
             *  - 执行的流程：
             *      条件运算符在执行时，首先对条件表达式进行求值，
             *          如果该值为true，则执行语句1，并返回执行结果
             *          如果该值为false，则执行语句2，并返回执行结果
             */


            var a = 300;
            var b = 143;
            var c = 50;

            a > b ? alert("a大"):alert("b大");



        </script>

八、运算符的优先级

代码示例：

<script type="text/javascript">

            /*
             * , 运算符
             *  使用,可以分割多个语句，一般可以在声明多个变量时使用,
             */
            //使用,运算符同时声明多个变量
            //var a , b , c;

            //可以同时声明多个变量并赋值
            //var a=1 , b=2 , c=3;
            //alert(b);

            /*
             * 就和数学中一样，在JS中运算符也有优先级，
             *  比如：先乘除 后加减
             * 在JS中有一个运算符优先级的表，
             *  在表中越靠上优先级越高，优先级越高越优先计算，
             *  如果优先级一样，则从左往右计算。
             * 但是这个表我们并不需要记忆，如果遇到优先级不清楚
             *  可以使用()来改变优先级
             */

            //var result = 1 + 2 * 3;

            /*
             * 如果||的优先级高，或者两个一样高，则应该返回3
             * 如果与的优先级高，则应该返回1
             *      
             */
            var result = 1 || 2 && 3;

            console.log("result = "+result);    

        </script>

九、代码块{}

在JS中可以使用{}来为语句进行分组。

<script type="text/javascript">

            /*
             * 我们的程序是由一条一条语句构成的
             *  语句是按照自上向下的顺序一条一条执行的
             *  在JS中可以使用{}来为语句进行分组,
             *      同一个{}中的语句我们称为是一组语句，
             *      它们要么都执行，要么都不执行，
             *      一个{}中的语句我们也称为叫一个代码块
             *      在代码块的后边就不用再编写;了
             * 
             *  JS中的代码块，只具有分组的的作用，没有其他的用途
             *      代码块的内容，在外部是完全可见的
             */
            {
                var a = 10; 
                alert("hello");
                console.log("你好");
                document.write("语句");
            }


            console.log("a = "+a);




        </script>