JavaScript中的运算符个人分享

2023年1月11日 94次阅读 来源: a达达

运算符

加减乘除法运算符

  1. 加法运算符:
  • 如果字符串进行加法计算 – 叫拼串
  • 加法遇到字符串都是连接而不是加法运算
  • 如果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

自增运算符 – 就是给自己增加 – 操作的是当前变量的值,每自增一次(+1)

  • 前置自增运算符 – ++变量名

    • 先自增，再赋值

  • 后置自增运算符 – 变量名++

    • 先赋值，再自增

示例代码:

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

运算符的优先级别

  1. 先计算优先级别高的运算符
  2. 运算符的级别相同，从左至右的计算

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

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

示例代码:

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

  • 备注:

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

      • 相等就是只要值是一样的就行
      • 全等则是值和类型都要一样才行

isNaN()函数

  • 作用 – 判断当前值是否为 NaN

    • true – 表示当前值是 NaN(不是一个数字值)
    • false – 表示当前值不是 NaN(不是一个数字值)
  • 注意: 全等和相等都不好使

示例代码:

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

isFinite()函数

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

  • 注意: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(错的)

赋值扩展运算符

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

    • 优点:

      1. 代码量减少
      2. 性能更好

示例代码对比:

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('丑');// 调用结果为 帅

嵌套条件运算符

  • 嵌套条件运算符

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

    • 缺点

      1. 可读性比较差
      2. 性能随着嵌套的层级越多越差
  • 建议 – 最多不要超过三层嵌套

示例代码:

var result = score > 90 ? '很帅' : score > 80 ? '一般帅' :  '很丑';
console.log(result);
    原文作者：a达达
    原文地址: https://segmentfault.com/a/1190000015924743
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞