【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()方法取得相应的字符串值, 然后再应用前面关于字符串的规则;
  • 对于 undefinednull,则分别调用 String()函数并取得字符 串"undefined""null"
var result1 = 5 + 5;      // 两个数值相加 
alert(result1);          // 10 

var result2 = 5 + "5";  // 一个数值和一个字符串相加 
alert(result2);        // "55" 
  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 
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
  • 如果有一个操作数是字符串、布尔值、nullundefined,则先在后台调用 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 
  1. * 操作符

乘法操作符由一个星号(*)表示,用于计算两个数值的乘积

  • 如果操作数都是数值,执行常规的乘法计算。如果乘积超过了 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
  1. / 操作符

除法操作符由一个斜线符号(/)表示,执行第二个操作数除第一个操作数的计算。

  • 如果操作数都是数值,执行常规的除法计算。如果商超过了 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
  1. % 操作符

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

  • 如果操作数都是数值,执行常规的除法计算,返回除得的余数;
  • 如果有一个操作数不是数值,则在后台调用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
  1. 自增(++)与自减(--

(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 
  1. 赋值运算符
    (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

  1. 等值关系检测
  • 相等(==)和不相等(!=——先转换再比较
  • 全等(===)和不全等(!==——仅比较而不转换

(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、nullundefined 是相等的;要比较相等性之前,不能将nullundefined 转换成其他任何值

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
  1. 逻辑与(&&
  • 当且仅当两个操作数的值都是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")
  1. 逻辑或(||
  • 当且仅当两个操作数的值都是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作为表达式的值

你可能感兴趣的:(【JS基础】(四)JavaScript常用操作符(运算符))