JavaScript中的运算符个人分享

摘要：运算符加减乘除法运算符加法运算符如果字符串进行加法计算叫拼串加法遇到字符串都是连接而不是加法运算如果类型进行加法计算时加法运算自动将布尔类型转换为数字值在进行加法注意操作变量中如果不存在类型的话执行的是加法计算示例代码一花一世界调用结

加法运算符:

如果字符串进行加法计算 - 叫拼串

加法遇到字符串都是连接而不是加法运算

如果boolean类型进行加法计算时 - 加法运算自动将布尔类型转换为数字值在进行加法

注意:操作变量中如果不存在string类型的话 -> 执行的是加法计算

示例代码:

var num = 100;
var str1 = "一花一世界";
var str2 = "200";
var boo = true;

var result1 = num + 300;
console.log(result1);// 调用结果为 400

// 如果字符串进行加法计算 -> 字符串连接运算符(拼串)
var result2 = str1 + 300;
console.log(result2);// 调用结果为 一花一世界300
console.log(typeof result2);// 调用结果为 string

var result3 = str2 + 300;
console.log(result3);// 调用结果为 200300
// 如果布尔类型进行加法计算 -> 将布尔类型转换为数字值，再进行加法计算
var result4 = boo + 300;
console.log(result4);// 调用结果为 301

2.减法运算符

仅局限于数学计算(数字值)

如果操作变量的类型不是number(数字)类型那它会先将当前数据类型转换为number(数字)类型

备注:减法一定是数字减法

示例代码:

var result5 = num - 100;
console.log(result5);// 调用结果为 0
// 如果字符串进行减法计算的话 -> 将字符串类型转换为数字值，再进行减法计算
var result6 = str1 - 100;
console.log(result6);// 调用结果为 NaN

var result7 = str2 - 100;
console.log(result7);// 调用结果为 100
// 如果布尔类型进行减法计算 -> 将布尔类型转换为数字值，再进行减法计算
var result8 = boo - 100;
console.log(result8);// 调用结果为 -99

特殊情况:数字减NaN和字符串输出结果都得出NaN

示例代码:

console.log(num - NaN);// NaN
console.log(num - "我是谁");// NaN

3.乘法和除法运算符和减法运算符一样

注意: 除了加法运算符之外，所有算数运算符都是执行数学计算

特殊情况: 求余的结果是正数还是负数与第一个操作的数有关,(与第二个操作的数无关)

示例代码:

console.log(100 % 3);// 1
console.log(8 % 4);// 0
// 求余的结果是正数还是负数，与第一个操作数是正数或负数有关(与第二个操作数无关)
console.log(100 % -3);// 1
console.log(8 % -4);// 0

console.log(-100 % 3);// -1
console.log(-8 % 4);// 0

console.log(-100 % -3);// -1
// 与减法的情况保持一致
console.log("卧龙学苑" % 2);// NaN

前置自增运算符 - ++变量名

先自增，再赋值

后置自增运算符 - 变量名++

先赋值，再自增

示例代码:

var num = 10;
console.log(num);// 10

// 前置自增
var result1 = ++num;
console.log(result1);// 11
console.log(num);// 11

// 后置自增
var result = num++;
console.log(result);// 10
console.log(num);// 11

先计算优先级别高的运算符

运算符的级别相同，从左至右的计算

运算符中优先级别最高的是"()"

优先计算的表达式利用"()"将其包裹起来

示例代码:

console.log(100 + 200 - 150 * 3);// -150
console.log(100 + 200 % 3);// 102
console.log(2 * 200 % 3);// 1

var num = 10;
console.log(5 + ++num);// 16

示例代码:

// 1.number类型
console.log(10 > 11);// false
console.log(11 > 10);// true
console.log(10 >= 10);// true
// 2.boolean类型 - 将boolean类型转换为number类型
console.log(true > false);// true
console.log(true > 0);// true
/*
    3.string类型 - a.英文；b.中文
      * 英文或中文 -> 将文本转换成 Unicode 码 - 对应具有数字值
      * 英文单词 -> 从左至右的依次比较字母 Unicode 码的大小
  */
console.log("a" < "b");// true
console.log("a" > "A");// true
console.log("abc" > "cba");// false
console.log("abc" > "acd");// false

1.相等和不相等:

相等比较运算符

与赋值运算符的区别

赋值运算符(=)

相等比较运算符(==)

不等比较运算符

符号是"!="

不是"<>"

示例代码:

// 1.number类型
console.log(10 == 10);// true
console.log(10 == 11);// false
// 2.boolean类型
console.log(true == true);// true
console.log(true == false);// false

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

// 3.string类型
console.log("a" == "a");// true
console.log("a" == "b");// false
// 只比较值，而不比较类型
console.log("100" == 100);// true

2.等和不相等与全等

完全相等 : 是三个等于号 (===)

完全不相等 : 是以个叹号两个等号 ( !== )

完全相等就是说不只是值相等而且类型也必须相等

反之完全不相等道理一样必须是所有都不一样才可以(比如:值和类型)

示例代码:

// 全等 - 不仅比较值，还比较类型
console.log(10 === 10);// true

console.log("10" === 10);// false
console.log("10" == 10);// true

// 不全等
console.log(11 !== 10);// true

console.log("10" !== 10);// true

备注:

相等和不相等与全等和不全等的区别

相等就是只要值是一样的就行

全等则是值和类型都要一样才行

作用 - 判断当前值是否为 NaN

true - 表示当前值是 NaN(不是一个数字值)

false - 表示当前值不是 NaN(不是一个数字值)

注意: 全等和相等都不好使

示例代码:

console.log(isNaN(100));// false
console.log(isNaN(Number("一花一世界")));// true

作用 - 判断当前值是否为无穷大

注意:boolean类型的值在isFinite()函数中表示的意思是:

表示当前值是无穷大

true - 表示当前值是有限数值

var result = 100/0;
console.log(result);// Infinity - 表示无穷大的意思
console.log(isFinite(result));// false

总结:

逻辑与相当于生活中说的"并且"的意思

如果两个变量的布尔值都为false的话，结果为左边变量的值

如果两个变量的布尔值，一个是true一个是false的话，结果为false的变量值

如果两个变量的布尔值都为true的话，结果为右边变量的值

注意:计算的结果无论是什么类型，转换为布尔类型时结果只能是true或false

代码示例图:

console.log(true && true);// 调用结果为 true
console.log(true && false);// 调用结果为 false
console.log(false && true);// 调用结果为 false
console.log(false && false);// 调用结果为 false
/*
    将逻辑与运算符的两个操作数，转换为布尔类型
    * 当左边的操作数为true时，结果为右边操作数的值
    * 当左边的操作数为false时，结果为左边操作数的值
 */
console.log(100 && 1);// 调用结果为 1
console.log(1 && 0);// 调用结果为 0
console.log(0 && 1);// 调用结果为 0
console.log(0 && 0);// 调用结果为 0

console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

console.log("一花一世界" && "一花一世界");// 调用结果为 一花一世界
console.log("一花一世界" && "");// 调用结果为 ""
console.log("" && "一花一世界");// 调用结果为 ""
console.log("" && "");// ""

/*
    如果两个变量是字符串和数字类型时则取右边的值
 */
console.log("一花一世界" && 1);// 调用结果为 1
console.log(1 && "一花一世界");// 调用结果为 一花一世界
console.log(false && 0);// 调用结果为 false

将逻辑与运算符的两个操作数，转换为布尔类型

逻辑或相当于生活中说的"或者"的意思

如果两个变量的布尔值都为false的话，结果为右边变量的值

如果两个变量的布尔值都为true的话，结果为左边变量的值

当左边的操作数为true时，结果为左边操作数的值

当左边的操作数为false时，结果为右边操作数的值

示例代码:

console.log(true || true);// 调用结果为 true
console.log(true || false);// 调用结果为 true
console.log(false || true);// 调用结果为 true
console.log(false || false);// 调用结果为 false

console.log(100 || 1);// 调用结果为 100
console.log(1 || 0);// 调用结果为 1
console.log(0 || 1);// 调用结果为 1
console.log(0 || 0);// 调用结果为 0

console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

console.log("一花一世界" || "一花一世界");// 调用结果为 一花一世界
console.log("一花一世界" || "");// 调用结果为 一花一世界
console.log("" || "一花一世界");// 调用结果为 一花一世界
console.log("" || "");// 调用结果为 ""

逻辑非 - 语法 : (!)

逻辑非相当于生活中说的"不是"的意思

逻辑非就是取相反

如果当前值为true(对的)得到结果就是false(错的)

备注:null,0,NaN,空字符串 ("") 和undefined都是false(错的)

赋值扩展运算符 - 就是简写形式

优点:

代码量减少

性能更好

示例代码对比:

var b = 10, c = 20;
var a = b + c;
console.log(a);// 30
 b = b + c;

b += c;
console.log(b);// 30

条件运算符的语法格式

条件表达式 ? 为true的结果 : 为false的结果

问号 (?)后是为true的结果 - 可以是任何类型 - 比如: 字符串,布尔值,数字值等等

冒号 (:)后是为false的结果 - 可以是任何类型 - 比如: 字符串,布尔值,数字值等等

示例代码:

var result = 10 > 20 ? "对" : "错";
console.log(result);// 调用结果为 错

var score = 95;
score > 90 ? console.log("帅") : console.log("丑");// 调用结果为 帅

嵌套条件运算符

优点 - 扩展了条件运算符本身的计算能力

缺点

可读性比较差

性能随着嵌套的层级越多越差

建议 - 最多不要超过三层嵌套

示例代码:

var result = score > 90 ? "很帅" : score > 80 ? "一般帅" :  "很丑";
console.log(result);