《JavaScript 教程》学习补遗（六）

运算符

布尔运算符

（1）布尔运算符用于将表达式转为布尔值，一共包含四个运算符。

• 取反运算符：!
• 且运算符：&&
• 或运算符：||
• 三元运算符：?:

（2）对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

• undefined
• null
• false
• 0
• NaN
• 空字符串（''）

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

!54 // false
!'hello' // false
![] // false
!{} // false

（3）两次取反就是将一个值转为布尔值的简便写法

!!x
// 等同于
Boolean(x)

（4）且运算符（&&），如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

't' && '' // ""
't' && 'f' // "f"
't' && (1 + 2) // 3
'' && 'f' // ""
'' && '' // ""

var x = 1;
(1 - 1) && ( x += 1) // 0，跳过第二个运算子的机制，被称为“短路”
x // 1

（5）且运算符可以多个连用，这时返回第一个布尔值为false的表达式的值。如果所有表达式的布尔值都为true，则返回最后一个表达式的值。

true && 'foo' && '' && 4 && 'foo' && true
// ''

1 && 2 && 3
// 3

（7）或运算符（||）常用于为一个变量设置默认值。

function saveText(text) {
  text = text || '';
  // ...
}

// 或者写成
saveText(this.text || '')

(8)三元条件表达式与if...else语句具有同样表达效果，前者可以表达的，后者也能表达。但是两者具有一个重大差别，if...else是语句，没有返回值；三元条件表达式是表达式，具有返回值。

console.log(true ? 'T' : 'F');

二进制运算符

（1）二进制位运算符用于直接对二进制位进行计算，一共有7个

• 二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1
• 二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0
• 二进制否运算符（not）：符号为~，表示对一个二进制位取反
• 异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0
• 左移运算符（left shift）：符号为<<
• 右移运算符（right shift）：符号为>>
• 头部补零的右移运算符（zero filled right shift）：符号为>>>

（3）位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行。
（4）虽然在 JavaScript 内部，数值都是以64位浮点数的形式储存，但是做位运算的时候，是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数。利用这个特性，可以写出一个函数，将任意数值转为32位整数。

function toInt32(x) {
  return x | 0;
}

（5）对于大于或等于2的32次方的整数，大于32位的数位都会被舍去。
（6）所以，将一个小数与0进行二进制或运算，等同于对该数去除小数部分，即取整数位。

2.9 | 0 // 2
-2.9 | 0 // -2

（7）这种取整方法不适用超过32位整数最大值2147483647的数。

2147483649.4 | 0;
// -2147483647

（8）一个数与自身的取反值相加，等于-1。

~ -3 // 2 

上面表达式可以这样算，-3的取反值等于-1减去-3，结果为2。

（9）对一个整数连续两次二进制否运算，得到它自身。

~~3 // 3

（10）对字符串进行二进制否运算，JavaScript 引擎会先调用Number函数，将字符串转为数值。

// 相当于~Number('011')
~'011'  // -12

// 相当于~Number('42 cats')
~'42 cats' // -1

// 相当于~Number('0xcafebabe')
~'0xcafebabe' // 889275713

// 相当于~Number('deadbeef')
~'deadbeef' // -1

（10）对于其他类型的值，二进制否运算也是先用Number转为数值，然后再进行处理。

// 相当于 ~Number([])
~[] // -1

// 相当于 ~Number(NaN)
~NaN // -1

// 相当于 ~Number(null)
~null // -1

（11）“异或运算”有一个特殊运用，连续对两个数a和b进行三次异或运算，a^=b; b^=a; a^=b;，可以互换它们的值。这意味着，使用“异或运算”可以在不引入临时变量的前提下，互换两个变量的值。

var a = 10;
var b = 99;

a ^= b, b ^= a, a ^= b;

a // 99
b // 10

（12）向左移动的时候，最高位的符号位是一起移动的。

// 4 的二进制形式为100，
// 左移一位为1000（即十进制的8）
// 相当于乘以2的1次方
4 << 1
// 8

-4 << 1
// -8

（13）

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"

（14）右移运算符（>>）表示将一个数的二进制值向右移动指定的位数。如果是正数，头部全部补0；如果是负数，头部全部补1。右移运算符基本上相当于除以2的指定次方（最高位即符号位参与移动）。

4 >> 1
// 2
/*
// 因为4的二进制形式为 00000000000000000000000000000100，
// 右移一位得到 00000000000000000000000000000010，
// 即为十进制的2
*/

-4 >> 1
// -2
/*
// 因为-4的二进制形式为 11111111111111111111111111111100，
// 右移一位，头部补1，得到 11111111111111111111111111111110,
// 即为十进制的-2
*/

（15）右移运算可以模拟 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

（16）头部补零的右移运算符（>>>）与右移运算符（>>）只有一个差别，就是一个数的二进制形式向右移动时，头部一律补零，而不考虑符号位。
这个运算实际上将一个值转为32位无符号整数。查看一个负整数在计算机内部的储存形式，最快的方法就是使用这个运算符。

-1 >>> 0 // 4294967295

开关作用

// A、B、C、D 四个开关，每个开关分别占有一个二进制位。
var FLAG_A = 1; // 0001
var FLAG_B = 2; // 0010
var FLAG_C = 4; // 0100
var FLAG_D = 8; // 1000

// 检查当前设置是否打开了指定开关
var flags = 5; // 二进制的0101

if (flags & FLAG_C) {
  // ...
}
// 0101 & 0100 => 0100 => true

// 假设需要打开`A`、`B`、`D`三个开关，我们可以构造一个掩码变量
var mask = FLAG_A | FLAG_B | FLAG_D;
// 0001 | 0010 | 1000 => 1011

// 计算后得到的`flags`变量，代表三个开关的二进制位都打开了。
flags = flags | mask;

// 与开关设置不一样的，全部关闭
flags = flags & mask;

// 异或运算可以切换（toggle）当前设置，即第一次执行可以得到当前设置的相反值，再执行一次又得到原来的值。
flags = flags ^ mask; 

// 二进制否运算可以翻转当前设置，即原设置为`0`，运算后变为`1`；原设置为`1`，运算后变为`0`。
flags = ~flags;

void 运算符

（1）void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回undefined。

void 0 // undefined
void(0) // undefined

（2） 在超级链接中插入代码防止网页跳转。

<a href="javascript: void(f())">文字</a>

（3） 用户点击链接提交表单，但是不产生页面跳转。

<a href="javascript: void(document.form.submit())">
  提交
</a>

逗号运算符

（1）逗号运算符用于对两个表达式求值，并返回后一个表达式的值。

'a', 'b' // "b"

var x = 0;
var y = (x++, 10);
x // 1
y // 10

（2）在返回一个值之前，进行一些辅助操作。

var value = (console.log('Hi!'), true);
// Hi!

value // true

运算顺序

（1）函数放在圆括号中，会返回函数本身。如果圆括号紧跟在函数的后面，就表示调用函数。

function f() {
  return 1;
}

(f) // function f(){return 1;}
f() // 1

（2）圆括号之中，只能放置表达式，如果将语句放在圆括号之中，就会报错。

(var a = 1)
// SyntaxError: Unexpected token var

（3）少数运算符是“右结合”，其中最主要的是赋值运算符（=）和三元条件运算符（?:）。

w = x = y = z;
q = a ? b : c ? d : e ? f : g;

上面代码的解释方式如下。

w = (x = (y = z));
q = a ? b : (c ? d : (e ? f : g));

指数运算符（**）也是右结合。

2 ** 3 ** 2
// 相当于 2 ** (3 ** 2)
// 512