/**
* 10种算术运算符
* 1.加法运算符：x + y
* 2.减法运算符： x - y
* 3.乘法运算符： x * y
* 4.除法运算符：x / y
* 5.指数运算符：x ** y
* 6.余数运算符：x % y
* 7.自增运算符：++x 或者 x++
* 8.自减运算符：--x 或者 x--
* 9.数值运算符： +x
* 10.负数值运算符：-x
*/
// 1 加法运算符
1 + 1 // 2
true + true // 2
1 + true // 2 将布尔值转为数值，进行相加
'a' + 'bc' // "abc" 字符串拼接
1 + 'a' // "1a" 非字符串 + 字符串，会将非字符串转为字符串，然后进行拼接
false + 'a' // "falsea"
'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"
// 除加法外的运算符，所有运算子一律转为数值，再进行相应的数学运算
1 - '2' // -1
1 * '2' // 2
1 / '2' // 0.5
// 对象相加，先转成原始类型的值，然后再相加
var obj = { p: 1 };
obj + 2 // "[object Object]2" 自动调用对象的valueOf方法返回对象自身，这时再自动调用对象的toString方法，将其转为字符串
// 2 余数运算
// 余数运算符（%）返回前一个运算子被后一个运算子除，所得的余数
12 % 5 // 2
-1 % 2 // -1
1 % -2 // 1
// 正确的写法
function isOdd(n) {
return Math.abs(n % 2) === 1; // 为了得到负数的正确余数值，可以先使用绝对值函数
}
isOdd(-5) // true
isOdd(-4) // false
// 3 自增和自减运算符,它们会修改原始变量
var x = 1;
++x // 2 x自增后，返回2
x // 2
--x // 1 进行自减，返回1
x // 1
// 自增和自减运算符，放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；
// 放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。
var x = 1;
var y = 1;
x++ // 1
++y // 2
// 4 数值运算符，负数值运算符:一元运算符
// 数值运算符的作用在于可以将任何值转为数值（与Number函数的作用相同）。
// 数值运算符号和负数值运算符，都会返回一个新的值，而不会改变原始变量的值。
+true // 1
+[] // 0
+{} // NaN
var x = 1;
-x // -1
-(-x) // 1
// 5 指数运算符
2 ** 4 // 16
2 ** 3 ** 2 // 相当于 2 ** (3 ** 2) // 512
// 6 赋值运算符
// 最常见的赋值运算符，等号（=）
var x = 1; // 将 1 赋值给变量 x
var x = y; // 将变量 y 的值赋值给变量 x
x += y // 等同于 x = x + y
x -= y // 等同于 x = x - y
x *= y // 等同于 x = x * y
x /= y // 等同于 x = x / y
x %= y // 等同于 x = x % y
x **= y // 等同于 x = x ** y
x >>= y // 等同于 x = x >> y
x <<= y // 等同于 x = x << y
x >>>= y // 等同于 x = x >>> y
x &= y // 等同于 x = x & y
x |= y // 等同于 x = x | y
x ^= y // 等同于 x = x ^ y
/**
* 8个比较运算符：
* > 大于运算符
* < 小于运算符
* <= 小于或等于运算符
* >= 大于或等于运算符
* == 相等运算符
* === 严格相等运算符
* != 不相等运算符
* !== 严格不相等运算符
*/
// 非相等运算符：字符串的比较
// 字符串按照字典顺序进行比较
// 首先比较首字符的 Unicode 码点。如果相等，再比较第二个字符的 Unicode 码点，以此类推
'cat' > 'dog' // false
'cat' > 'catalog' // false
'cat' > 'Cat' // true' 小写的c的 Unicode 码点（99）大于大写的C的 Unicode 码点（67），所以返回true
'大' > '小' // false “大”的 Unicode 码点是22823，“小”是23567，因此返回false
// 非相等运算符：非字符串的比较
// 如果两个运算子都是原始类型的值，则是先转成数值再比较
5 > '4' // true // 等同于 5 > Number('4') // 即 5 > 4
true > false // true // 等同于 Number(true) > Number(false) // 即 1 > 0
2 > true // true // 等同于 2 > Number(true) // 即 2 > 1
// 任何值（包括NaN本身）与NaN使用非相等运算符进行比较，返回的都是false
1 > NaN // false
1 <= NaN // false
'1' > NaN // false
'1' <= NaN // false
NaN > NaN // false
NaN <= NaN // false
// 运算子是对象，会转为原始类型的值，再进行比较
// 对象转换成原始类型的值，算法是先调用valueOf方法；如果返回的还是对象，再接着调用toString方法
var x = [2];
x > '11' // true // 等同于 [2].valueOf().toString() > '11' // 即 '2' > '11'
x.valueOf = function () { return '1' };
x > '11' // false // 等同于 [2].valueOf() > '11' // 即 '1' > '11'
[2] > [1] // true // 等同于 [2].valueOf().toString() > [1].valueOf().toString() // 即 '2' > '1'
[2] > [11] // true // 等同于 [2].valueOf().toString() > [11].valueOf().toString() // 即 '2' > '11'
{ x: 2 } >= { x: 1 } // true // 等同于 { x: 2 }.valueOf().toString() >= { x: 1 }.valueOf().toString() // 即 '[object Object]' >= '[object Object]'
// 严格相等运算符
// 相等运算符（==）比较两个值是否相等，严格相等运算符（===）比较它们是否为“同一个值”
// 如果两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转换成同一个类型，再用严格相等运算符进行比较
1 === "1" // false 类型不同，直接返回 false
true === "true" // false 类型不同，直接返回 false
1 === 0x1 // true 十进制的1与十六进制的1，因为类型和值都相同，返回true
NaN === NaN // false NaN与任何值都不相等（包括自身）
+0 === -0 // true 正0等于负0
// 复合类型（对象、数组、函数）的数据比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个地址。
{} === {} // false
[] === [] // false
(function () {} === function () {}) // false
var v1 = {};
var v2 = v1;
v1 === v2 // true 引用的同一对象，所以相等
var obj1 = {};
var obj2 = {};
obj1 > obj2 // false 比较的是值
obj1 < obj2 // false 比较的是值
obj1 === obj2 // false 比较的是地址
// undefined和null与自身严格相等
undefined === undefined // true
null === null // true
var v1; // 声明时默认值是 undefined
var v2; // 声明时默认值是 undefined
v1 === v2 // true 两个 undefined 严格相等
1 !== '1' // true // 等同于 !(1 === '1') // 先求严格相等，再取反
// 相等运算符
// 原始类型值比较
1 == 1.0 // 等同于 1 === 1.0 // 比较相同类型的数据时，与严格相等运算符完全一样
1 == true // true // 等同于 1 === Number(true)
0 == false // true // 等同于 0 === Number(false)
2 == true // false // 等同于 2 === Number(true)
2 == false // false // 等同于 2 === Number(false)
'true' == true // false // 等同于 Number('true') === Number(true) // 等同于 NaN === 1
'' == 0 // true // 等同于 Number('') === 0 // 等同于 0 === 0
'' == false // true // 等同于 Number('') === Number(false) // 等同于 0 === 0
'1' == true // true // 等同于 Number('1') === Number(true) // 等同于 1 === 1
'\n 123 \t' == 123 // true // 因为字符串转为数字时，省略前置和后置的空格
// 对象与原始类型值比较
// 先调用对象的valueOf()方法，如果得到原始类型的值，就按照上一小节的规则，互相比较；如果得到的还是对象，则再调用toString()方法，得到字符串形式，再进行比较
// 数组与数值的比较
[1] == 1 // true
// 数组与字符串的比较
[1] == '1' // true
[1, 2] == '1,2' // true
// 对象与布尔值的比较
[1] == true // true
[2] == true // false
const obj = {
valueOf: function () {
console.log('执行 valueOf()');
return obj;
},
toString: function () {
console.log('执行 toString()');
return 'foo';
}
};
obj == 'foo' // 执行 valueOf() // 执行 toString() // true
// undefined和null只有与自身比较，或者互相比较时，才会返回true；与其他类型的值比较时，结果都为false
undefined == undefined // true
null == null // true
undefined == null // true
false == null // false
false == undefined // false
0 == null // false
0 == undefined // false
0 == '' // true
0 == '0' // true
2 == true // false
2 == false // false
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true
// 不相等运算符
// 先求相等运算符的结果，然后返回相反值。
1 != '1' // false // 等同于 !(1 == '1')
/**
* 4个布尔运算符：
* 取反运算符：!
* 且运算符：&&
* 或运算符：||
* 三元运算符：?:
*/
// 取反运算符（!）
!true // false
!false // true
// 以下6个值取反为 false，其余均为 true
undefined
null
false
0
NaN
空字符串（''）
// 一个值连续做两次取反运算，等于将其转为对应的布尔值
!!x // 等同于 Boolean(x)
// 且运算符（&&）
// 如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；
// 如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。
't' && '' // ""
't' && 'f' // "f"
't' && (1 + 2) // 3
'' && 'f' // "" 跳过第二个运算子的机制，被称为“短路”
'' && '' // ""
var x = 1;
(1 - 1) && ( x += 1) // 0
x // 1
i && doSomething(); // 等价于 --
if (i) {
doSomething();
}
// 且运算符多个连用
// 返回第一个布尔值为false的表达式的值。如果所有表达式的布尔值都为true，则返回最后一个表达式的值。
true && 'foo' && '' && 4 && 'foo' && true // ''
1 && 2 && 3 // 3
// 或运算符（||）
// 如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；
// 如果第一个运算子的布尔值为false，则返回第二个运算子的值。
't' || '' // "t"
't' || 'f' // "t"
'' || 'f' // "f"
'' || '' // ""
var x = 1;
true || (x = 2) // true 这种只通过第一个表达式的值，控制是否运行第二个表达式的机制，就称为“短路”
x // 1
// 或运算符多个连用
// 返回第一个布尔值为true的表达式的值。如果所有表达式都为false，则返回最后一个表达式的值。
false || 0 || '' || 4 || 'foo' || true // 4
false || 0 || '' // ''
// 常见使用场景，设置默认值：
saveText(this.text || '') // 等价于 --
function saveText(text) {
text = text || '';
// ...
}
// 三元条件运算符（?:）,JavaScript 语言唯一一个需要三个运算子的运算符。
// 如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。
't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"
// 通常来说，三元条件表达式与if...else语句具有同样表达效果，前者可以表达的，后者也能表达。
// - if...else是语句，没有返回值；
// - 三元条件表达式是表达式，具有返回值。
console.log(true ? 'T' : 'F');
/**
* 7个二进制位运算符：
* 二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。
* 二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。
* 二进制否运算符（not）：符号为~，表示对一个二进制位取反。
* 异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。
* 左移运算符（left shift）：符号为<<。
* 右移运算符（right shift）：符号为>>。
* 头部补零的右移运算符（zero filled right shift）：符号为>>>。
*/
// 这些位运算符直接处理每一个比特位（bit），所以是非常底层的运算，好处是速度极快
// 缺点是很不直观，许多场合不能使用它们，否则会使代码难以理解和查错
// 位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行
// 做位运算的时候，是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数
i = i | 0; // 将i（不管是整数或小数）转为32位整数
function toInt32(x) { // 将任意数值转为32位整数的函数，对于大于或等于2的32次方的整数，大于32位的数位(最大值2147483647的数)都会被舍去
return x | 0;
}
toInt32(1.001) // 1
toInt32(1.999) // 1
toInt32(1) // 1
toInt32(-1) // -1
toInt32(Math.pow(2, 32) + 1) // 1
toInt32(Math.pow(2, 32) - 1) // -1
// 二进制或运算符（|）
// 逐位比较两个运算子，两个二进制位之中只要有一个为1，就返回1，否则返回0
0 | 3 // 3 0和3的二进制形式分别是00和11，所以进行二进制或运算会得到11（即3）
2.9 | 0 // 2 将小数部分舍去，只保留整数部分2,
-2.9 | 0 // -2
2147483649.4 | 0; // -2147483647 大于32位的数位(最大值2147483647的数)都会被舍去
// 二进制与运算符（&）
// 逐位比较两个运算子，两个二进制位之中只要有一个位为0，就返回0，否则返回1
0 & 3 // 0 0（二进制00）和3（二进制11）进行二进制与运算会得到00（即0）
// 二进制否运算符（~）
// 将每个二进制位都变为相反值（0变为1，1变为0）
~ 3 // -4 JavaScript 内部将所有的运算子都转为32位的二进制整数再进行运算
// 3的32位整数形式是00000000000000000000000000000011，二进制否运算以后得到11111111111111111111111111111100。
// JavaScript 内部采用补码形式表示负数，即需要将这个数减去1，11111111111111111111111111111011
// 再取一次反 00000000000000000000000000000100
// 然后加上负号，得到这个负数对应的10进制值 10000000000000000000000000000100
// 简单理解： 一个数与自身的取反值相加，等于-1
//
// 所有的位运算都只对整数有效。二进制否运算遇到小数时，也会将小数部分舍去，只保留整数部分。
~~2.9 // 2 所有取整方法中最快的一种
~~47.11 // 47
~~1.9999 // 1
~~3 // 3
~'011' // -12 // 相当于~Number('011')
~'42 cats' // -1 // 相当于~Number('42 cats')
~'0xcafebabe' // 889275713 // 相当于~Number('0xcafebabe')
~'deadbeef' // -1 // 相当于~Number('deadbeef')
~[] // -1 // 相当于 ~Number([])
~NaN // -1 // 相当于 ~Number(NaN)
~null // -1 // 相当于 ~Number(null)
// 异或运算（^）
// 两个二进制位不同时返回1，相同时返回0
0 ^ 3 // 3 0（二进制00）与3（二进制11）进行异或运算，它们每一个二进制位都不同，所以得到11（即3）
// “异或运算”可以在不引入临时变量的前提下，互换两个变量的值(666~~)
var a = 10;
var b = 99;
a ^= b, b ^= a, a ^= b;
a // 99
b // 10
12.9 ^ 0 // 12 用来取整
// 左移运算符（<<）
// 将一个数的二进制值向左移动指定的位数，尾部补0，即乘以2的指定次方。向左移动的时候，最高位的符号位是一起移动的。
// 乘以2的指定次方
4 << 1 // 8 4 的二进制形式为100 左移一位为1000（即十进制的8） // 相当于乘以2的1次方
-4 << 1 // -8 11111111111111111111111111111100 左移一位得到 11111111111111111111111111111000 转为十进制（减去1后取反，再加上负号）即为-8
// 如果左移0位，就相当于将该数值转为32位整数，等同于取整，对于正数和负数都有效。
13.5 << 0 // 13
-13.5 << 0 // -13
//
// 将颜色的 RGB 值转为 HEX 值
var color = {r: 186, g: 218, b: 85};
// RGB to HEX
// (1 << 24)的作用为保证结果是6位数
var rgb2hex = function(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b)
.toString(16) // 先转成十六进制，然后返回字符串
.substr(1); // 去除字符串的最高位，返回后面六个字符串
}
rgb2hex(color.r, color.g, color.b) // "#bada55"
// 右移运算符（>>）
// 将一个数的二进制值向右移动指定的位数
// 如果是正数，头部全部补0；如果是负数，头部全部补1
// 除以2的指定次方（最高位即符号位参与移动）
4 >> 1
// 2
/*
// 因为4的二进制形式为 00000000000000000000000000000100，
// 右移一位得到 00000000000000000000000000000010，
// 即为十进制的2
*/
-4 >> 1
// -2
/*
// 因为-4的二进制形式为 11111111111111111111111111111100，
// 右移一位，头部补1，得到 11111111111111111111111111111110,
// 即为十进制的-2
*/
5 >> 1 // 2 // 相当于 5 / 2 = 2
21 >> 2 // 5 // 相当于 21 / 4 = 5
21 >> 3 // 2 // 相当于 21 / 8 = 2
21 >> 4 // 1 // 相当于 21 / 16 = 1
// 头部补零的右移运算符（>>>）
// 与右移运算符（>>）只有一个差别，就是一个数的二进制形式向右移动时，头部一律补零，而不考虑符号位。所以，该运算总是得到正值。
4 >>> 1 // 2
-4 >>> 1 // 2147483646 将一个值转为32位无符号整数
/*
// 因为-4的二进制形式为11111111111111111111111111111100，
// 带符号位的右移一位，得到01111111111111111111111111111110，
// 即为十进制的2147483646。
*/
// 查看一个负整数在计算机内部的储存形式，最快的方法就是使用这个运算符。
-1 >>> 0 // 4294967295
// 位运算符可以用作设置对象属性的开关
// 看不懂：https://wangdoc.com/javascript/operators/bit.html#%E5%BC%80%E5%85%B3%E4%BD%9C%E7%94%A8
/**
* 其他运算符，运算顺序
*/
// void 运算符
// 执行一个表达式，然后不返回任何值，或者说返回undefined
void 0 // undefined
void(0) // undefined
// 这个运算符的主要用途是浏览器的书签工具（Bookmarklet），以及在超级链接中插入代码防止网页跳转。
<script>
function f() {
console.log('Hello World');
}
</script>
<a href="http://example.com" onclick="f(); return false;">点击</a>
// void 取代以上代码
<a href="javascript: void(f())">文字</a>
//用户点击链接提交表单，但是不产生页面跳转
<a href="javascript: void(document.form.submit())">
提交
</a>
// 逗号运算符
// 对两个表达式求值，并返回后一个表达式的值
// 用途是，在返回一个值之前，进行一些辅助操作
'a', 'b' // "b"
var x = 0;
var y = (x++, 10);
x // 1
y // 10
// 运算顺序
var x = 1;
var arr = [];
var y = arr.length <= 0 || arr[0] === undefined ? x : arr[0];
// 优先级从高到低依次为：小于等于（<=)、严格相等（===）、或（||）、三元（?:）、等号（=）
var y = ((arr.length <= 0) || (arr[0] === undefined)) ? x : arr[0];
// 圆括号
function f() {
return 1;
}
(f) // function f(){return 1;} // 函数放在圆括号中，会返回函数本身。
f() // 1 // 如果圆括号紧跟在函数的后面，就表示调用函数
// 左结合、右结合
// JavaScript 语言的大多数运算符是“左结合”
x + y + z
// 引擎解释如下
(x + y) + z
// 少数运算符是“右结合”，其中最主要的是赋值运算符（=）和三元条件运算符（?:）、指数运算
w = x = y = z;
q = a ? b : c ? d : e ? f : g;
2 ** 3 ** 2
// 引擎解释如下
w = (x = (y = z));
q = a ? b : (c ? d : (e ? f : g));
2 ** (3 ** 2) // 512
