js 中的运算符与表达式

1、运算符与表达式

运算符：也被称为操作符，用于执行程序代码运算，会针对一个以上操作数来进行运算

表达式：是由一个或多个操作数通过运算符连接起来的式子，每个表达式最终都会有一个结果，返回给开发者

运算符的分类

算术运算符

赋值运算符

比较运算符

逻辑运算符

三目运算符

1、算术运算符

1、加+

规则：

1、如果两边都是数字，则就是普通的数学计算

2、如果有一边是字符串，则另一边也转成字符串，变成字符串的拼接

3、如果没有字符串，则调用 Number 方法，转成数字，再进行相加

4、如果有一边是对象，则对象调用 toString 得到字符串表示，再进行计算

var a = '5';
var b = 20;
console.log(a + b);

console.log(null + '小王'); // 'null小王'
console.log('a' + NaN); // 'aNaN'

console.log(null + true); // 1
console.log(false + undefined); // NaN

console.log(1 + [1]); // '11'

console.log(true + false); // 1
console.log(true + 'false'); // 'truefalse'
console.log(true + ''); // 'true'
console.log(true + undefined); // NaN
console.log(true + [true]); // 'truetrue'
console.log(1 + {}); // '1[object Object]'

// 加法运算出错的场景
var a = 5;
var b = 20;
// console.log('5+20的和是25');
console.log(a + '+' + b + '的和是' + (a + b));

2、减乘除 - * /

规则：将操作符的两边都调Number()转数字，再进行操作

console.log(20 - '5'); // 15
console.log('小王' - 5); // NaN
console.log('3' * '10'); // 30

3、取余 %

规则：将操作符的两边都调Number()转数字，再进行操作

console.log(10 % 3); // 1
console.log('10' % 3); // 1

// 一个递增的变量取模n，得到的是0 到 n-1之间的数
console.log(0 % 3); // 0
console.log(1 % 3); // 1
console.log(2 % 3); // 2
console.log(3 % 3); // 0
console.log(4 % 3); // 1
console.log(5 % 3); // 2
console.log(6 % 3); // 0
console.log(7 % 3); // 1

4、加加减减

规则：如果不是数字，则调Number()转数字，再进行操作

// ++ --
var a = 2;
a++;
console.log(a); // 3

var b = 2;
++b;
console.log(b); // 3

// 加加在前和加加在后的区别：
// 加加在前，先自增，再参与表达式的计算，加加在后，先参与表达式的计算，再自增
var c = 2;
var f = 2;
d = c++;
e = ++f;
console.log(d); // 2
console.log(e); // 3
console.log(c); // 3
console.log(f); // 3

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;
var num4 = num1 + num2;
console.log(num3, num4);

var a = 10;
var b = ++a + a++;
console.log(a, b);

2、赋值运算符

= += -= *= /= %=

作用：操作符的两边先操作，结果赋给左边

var a = 5; // 将5赋给a

a += 3; // a = a + 3; 
console.log(a); // 8

a *= 3;
console.log(a); // 24

3、比较运算符

比较运算符: 返回的是布尔值

// > >= < <=
// 如果操作符的两边都是字符串，则是字符串的比较，比较的是ASCII编码。是从左向右，一位一位的比较
// 如果有一边不是字符串，则调用Number转成数字，再进行比较
console.log(12 > 2); // true
console.log(12 > '2'); // true
console.log('12' > '2'); // false

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

// == !=
// 比较值是否相等，为了比较，它会调Number()隐式类型转换
// 但是null和undefined不进行转换，它们的相等比较为真
console.log('10' == 10); // true
console.log(null == undefined); // true

console.log('10' != 10); // false
console.log(null != undefined); // false

// === !==   (推荐使用)
// 三等：值和类型都要相等，不会发生隐式类型转换
console.log('10' === 10); // false
console.log(null === undefined); // false

console.log(null !== undefined); // true

// 错误的情况
var a = 5;
if (a = 5) { }

4、逻辑运算符

// && 与，并且
console.log(12 > 10 && 12 >= 12); // true
console.log(12 < 10 && 12 >= 12); // false
// 短路操作，一边能决定的事，就不用看另一边了

// 如果左边为假，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为真，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值
console.log(0 && 12 > 10); // 0
console.log(null && 12 > 10); // null
console.log(3 > 5 && 12 > 10); // false

console.log(5 && 6); // 6
console.log(5 && 6 > 3); // true
console.log(5 && null); // null

// || 或，或者  
// 只要一边为真，结果就为真，左边为真，就不用跑到右边
// 如果左边为真，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为假，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值
console.log(12 > 10 || 12 < 10); // true
console.log(1 || 12 < 10); // 1
console.log(0 || 12 < 10); // false

// ! 非，取反
var a = 4;
console.log(!a); // false
console.log(!!a); // true   相当于调用了Boolean()这个方法

console.log(!!!!!!!!a); // true

5、三元运算符

// 三目（三元）
// 语法：表达式 ? 表达式为真执行这里 : 表达式为假执行这里;

var age = 7;
// age >= 7 ? console.log('上小学') : console.log('上大班');

// 推荐
var msg = age >= 7 ? '上小学' : '上大班';
console.log(msg);

6、运算符的优先级

https://github.com/xhlwill/blog/issues/16

console.log(3 + 4 * 5); // 23
console.log(3 > 2 && 2 > 1); // true

console.log(10 > 5 > 4); // false
console.log(1 < 2 < 3); // true

7、隐式类型转换

数据在进行 +、-、*、/、%、++、-- 等操作的时候会自动转换数据类型进行操作。

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // '10string'
console.log(19 + 10 + 'age' + 18 + 10) // '29age1810'
console.log(10 + '100'); // '10100'
console.log(10 + true); // 11
console.log(true + false); // 1
console.log('10' + true); // '10true'
console.log('' + 100); // '100'
console.log(10 + null); // 10
console.log(10 + undefined); // NaN
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100
console.log(100 - true); // 99
console.log(100 - '80'); // 20
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0
console.log(100 * '100');// 10000
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // 无穷
console.log(100 / '70'); // 1.4
console.log(100 / null); // 无穷
console.log(100 / undefined); // NaN
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++;
console.log(n); // 11
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // false

8、强制类型转换和隐式类型转换

1、强制类型转换

Number(参数)   
parseInt(参数)   
parseFloat(参数)   
String(参数)   
参数.toString()   
Boolean(参数)

2、隐式类型转换

+ - * / % ++ -- 都具有隐式类型转换的作用