JavaScript运算符

作者: 啃馒头的狼 | 来源:发表于2019-07-21 17:47 被阅读0次

在编程语言当中，运算符是处理数据的基本方法，能够根据现有的值得到新的值。
运算符也叫操作符，通过运算符可以对一个或多个值进行运算，并获取运算结果。比如：typeof就是运算符，可以来获得一个值的类型。

在JavaScript当中，存在下列的运算符。

赋值运算符
比较运算符
算数运算符
位运算符
逻辑运算符
字符串运算符
条件（三元）运算符
逗号运算符
一元运算符
关系运算符

赋值运算符

赋值运算符（assignment operator）基于右值（right operand）的值，给左值（left operand）赋值。

在之前的内容中，我们通过下面的写法来创建变量。

var a = 10;

上面我们通过=来将右边的10存储到左边的变量a身上。而这种操作，我们在编程当中称之为赋值。

而=也就是赋值运算符。也可以使用链式赋值。

var a = b = c = 15;
console.log(a,b,c);//15,15,15

顺序是从右向左的进行赋值操作。

下面的列表中包含全部的赋值运算符。

赋值 x = y
加赋值 x += y
减赋值 x -= y
乘赋值 x *= y
除赋值 x /= y
模赋值 x %= y
指数赋值 x **= y
左移赋值 x <<= y
右移赋值 x >>= y
无符号右移赋值 x >>>= y
按位与赋值 x &= y
按位异或赋值 x ^= y
按位或赋值 x |= y

赋值

简单的赋值运算符，把一个值赋给一个变量。为了把一个值赋给多个变量，可以以链式使用赋值运算符。

加赋值

加赋值运算符把一个右值与一个变量相加，然后把相加的结果赋给该变量。两个操作数的类型决定了加赋值运算符的行为。算术相加或字符串连接都有可能。

例如：

var x = 10;
var y = 20;
x += y;
console.log(x); 
// 相当于 
x = x + y;

减赋值

减赋值运算符使一个变量减去右值，然后把结果赋给该变量。

例如：

var x = 10;
var y = 20;
x -= y;
console.log(x); // -10 
// 相当于 
x = x - y;

乘赋值

乘赋值运算符使一个变量乘以右值，然后把相成的结果赋给该变量。

例如：

var x = 10;
var y = 20;
x *= y;
console.log(x); // 200
// 相当于
x = x * y;

除赋值

除赋值运算符使一个变量除以右值，然后把结果赋给该变量。

例如:

var a = 10;
var b = 20;
a /= b;
console.log(a);
// 相当于 
a = a / b;

模赋值

模赋值运算符使一个变量除以右值，然后把余数交给该变量。

var a = 10;
var b = 20;
a %= b;
console.log(a);
//等同于 
a = a % b;

9NB9G0AWRD)X7X1N$62N2ZM.png

指数赋值

指数赋值运算符使一个变量为底数、以右值为指数的指数运算（乘方）结果赋给该变量。

例如:

var x = 2;
var y = 3;
x **= y;
console.log(x); // 8
// 相当于
x = x ** y

比较运算符

比较运算符包括下列内容:

等于 == 如果两边操作数相等时返回true。
不等于 != 如果两边操作数不相等时返回true
全等 === 两边操作数相等且类型相同时返回true。
不全等!== 两边操作数不相等或类型不同时返回true。
大于> 左边的操作数大于右边的操作数返回true
大于等于>= 左边的操作数大于或等于右边的操作数返回true
小于< 左边的操作数小于右边的操作数返回true
小于等于<= 左边的操作数小于或等于右边的操作数返回true

=> 并不是一个运算符，而是箭头函数。

/*
下面是比较运算符的示例：
 */
// == 相等运算符
console.log(10 == 10); // true
console.log(20 == "20"); // true 

// ！= 不等运算符  
console.log(3 != 2); // true
console.log(2 != "hello"); // true

// === 全等
console.log(3 === 3);  // true
console.log(3 === "3"); // false  值虽然相等，但是类型不相等。

// !== 不全等
console.log(3 !== "3");  // true
console.log(3 !== 2); // true

// > 大于  
console.log(3 > 2); // true
console.log("3" > "4");  // false   

// < 小于  
console.log(2 < 1); // false
console.log(3 < 4); // true

// >= 大于等于
// <= 小于等于
console.log(2 >= 1); // true
console.log(2 >= 2); // true
console.log(3 <= 3); // true
console.log(3 <= 4); // true

关系操作符

关系操作符对操作数进行比较，根据比较结果真或假，返回相应的布尔值。

算数运算符

当对非Number类型的值进行运算时，会将这些值转化为Nunber然后再运算(字符串除外)，任何值和NaN做运算都得NaN;
在js当中，除了提供基础的+,-,*,/以外，还提供了一些其他的运算符，下面是所有的算术运算符：

+加法运算

+ 可以对两个值进行加法运算，并将结果返回，
如果对两个字符串进行加法运算，都会先转化为字符串，并返回，任何的值和字符串做加法运算，都会先转化为字符串，然后在和字符串做拼串的操作
- 减法运算
*乘法运算
/ 除法运算
%求余运算(求模运算)
+一元正值符
-一元负值符
++自增运算
--自减运算
**指数运算符

例子：

    /*
        下面是一些算数运算符的案例:  
     */

    var a,b;
    a = 10;
    b = 3;

    console.log(a + b); // 13
    console.log(a - b); // 7 
    console.log(a * b); // 30 
    console.log(a / b); // 3.3333333333333335

    console.log(a % b); // 1 
    console.log(++a); // 11  自增|自减符号在前，则先运算，在使用值
    console.log(a++); // 11 自增|自减符号在后，则先使用值，在运算
    console.log(a); // 12  // 上面a++后a由11变成了12

    // 指数运算符
    var f = 2;
    var x = 3;

    console.log(f ** x); // 8 相当于2 的 3 次幂

自增和自减

++自增运算
通过自增可以使变量在自身的基础上增加1，
自增分两种：后++(a++)和前++(++a);
a++的值等于原变量的值(自增前的值)；
++a的值等于原变量的新值(自增后的值)；

var a = 10; 
console.log(a++); // 10
console.log(++a); // 11

--自减运算：自减和自增同理

逻辑运算符

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

下面是逻辑运算符：

逻辑与(&&)
逻辑或(||)
逻辑非(!)

逻辑与:

逻辑与&&运算符又称为且运算符，往往用于多个表达式之间的求值。

它的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

语法:

exrp1 && exrp2;

逻辑或:

逻辑或||运算符又称为或运算符，同样用于在多个表达式之间求值。

它的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

语法：

exrp1 || exrp2

例如:

// 逻辑与
    // 当运算符的前后都为条件语句的时候，当条件同时为true，则返回true，否则返回false
    var a = 1;
    var b = 2;
    console.log(a > 0 && b > a); //true 第一个条件判断为true，第二个条件判断为true，那么整体返回true
    console.log(a > b && b > 1); // false 第一个条件判断为false，第二个条件判断为true，整体返回false
    console.log(a > 0 && b > 2); // false 第一个条件为true，第二个条件为false，整体返回false
    //
    console.log("dog" && "cat"); // cat  当运算符的前后是一个直接量的时候，如果运算符前后都为true，则返回第二个直接量   
    // 逻辑或
    console.log(a > b || b > a); //true 其中只要有一个条件成立，那么就会返回true
    console.log(a > 2 || b > 2); // false 两个条件都不成立，所以返回fasle
    // 第一个条件如果成立，那么就不会去读取后面的条件
    console.log(a > 0 || b > 2); // true

在上面的两个逻辑运算符的使用过程中，容易造成短路效果。

false && anything // 被短路求值为false
true || anything // 被短路求值为true

在上面的短路代码中，anything部分不会被求值，也就意味着不会对代码产生任何的影响。

逻辑与运算符和逻辑或的连用:

逻辑与运算符可以多个连用，这时返回第一个布尔值为false的表达式的值。如果所有表达式的布尔值都为true，则返回最后一个表达式的值。

true && 'foo' && '' && 4 && 'foo' && true
// ''

1 && 2 && 3
// 3

上面代码中，例一里面，第一个布尔值为false的表达式为第三个表达式，所以得到一个空字符串。例二里面，所有表达式的布尔值都是true，所有返回最后一个表达式的值3。

运算符可以多个连用，这时返回第一个布尔值为true的表达式的值。如果所有表达式都为false，则返回最后一个表达式的值。

false || 0 || '' || 4 || 'foo' || true
// 4

false || 0 || ''
// ''

上面代码中，例一里面，第一个布尔值为true的表达式是第四个表达式，所以得到数值4。例二里面，所有表达式的布尔值都为false，所以返回最后一个表达式的值。

逻辑或运算符通常情况下用于给一个变量设置默认值。

var a = username || "zhangsan";

逻辑非:

逻辑非(!)运算符又叫取反运算符，就是取一个值的反值。主要用于将一个布尔值变为相反值。即true变为false,false变为true。

如果使用取反运算符的值不是一个布尔值，那么取反运算符就会将其变为一个布尔值，然后再取反。

下面的六个值使用取反运算符取反后都为true，其他都为false。

undefined
null
false
0
NaN
空字符串('')

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

!54 // false
!'hello' // false
![] // false
!{} // false

不管什么类型的值，经过取反运算后都会变成布尔值。

如果对一个值连续做两次的取反运算，等于将其转换为对应的布尔值，与Boolean函数的作用相同。这是一种较为常见的类型转换的方法。

例如:
var a = "hello";
console.log(!!a); // true 

字符串运算符

字符串运算符指的是+，通过加号，我们可以对两个字符串进行拼接从而返回一个新的字符串。

var a = "hello,";
var b = "world!";
console.log(a + b); // hello,world!

也可以采用简写的形式来拼接字符串。

var str = "hello,";
var str += "world!";
console.log(str); // hello,world!

我们也可以在使用的过程中进行数据的拼接。

var sayHello = "hello,my name is ";
console.log(sayHello + "zhangsan");// hello,my name is zhangsan

条件运算符

条件运算符也称之为三元运算符。

条件运算符是JavaScript中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为：

条件 ? 值1 : 值2

如果条件为真，则结果取值1。否则为值2。你能够在任何允许使用标准运算符的地方使用条件运算符。

var status = (age >= 18) ? "adult" : "minor";

当 age 大于等于18的时候，将“adult”赋值给status；否则将“minor”赋值给 status。

逗号运算符

逗号操作符（,）对两个操作数进行求值并返回最终操作数的值。它常常用在 for 循环中，在每次循环时对多个变量进行更新。

当然，我们在console.log()的过程中，如果输出多个值，也会用到逗号运算符。

console.log("hello","world");

一元运算符

+一元正值符
-一元负值符

  // 一元正值符，如果操作数不是Number，则会先将操作数转换为Number，然后在运算，原理和Nunber()函数
    var c = "3";
    console.log(+c,typeof +c); // 3 number 

    // 一元负值负，将一个值变为负数
    var d = 3;
    console.log(-d); // -3  

    var e = '3';
    console.log(-e,typeof -e); //-3 number 也起到了转换的效果

    console.log(-3 === -e); // true

一元操作符()

一元操作符仅对应一个操作数。

常用的一元操作符有如下几个:

delete
typeof
void

delete主要用于删除对象当中的某个元素。

void主要用于表明一个运算没有返回值。

例如:

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3]; // 删除数组当中的一个元素 

<a href="javascript:void(0)">Click here to do nothing</a> // 用户点击这个链接不会有任何效果

上面的demo中的两个运算符，我们暂时还没有用到，所以可以先放在这，后面再来理解。

至于typeof运算符，主要用来查看数据的类型，将获取的数据类型以一个字符串的形式展示出来。

var a = "hello,world!";
console.log(typeof a); // "string"

var b = 13;
console.log(typeof (b)); // "number"

在上面的demo中，我们发现typeof有两种使用方式。运算符后面的括号可以选择省略或者不省略。

案例:

console.log(typeof "hello,world"); // "string"
console.log(typeof 10); // "number"
console.log(typeof true); // "boolean"
console.log(typeof false); // "boolean"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"

// 查看typeof返回的数据的类型
console.log(typeof typeof(10)); // "string"

in

in：用来遍历对象，in右操作数必须是一个对象值。例如，你可以指定使用String构造函数创建的字符串，但不能指定字符串文字；

var color1 = new String("green");
"length" in color1 // 返回true
var color2 = "coral";
"length" in color2 // 报错(color2不是对象)

instanceof

instanceof：用来判断对象的构造函数。

运算符优先级

运算符的优先级，用于确定一个表达式的计算顺序。在你不能确定优先级时，可以通过使用括号显式声明运算符的优先级。

下表列出了描述符的优先级，从最高到最低。

Operator type	Individual operators
member	`. []`
call / create instance	`() new`
negation/increment	`! ~ - + ++ -- typeof void delete`
multiply/divide	`* / %`
addition/subtraction	`+ -`
bitwise shift	`<< >> >>>`
relational	`< <= > >= in instanceof`
equality	`== != === !==`
bitwise-and	`&`
bitwise-xor	`^`
bitwise-or	`	`
logical-and	`&&`
logical-or	`		`
conditional	`?:`
assignment	`= += -= *= /= %= <<= >>= >>>= &= ^=	=`
comma	`,`

小练习:

1、为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

var sum_hour = 89;
var day = parseInt(89 / 24);
var hour = 89 % 24 ;
console.log("共计用了" + day + "天" + hour + "小时");

2、小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数

var a_temperature = 80;
var local_c = ( 5 / 9.0 * ( a_temperature - 32) ) .toFixed(3);
console.log("当前的温度是:"+local_c+"摄氏度");

3、计算两个文本框内数字的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两个文本框内的和</title>
</head>
<body>
    <input type="text" name="v1" placeholder="请输入第一个数值" id="v1">  + 
    <input type="text" name="v2" placeholder="请输入第二个数值" id="v2"> = 
    <input type="text" name="add_v" value="当前的数值之和是:" id="add_v">
    <button onclick="add()">点击计算</button>
</body>
<script>

    function add(){
        // 获取三个输入框元素
        var v1,v2,v3;
        v1 = document.getElementById("v1");
        v2 = document.getElementById("v2");
        v3 = document.getElementById("add_v");

        var add = Number(v1.value) + Number(v2.value);
        v3.value = "当前的数值之和是：" + add;
    }

</script>
</html>

3、计算 var k=0; console.log(k++ + ++k +k +k++);

结果是6。