转生异世界 从0开始学 JavaScript - Two day 操作符

1. 操作符

1.1 算数运算符

        算数运算符和我们在数学中的学的一样，主要用于数值的运算，Js中提供的算数运算符有下面这些，例：

操作符	作用
+	加
-	减
*	乘
/	除
%	取余

//减、乘、除、取余运算时，首先会将字符串转换成数字，然后再进行运算。
console.log('10' - '5'); // 5
console.log('8' / '4'); // 2 
console.log('3' * '3'); // 9 
console.log('12' % '5'); // 2 

// 数值和字符运算
console.log(12 + ''); // '12'
console.log(12 + 3 + '4'); // '154'
console.log('4'+ 12 + 3); // '4123'

//特殊情况
console.log('123abc' - '123'); //NaN

1.2 赋值运算符 ( = )

        赋值运算符是由 = 表示，作用是把右边的值赋值给左边的变量，例：

// 变量名 = 值
var age = 18;

        在 “ = ” 前加算数运算符的话，可以完成复合运算，例：

var num = 10;
num = num + 2; // 12

//可简写成

var num = 10;
num += 2; // 12

//每个算数运算符都有，例：
//每一个num运算初始值都为10

num -= 3; // 7
num *= 4; // 40
num /= 2; // 5
num %= 2; // 0

1.3 自增自减运算符

        例：i++ 、 ++i  、i--  、 --i

        在不参与运算的情况下，++是自增1，--是自减1。例：

var i = 1；
// ++ 在后时，先运算在自增, -- 同理
console.log(i++); // 1

var j = 1;
// ++ 在前时，先自增在运算, -- 同理
console.log(++j); // 2

1.4 逻辑运算符

运算符	含义
||	或
&&	与(且)
！	非

1.4.1 逻辑或 ||

        逻辑或是由 || 组成，有两个参数，返回值是 true / false 。例：

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

        逻辑或的参数表如下：

第一个参数	第二个参数	结果
true	true	true
true	false	true
false	true	true
false	false	false

逻辑或的参数不仅仅是布尔值，还可以应用于任何类型的参数，但是要遵守以下规则：

• 如果两个参数被转换成布尔值，第一个值为 true 则返回第一个参数；
• 如果两个参数被转换成布尔值，第一个值为 false 则返回第二个参数；

例：

console.log(true || false); // true
//第一个参数为 true 则直接返回第一个参数，不在运行第二个参数。
console.log('123' || '0'); // 123
//第一个参数为 false 则返回第二个参数。
console.log('' || NaN); // NaN

逻辑或还有一种情况。例：

// 第一个参数为 true
var bool = true;
var result = (bool || undefinedObject); // true
// 会直接返回第一个参数，第二参数不在运行
alert(result); // 可以正常运行

// 第一个参数为 false
bool_two = false;
var result_two = (bool_two || undefinedObject); //控制台报错
// 会返回第二个参数，会因为 undefinedObject 未定义而在控制台报错，后续代码也不会执行。
alert(result_two); // 不会执行

1.4.2 逻辑与 &&

        逻辑或是由 && 组成，有两个参数，返回值也是 true / false 。例：

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

        逻辑或的参数表如下：

第一个参数	第二个参数	结果
true	true	true
true	false	false
false	true	false
false	false	false

        与逻辑或操作符一样，逻辑与的参数也不仅限于布尔值，它也可以是其他类型的参数。它遵循以下规则：

• 如果两个操作数被转换成布尔值第一个是 false 则返回第一个参数；
• 如果两个操作数被转换成布尔值第一个为 true 则返回第二个参数；

例：

console.log(true || false); // false
//第一个参数为 false 则直接返回第一个参数，不在运行第二个参数
console.log('0' || '123'); // 0
//第一个参数为 true 则返回第二个参数
console.log('1' || NaN); // NaN

        逻辑与还有一种情况和逻辑或正好相反。例：

第一个参数为 true
var bool = true;
var result = (bool && undefinedObject); // 控制台报错
// 会返回第二个参数；但 undefinedObjec 未定义，则会报错
alert(result); // 不在运行

// 第一个参数为 false
bool_two = false;
var result_two = (bool_two && undefinedObject); // 不会报错
// 第一个参数为 false 则会返回第一个参数
alert(result_two); // 正常运行

1.4.3 逻辑非 ！

        逻辑非操作符由一个叹号 ！表示，可以应用于 ECMAScript 中的任何值。无论这个值是什么数据类型，这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反。逻辑非操作符遵循下列规则：

• 如果参数被转换为布尔值之后是 true 则返回布尔值 false；
• 如果参数被转换为布尔值之后是 false 测返回布尔值 true；

例：

console.log( !1 ); // false
console.log( !0 ); // true
console.log( !'san' ); // false
console.log( !new Object() ); // false
console.log( !NaN ); // true
console.log( !null ); // true
console.log( !undefined ); // true

1.4.4 小总结

        可以背一下一个逻辑或与非的小口诀：一真则真，一假则假，取反。

        Ps：真的很好用！！！！！！！！！！！

1.5 关系运算符

操作符	作用
>	大于
<	小于
>=	大于等于
<=	小于等于
==	等于
===	全等于
!=	不等于
!==	不全等于

        用这些运算符来作用于两个参数的比较，返回值是布尔值，例：

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

        如果参与比较的参数值是非数值类型时，则会先进行隐式类型转换，然后在参与比较，规则如下：

• 如果两个参数都是数值，则进行数值比较；
• 如果两个参数时字符串，则对字符串的字符编码值进行比较；
• 如果一个参数是数值，则将另一个参数转换为一个数值，然后进行比较

例：

console.log( 'Blou' < 'app'); // true

        在比较字符串时，比较是两个字符串中对应位置的每个字符在 ASCii编码表 中对应的编码值（字母B的编码值为66，字母a的编码值是97）。

console.log( '22' < '3' ); // ture

        “2” 的字符编码是50，而 “3” 的字符编码是51。

console.log( '22' < 3 ); // false

        '22' 会因为 3 是数值类型，隐式转换为数值类型，在进行比较，所以为 false

console.log( 'a' < 3 ); // false

        'a' 会因为 3 是数值类型，隐式转换为数值类型，但是 a 没有可转数值，所以为 NaN （是数值类型，但没有数值）。任何与 NaN 比较的结果都是 false

console.log( 1 < 5 < 15 ); // true

        连续比较不能这么写，原因是他会先解析 5 < 1 返回一个 false， 然后拿 false < 15 去比较，结果必然是 true （ false 在比较时会隐式转换为0），一定要注意！！！！！！！！！

        可以利用逻辑与（ && ）来解决，例：

console.log( 5 < 1 && 1 < 15 ); // true

== 和 === 运算符用法

        对于基本数据类型来说，== 是当类型相等时，判断值是否相等，当类型不相等时，隐式类型转换过后在去比较值，而 === 只有在类型相等时，才会比较值是否相等。如果相等返回 true不相等返回 false。

例：

console.log( 1 == 1 ); // true
console.log( '2' == 2 ); // true
console.log( '3' === 3 ); // false

!= 运算符用法 

        != 运算符和 == 恰好相反，其他条件一样，对于基本数据类型来说，!= 是当类型相等时，判断值是否相等，当类型不相等时，隐式类型转换过后在去比较值，如果相等返回 false 不相等返回 true 。

console.log( '1' != '1' ); // false
console.log( '2' != 2 ); // false
console.log( 3 != 3); // false
console.log( '4' != 5 ); // true
console.log( 6 != 7 ); // true

 1.6 三元运算符

语法：

//表达式 ? 如果结果为true,执行代码1 : 如果结果为false,执行代码2 
console.log( 3 > 2 ? true : false ); // true

执行顺序：

1. 判断表达式是非为 true / false
2. 如果表达式结果为 true 则执行 ：前的代码
3. 如果表达式结果为 false 则执行：后的代码

1.7 运算符优先级（重点）

1. ( )优先级最高
2. 一元运算符  ++   --   !
3. 算数运算符  先*  /  %   后 +   -
4. 关系运算符  >   >=   <   <=
5. 相等运算符   ==   !=    ===    !==
6. 逻辑运算符 先&&   后 ||
7. 赋值运算符

总结

        今天学了小半天，主要学习了运算符的应用，总结写到现在（22：53）才写完，QAQ学习有些累了，晚上刷到这篇文章的网友早点休息，该睡觉了，熬夜秃顶警告！！！ 

Ps：有描述不对的地方希望大佬指正，我写的是我的见解，有的不一定对，求求了！！！！！

今日歌曲推荐 Go Solo - Tom Rosenthal - 单曲 - 网易云音乐