JavaScript运算

1. 算术运算符

+ 加

- 减

* 乘

/ 除

% 余

算术优先级 * / % 优先级要高于 + - 无论是 + - * / % 都是左结合性(从左至右计算)

var num1 = 10;
var num2 = 20;
var res1 = num1 + num2;
console.log(res1); // 30
var res2 = num1 - num2;
console.log(res2); // -10
var res3 = num1 * num2;
console.log(res3); // 200
var res4 = num2 / num1;
console.log(res4); // 2
var res5 = num2 % num1;
console.log(res5); // 0

1.1 加法运算的注意点

• 任何非数值类型的数据在参与加法运算之前,都会被转成数值类型,再参与运算

  var num1 = 1;
  // 先把true转换成数值类型,转成1
  var num2 = true;
  // 计算 1 + 1  
  var res1 = num1 + num2
  console.log(res1); // 2 
  
  // null 转换成数值类型0
  var res2 = 1 + null;
  console.log(res2); // 1 
  

• 任何数据和NaN进行运算,结果都是NaN

  // undefined 转换成数值类型 NaN
  var res3 = 1 + undefined;
  console.log(res3); // NaN
  
  // 字符串转换成数值类型 NaN
  var res4 = 1 + Number("abc");
  console.log(res4); // NaN
  

• 任何数据和字符串类型相加,都会被先转换成字符串之后再运算

  // 加法运算只要有字符串类型都是字符串的拼接
  var res5 = 1 + "abc";
  console.log(res5); // 1abc
  

1.2 减法运算注意点

• 任何非数值类型的数据在参与减法运算之前,都会被自动转换成数值类型之后再参与运算

  var res1 = 1 - true;
  console.log(res1); // 0
  
  var res2 = 1 - null;
  console.log(res2); //1
  

• 任何数据和NaN进行运算,结果都是NaN

  var res3 = 1 - undefined;
  console.log(res3); // NaN
  
  var res5 = 1 - 'abc';
  console.log(res5); // NaN
  

• 任何数据和字符串相减,都会把字符串转换成数值类型之后再运算

  var res4 = 1 - '12';
  console.log(res4); // -11
  

1.3 乘法注意点

• 和减法运算的注意点一模一样

var res1 = 1 * true;
console.log(res1); // 1

var res2 = 1 * null;
console.log(res2); // 0

var res3 = 1 * undefined;
console.log(res3); // NaN

var res4 = 1 * '12';
console.log(res4); // 12

var res5 = 1 * 'abc';
console.log(res5); // NaN

1.4 取模(取余)运算注意点

格式: m % n = 余数

• 如果m>n的, 那么就正常取余

  var res1 = 10 % 3;
  console.log(res1); // 1
  

• 如果m<n的, 那么结果就是m

  var res2 = 3 % 4;
  console.log(res2); // 3
  

• 如果n是0, 那么结果就是NaN

  var res3 = 10 % 0;
  console.log(res3); // NaN
  

• 取余运算结果的正负性, 取决于m而不是n

  var res4 = 10 % -2;
  console.log(res4); // 0
  
  var res5 = -10 % 2;
  console.log(res5); // -0
  
  var res6 = -10 % -2;
  console.log(res6); // -0
  

2. 赋值运算符

赋值运算符就是将等号右边的值存储到等号左边的变量中

2.1 赋值运算符

= 、+=加等于、-=减等于、*=乘等于、/=除等于、%=模等于

// = 
// 把5赋值给res这个变量
var res = 5;

// 加等于
var number = 3;
// 会将等号左边存储的值取出来和右边进行指定的运算, 运算完毕之后再将运算的结果存储到左边
// number += 2 相当于 number = number + 2 那么就是 number = 3 + 2
// -=、*=、/=、%=、也是一样的步骤
number += 2;
console.log(number); // 5

2.2 赋值运算的优先级和结合性

• 赋值运算优先级低于算术运算

  // 由于算术运算符的优先级高于赋值运算符，所以先计算1+1然后把结果赋值给res1这个变量
  var res1 = 1 + 1
  console.log(res1); // 2
  

• 赋值运算符的结合性是右结合性(从右至左的计算)

// 由于赋值运算符的结合性是右结合性,所以将会把5赋值给num2然后再将num2中的值赋给num1
var num1, num2;
num1 = num2 = 5;
console.log(num1); // 5
console.log(num2); // 5

• 赋值运算符的左边只能放变量，不能放常量

3. 自增自减运算符

3.1 自增运算符 ++

可以快速的对一个变量中保存的数据进行+1的操作

var num1 = 2;
//num1 = num1 + 1
// num1 += 1; ===>  num1 = num1 + 1;
// num++; ===> num1 = num1 + 1;
++num1
console.log(num1); // 3

3.2 自减运算符 --

可以快速的对一个变量中保存的数据进行-1的操作

let num2 = 2;
// num2 = num2 - 1;
// num2 -= 1; ===> num2 = num2 - 1
// num2--; ===> num2 = num2 - 1
--num2;
console.log(num2); // 1

3.3 自增自减写在变量前面和后面的区别

• 自增自减写在变量的前面，表示变量先自增或自减，然后再参与其他运算
• 自增自减写在变量的后面，表示变量先进行运算，然后再自增或自减

// 写在变量的后面
var num = 1;
// 这里拆解成这样 var res = 1 + 1; num++; 
var res = num++ + 1;
console.log(res); // 2
console.log(num); // 2

// 写在变量的前面
var num = 1;
// 这里拆解成这样  ++num; var res = 2 + 1;
var res = ++num + 1;
console.log(res); // 3
console.log(num); // 2

// 在企业开发中不推荐这样写法 var res = a++ + b; // var res = a + b; a++;
var a = 5;
var b = 10;
var res = a + b;
a++;
console.log(res); // 15
console.log(a); // 6

4. 关系运算符

> 大于

< 小于

>= 大于等于

<= 小于等于

== 等于

!== 不等于

=== 全等于

!== 不全等于

关系运算符只有两个返回值，true 和 fasle

关系成立，返回 true

关系不成立，返回 false

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

关系运算符的注意点

• 如果是非数值类型比较，那么会先转换成数值类型再比较

  console.log(1 > false); // true
  console.log(1 > true); // false
  console.log(1 > undefined); // false
  console.log(1 > null); // true
  console.log(1 > ''); // true
  console.log(1 > ' '); // true
  console.log(1 > 'a'); //flase
  

• 对于关系运算符来说，任何数据和 NaN 比较都是 false

  console.log(1 > NaN); // false
  console.log(undefined == NaN); // false
  console.log(null == NaN); // false
  console.log('a' > NaN); // false
  console.log(true == NaN); // false
  //如果想判断某一个数据是否是NaN那么可以通过isNaN来进行判断
  let num = NaN;
  let res = isNaN(num)
  console.log(res); // true
  

• 如果是两边都是字符串类型，那么不会转换成数值类型，而是比较字符串相对应的Unicode编码

  console.log('a' > 'b'); // false
  console.log('a' < 'b'); // true
  // 如果字符串中有多个字符, 会从左至右的依次比较, 直到条件不满足为止
  console.log( "ab" > "ac"); // false
  

• === 和 !== 会比较值和数据类型是否相等 == 和 != 只会比较值

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

• 关系运算符都是左结合性(从左往右运算)

  // 因为关系运算符是左结合性 所以会先运算 10 > 3 返回 true  再计算 1 > 2  最后的结果为false
  console.log(10 > 3 >2);
  // STEP1  10 < 25 返回true  STEP2 运算 1 < 20  结果为true
  console.log(10 < 25 < 20);
  

• 关系运算符中 > 大于、< 小于、>= 大于等于、<= 小于等于的优先级大于 ==、!=、===、!==

  // 先会计算 10 > 3  返回 true  再计算 1 == 5  最后结果返回false
  console.log(10 > 3 == 5);
  // 先会计算 10 > 0  返回 true 再计算 10 == 1  最后结果false
  console.log(10 == 10 > 0);
  

5. 逻辑运算符

逻辑运算符往往用于多个表达式的求值。

5.1 逻辑与（&&）

格式： 条件表达式A && 条件表达式B

返回值： true/false

特点：如果有一个条件表达式为假则为假

// true && false 结果为false
console.log((10 > 5) && (1 > 2)); // false
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false

5.2 逻辑或（||）

格式： 条件表达式A && 条件表达式B

返回值： true/false

特点：如果有一个条件表达式为真则为真

// true || false 结果为true
console.log((10 > 5) || (1 > 2)); // true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false

5.3 逻辑非（!）

格式： ！条件表达式

返回值： true/false

特点：真变假，假变真

// 非true 就是 false
console.log( !true ); // false
// 先计算括号里的 1 > 2 返回 false 取反 变为 true
console.log( !(1 > 2) ); // true

5.4 逻辑运算符的优先级和结合性

逻辑运算符的结合性是左结合性

逻辑与的优先级大于逻辑或

// 左结合性就是从左往右运算 就计算 true && false 结果为 false
var res = true  && false;
console.log(res); // false
// 赋值运算就是右结合性 先运算 1 + 1 返回把结果赋值给 res 这个变量
var total = 1 + 1
console.log(total); // 2

5.5 逻辑运算符的注意点

• 在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点

  如果条件A不成立, 那么就返回条件A

  如果条件A成立, 无论条件B是否成立, 都会返回条件B

  // 条件A为flase 那么就会返回条件A 值为0
  console.log(0 && 123); // 0
  // 条件A为true 那么条件B 不论真假都会返回B
  console.log(1 && 123); // 123
  

• 在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点

  如果条件A成立, 那么就返回条件A

  如果条件A不成立, 无论条件B是否成立, 都会返回条件B

  // 条件A为flase 那么就会返回条件B 值为123
  console.log(0 || 123); // 123
  // 条件A为true 那么条件B 不论真假都会返回A 值为1
  console.log(1 || 123); // 1
  

6. 三元（目）运算符

三元运算符格式：条件表达式 ? 返回结果A : 返回结果B

在三元运算符中如果条件表达式为真，那么返回结果A

在三元表达式中如果条件表达式为假，那么返回结果B

// 10 > 6 返回 true 返回条件A Hello
console.log(10 > 6 ? 'Hello' : 'World'); // Hello 
// 5 > 6 返回 false 返回条件B World
console.log(5 > 6 ? 'Hello' : 'World'); // World