【JS基础】（四）JavaScript常用操作符（运算符）

（一）算术操作符

1. + 操作符

（1）一元加操作符（+）

• 放在数值前面，对数值不会产生任何影响；
• 对非数值应用一元加操作符时，该操作符会像Number()转型函数一样对这个值执行转换。

var num = 25; 
num = +num;     // 仍然是 25

var s1 = "01"; 
var s2 = "1.1"; 
var s3 = "z"; 
var b = false; 
var f = 1.1; 
var o = { 
    valueOf: function() { 
        return -1; 
    } 
}; 
s1 = +s1;    // 值变成数值 1 
s2 = +s2;    // 值变成数值 1.1 
s3 = +s3;    // 值变成 NaN 
b = +b;      // 值变成数值 0 
f = +f;      // 值未变，仍然是 1.1 
o = +o;      // 值变成数值-1 

（2）加法操作符（+）

• 如果两个操作数都是数值，执行常规的加法计算；

var num1 = 1 + 2;               // 3
var num2 = 1 + NaN;              // NaN
var num3 = Infinity + Infinity; // Infinity
var num4 = (-Infinity) + (-Infinity); // -Infinity
var num5 = Infinity + (-Infinity); // NaN
var num6 = (+0) + (+0);         // 0
var num7 = (-0) + (-0);         // -0
var num8 = (+0) + (-0);         // 0

• 如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来；
• 如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接 起来；
• 如果有一个操作数是对象、数值或布尔值，则调用它们的 toString()方法取得相应的字符串值， 然后再应用前面关于字符串的规则；
• 对于 undefined 和 null，则分别调用 String()函数并取得字符 串"undefined"和"null"。

var result1 = 5 + 5;      // 两个数值相加 
alert(result1);          // 10 

var result2 = 5 + "5";  // 一个数值和一个字符串相加 
alert(result2);        // "55" 

2. - 操作符

（1）一元减操作符（-）

• 将一元减操作符应用于数值时，该值会变成负数；
• 应用于非数值时，一元减操作符遵循与一元加操作符相同的规则，会像Number()转型函数一样对这个值执行转换，最后再将得到的数值转换为负数。

var num = 25; 
num = -num;    // 变成了-25 

var s1 = "01"; 
var s2 = "1.1"; 
var s3 = "z"; 
var b = false; 
var f = 1.1; 
var o = { 
    valueOf: function() { 
        return -1; 
    } 
}; 
s1 = -s1;         // 值变成了数值-1 
s2 = -s2;         // 值变成了数值-1.1 
s3 = -s3;         // 值变成了 NaN 
b = -b;           // 值变成了数值 0 
f = -f;           // 变成了-1.1 
o = -o;           // 值变成了数值 1 
console.log(-null); // -0，因为null像Number()那样转型后得到0

（2）减法操作符（-）

• 如果两个操作数都是数值，执行常规的减法计算；

var num1 = 2 - 1;                     // 1
var num2 = 1 - NaN;                    // NaN
var num3 = Infinity - Infinity;       // NaN
var num4 = (-Infinity) - (-Infinity); // NaN
var num5 = Infinity - (-Infinity);    // Infinity
var num6 = (+0) - (+0);         // 0
var num7 = (-0) - (-0);         // 0
var num8 = (+0) - (-0);         // 0
var num9 = (-0) - (+0);         // -0

• 如果有一个操作数是字符串、布尔值、null 或 undefined，则先在后台调用 Number()函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是 NaN，则减法的结果就是 NaN；
• 如果有一个操作数是对象，则调用对象的valueOf()方法以取得表示该对象的数值。如果得到 的值是 NaN，则减法的结果就是NaN。如果对象没有valueOf()方法，则调用其 toString()方法并将得到的字符串转换为数值。

var num1 = 5 - true;    // 4，因为 true 被转换成了 1 
var num2 = NaN - 1;    // NaN 
var num3 = 5 - 3;      // 2 
var num4 = 5 - "";     // 5，因为"" 被转换成了 0 
var num5 = 5 - "2";    // 3，因为"2"被转换成了 2 
var num6 = 5 - null;   // 5，因为 null 被转换成了 0 

3. * 操作符

乘法操作符由一个星号（*）表示，用于计算两个数值的乘积。

• 如果操作数都是数值，执行常规的乘法计算。如果乘积超过了 ECMAScript 数值的表示范围， 则返回 Infinity 或-Infinity；
• 如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后再应用相关规则。

var num1 = 20 * 21;  // 420
var num2 = 2 * NaN;  // NaN
var num3 = Infinity * 0; // NaN
var num4 = Infinity * 5; // Infinity
var num5 = Infinity * (-5); // -Infinity
var num6 = Infinity * Infinity; // Infinity
var num7 = Infinity * (-Infinity); // -Infinity
var num8 = (-Infinity) * (-Infinity); // Infinity
var num9 = 20 * '21'; // 420

4. / 操作符

除法操作符由一个斜线符号（/）表示，执行第二个操作数除第一个操作数的计算。

• 如果操作数都是数值，执行常规的除法计算。如果商超过了 ECMAScript 数值的表示范围， 则返回 Infinity 或-Infinity；
• 如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后再应用相关规则。

var num1 = 30 / 2;              // 15
var num2 = NaN / 1;             // NaN
var num3 = Infinity / Infinity; // NaN
var num4 = 0 / 0;               // NaN
var num5 = 1 / 0;               // Infinity
var num6 = -1 / 0;              // -Infinity
var num7 = Infinity / 0;        //Infinity

5. % 操作符

求模（余数）操作符由一个百分号（%）表示。

• 如果操作数都是数值，执行常规的除法计算，返回除得的余数；
• 如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后再应用相关规则。

var num1 = 26 % 5;     // 等于 1
var num2 = Infinity % 100; // NaN
var num3 = 100 % Infinity; // 100
var num4 = 100 % 0; // NaN
var num5 = Infinity % Infinity; // NaN
var num6 = 0 % 100; // 0

6. 自增（++）与自减（--）

（1）自增（++）与自减（--）功能相反

• ++ ：对唯一的运算数进行递增操作（每次加1）；
• -- ：对唯一的运算符进行递减操作（每次减1）。

（2）规则相同

• 运算数必须是一个变量、数组的一个元素或者对象的属性；
• 如果运算数是非数值的，则在后台调用Number()将其转换为数值，然后再应用相关规则。

（3）符号的位置决定运算的结果

• 前置（操作符在运算数之前）：先进行递增（递减）操作，再进行求值；
• 后置（操作数在运算数之后）：先求值，再进行递增（递减）操作。

var num1 = 2; 
var num2 = 20; 
var num3 = --num1 + num2;      // 等于 21 
var num4 = num1 + num2;      // 等于 21 

var num5 = 2; 
var num6 = 20; 
var num7 = num5-- + num6;     // 等于 22 
var num8 = num5 + num6;      // 等于 21 

7. 赋值运算符
   （1）简单赋值操作符由等于号（=）表示，其作用就是把右侧的值赋给左侧的变量。

var num = 10;

（2）复合赋值操作符
每个主要算术操作符（以及个别的其他操作符）都有对应的复合赋值操作符。这些操作符如下所示：

• 乘/赋值（*=）；
• 除/赋值（/=）；
• 模/赋值（%=）；
• 加/赋值（+=）；
• 减/赋值（-=）；
• 左移/赋值（<<=）；
• 有符号右移/赋值（>>=）；
• 无符号右移/赋值（>>>=）

var num = 10;
num += 10;

// 以上跟下面效果一样
var num = 10;
num = num + 10;

设计这些操作符的主要目的就是简化赋值操作。使用它们不会带来任何性能的提升。

（二）关系操作符

1. 大小关系检测

（1）运算符

• <：如果A小于B，则返回值为true，否则返回值为false；
• <=：如果A小于等于B，则返回值为true，否则返回值为false；
• >：如果A大于B，则返回值为true，否则返回值为false；
• >=：如果A大于等于B，则返回值为true，否则返回值为false；

（2）操作规则

• 如果两个操作数都是数值，则比较它们的代数值；
• 如果仅有一个操作数是数值，将另一个操作数转成数值后，再比较它们的代数值；
• 如果两个操作符都是字符串，逐字比较它们的 Unicode数值；
• 如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较；
• 字符串与非数值比较，将操作数换成字符串并进行比较；
• 操作数既不是数字也非字符串，转成数值或字符串后进行比较；
• 当操作数无法转成数值或字符串时，返回值为false；
• 与NaN比较，返回值为false。

var result1 = 5 > 3;   //true
var result2 = 5 < 3;   //false
var result3 = "Brick" < "alphabet"; //true，大写字母的字符编码全部小于小写字母的字符编码
var result4 = "23" < "3"; //true，"2"的字符编码是50，而"3"的字符编码是51
var result5 = "23" < 3;   //false，因为"23"被转成了数值23
var result6 = "a" < 3;    // false，因为"a"被转换成了NaN
var result7 = NaN < 3;    //false
var result8 = NaN >= 3;   //false

2. 等值关系检测

• 相等（==）和不相等（!=）——先转换再比较，
• 全等（===）和不全等（!==）——仅比较而不转换。

（1）相等和不相等

• 相等操作符由两个等于号（==）表示，如果两个操作数相等，则返回true；
• 相等操作符由叹号后跟等于号（!=）表示，如果两个操作数不相等，则返回true；
• 这两个操作符都会先转换操作数（通常称为强制转型），然后再比较它们的相等性。

在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：

a、如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为0，而true 转换为1；

console.log(false == 0);  // true
console.log(true == 1);  // true
console.log(true == 2);  // false

b、字符串与数值比较时，字符串会被转换为数值；

console.log("5" == 5);  // true

c、null 和undefined 是相等的；要比较相等性之前，不能将null 和undefined 转换成其他任何值；

console.log(null == undefined);  // true
console.log(undefined == 0);  // false
console.log(null == 0);  // false

d、 对象与其他类型值进行比较时，会调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较；

e、如果有一个操作数是 NaN，则相等操作符返回false，而不相等操作符返回true。重要提示：NaN 不等于NaN；

console.log("NaN" == NaN);  // false
console.log(5 == NaN);  // false
console.log(NaN == NaN);  // false
console.log(NaN != NaN);  // true
console.log("NaN" == "NaN");  // true

f、 两个对象进行比较，如果两个操作数都指向同一个对象，则相等操作符返回true；否则，返回false。

var a = {},
    c = {},
    b = a;
console.log(a == b); // true
console.log(a == c); // false

（2）全等和不全等

• 全等操作符（===），比较两个操作数的返回值及数据类型是否相同；
• 不全等操作符（!==），比较两个操作数的返回值及数据类型是否不同。

var result1 = ("55" == 55); //true，因为转换后相等
var result2 = ("55" === 55); //false，因为不同的数据类型不相等

var result3 = ("55" != 55); //false，因为转换后相等
var result4 = ("55" !== 55); //true，因为不同的数据类型不相等

var result5 = (null == undefined); // true
var result6 = (null === undefined); // false

（3）（不）相等与（不）全等的区别

（不）相等操作符会先进行类型转换再比较；而（不）全等只进行比较，不进行类型转换，所以一旦类型不同，就是不全等。

（三）逻辑运算符

1. 逻辑非（!）

（1）如果运算数的值为false则返回true，否则返回false；

逻辑非操作符遵循下列规则：

操作数	返回值	操作数	返回值
对象	false	null	true
非空字符串	false	""空字符串	true
任意非0数值(包括Infinity)	false	0	true
NaN	true	undefined	true

alert(!false);      // true
alert(!"blue");     // false
alert(!0);          // true
alert(!NaN);        // true
alert(!"");         // true
aler t(!12345);     // false

（2）连续使用两次!，可将任意类型转为布尔值

alert(!!"blue"); //true
alert(!!0); //false
alert(!!NaN); //false
alert(!!""); //false
alert(!!12345); //true

2. 逻辑与（&&）

• 当且仅当两个操作数的值都是true时，才返回true，否则返回false
• 短路操作：当第一个操作数的值是false时，则不再对第二个操作数进行求值。

逻辑与操作可以应用于任何类型的操作数，而不仅仅是布尔值。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值；此时，它遵循下列规则：

操作数	返回值
第一个操作数是对象	返回第二个操作数
第二个操作数是对象	在第一个操作数为true是返回该对象
两个操作数都是对象	返回第二个操作数
有一个操作数是null	返回null
有一个操作数是NaN	返回NaN
有一个操作数是undefined	返回undefined

var found = true;
var result = (found && someUndefinedVariable); // 这里会发生错误
alert(result); // 这一行不会执行

var found1 = false;
var result = (found1 && someUndefinedVariable); // 不会发生错误
alert(result1); // 会执行（"false"）

3. 逻辑或（||）

• 当且仅当两个操作数的值都是false时，才返回false，否则返回true；
• 短路操作：如果第一个操作数的值为true时，则不会对第二个操作数进行求值。

操作数	返回值
第一个操作数是对象	返回第一个操作数
第一个操作数值为false	返回第二个操作数
两个操作数都是对象	返回第一个操作数
两个操作数都是null	返回null
两个操作数都是NaN	返回NaN
两个操作数都是undefined	返回undefined

var found = true;
var result = (found || someUndefinedVariable); // 不会发生错误
alert(result); // 会执行（"true"）

var found1 = false;
var result1 = (found1 || someUndefinedVariable); // 这里会发生错误
alert(result1); // 这一行不会执行

（四）对象运算符

• in：判断左侧操作数是否为右侧操作数的成员；
• instanceof：判断对象实例是否属于某个类或构造函数；
• new：根据构造函数创建一个新的对象，并初始化该对象；
• delete：删除指定对象的属性，数组元素或变量；
• . 及 []：存取对象和数组元素；
• ()：函数调用；改变操作符优先级

（五）其他

• ?: ：条件运算符，简介的if else；
• typeof：类型判定运算符
• , ：逗号，在一行语句中执行多个不同的操作
• void ：舍弃操作数的值，返回undefined作为表达式的值