004-读书笔记-JavaScript高级程序设计 基本概念(下)

摘要：操作符，会将数值改变正数变成负数负数变成正数。同时，也说明了，使用两个逻辑非操作符和的操作结果相同。操作符得到的是余数。不相等操作符有两种。

这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第三章。

递增和递减操作符

递增和递减操作符有两个 ++ 和 --。一元操作符使用的时候，可以前置也可以后置。由于两个操作方式类似，先只说明 ++，-- 类比就可以了。

使用 ++ 操作符，相当于使用了一个简化的语句：

</>复制代码 
var age = 27;
age++; // 这里相当于 age = age + 1; 的简化
console.log(age); // 28

</>复制代码 
前置 ++，先加后用；后置 ++，先用后加

前置操作：先加后用

</>复制代码 
var age = 27;
var num = ++age;       // 相当于 age = age + 1; var num = age; 的简写
console.log(age, num); // 28 28

后置操作：先用后加

</>复制代码 
var age = 27;
var num = age++;       // 相当于 var num = age; age = age + 1; 的简写
console.log(age, num); // 28 27

思考，下面的代码是什么样的简写？

</>复制代码 
var num1 = 12;
var num2 = 10;
var num3 = num1++ + ++num2;
console.log(num1, num2, num3); // 13 11 23

全写形式如下：

</>复制代码 
var num1 = 12;
var num2 = 10;
// ============
num2 = num2 + 1;
var num3 = num1 + num2;
num1 = num1 + 1;
// ============
console.log(num1, num2, num3); // 13 11 23

一元加和减操作符

一元加和减操作符包括 + 和 -。

+ 放在数值前面，不会修改数值的内容。

</>复制代码 
var num = 123;
num = +num; // 123

+ 放在任意数据类型之前，都会发生数据类型转换；转换的结果和使用 Number 方法的结果相同。可以理解成 Number 方法的简写形式。

</>复制代码 
+true        // 1
Number(true) // 1

- 操作符，会将数值改变：正数变成负数；负数变成正数。

</>复制代码 
var num = 123;
num = -num; // -123

逻辑非(!):

逻辑非就是取反操作，操作结果如下：

操作数 | 结果
-|-
true | false
false | true

逻辑非操作符后面可以跟任意数据类型的数据，操作结果就是 !Boolean()。也就是通过 Boolean() 函数得到的布尔类型值的取反操作。

</>复制代码 
!NaN          // true
!Boolean(NaN) // true

同时，也说明了，使用两个逻辑非操作符和 Boolean() 的操作结果相同。

</>复制代码 
!!NaN          // false
Boolean(NaN)   // false

逻辑与(&&):

第一个操作数 | 第二个操作数 | 结果
-|-|-
true | true | true
true | false | false
false | true | false
false | false | false

逻辑与操作符也被称为短路操作符，也就是，第一个操作数的结果为 false，那么就不会执行第二个操作数了。

</>复制代码 
var num = (3>2) && 5; // 第一个操作数的结果是true，因此num的结果为第二个操作数的结果 5
console.log(num); // 5

</>复制代码 
var num = (3<2) && 5; // 第一个操作数的结果是false，因此num的结果为第一个操作数的结果 false
console.log(num); // false

逻辑或(||):

第一个操作数 | 第二个操作数 | 结果
-|-|-
true | true | true
true | false | true
false | true | true
false | false | false

逻辑或也是一种短路操作符，如果第一个操作数的结果为 true，那么就不会执行第二个操作数了。

</>复制代码 
var num = (3>2) || 5; // 第一个操作数的结果是 true，最终的结果是第一个操作数的值
console.log(num); // true

</>复制代码 
var num = (3<2) || 5; // 第一个操作数的值是 false，最终结果是第二个操作数的值
console.log(num); // 5

乘性操作符有三种：* / %。使用乘性操作符的时候，会首先通过 Number() 方法转化操作数，然后再做运算。

/ 操作符得到的结果不像其他语言一样只得到整数，而是得到最终的结果。

</>复制代码 
console.log(2 / 3); // 0.6666666666666666
console.log(3 / 2); // 1.5
console.log(4 / 2); // 2

% 操作符得到的是余数。

</>复制代码 
console.log(3 % 2); // 1

通过 / 和 % 得到余数和结果。

</>复制代码 
function func(num1, num2) {
  return {
    res: ~~(num1 / num2), // ~~ 的作用是取整数
    yus: num1 % num2
  }
}
var res = func(17, 3);
console.log(`结果：${res.res}，余数：${res.yus}`); // 结果：5，余数：2

加性操作符有两个：+ -。

+ 操作符，在操作数不是数值的情况下，会先通过 String() 方法将操作数转成字符串，然后字符串相加。

</>复制代码 
console.log("5" + "2"); // "52"

- 操作符，在操作数不是数值的情况下，会通过 Number() 方法将操作数转成数值，然后操作。

</>复制代码 
console.log("5" - "2"); // 3

关系运算符有四个：> >= < <=。比较的规则，一般是把操作数转成数值，然后进行比较。

</>复制代码 
var res1 = "3" < 2; // "3" 会转成数值 3，然后比较

比较字符串，会比较字符串对应位置上的字符编码：

</>复制代码 
var res1 = "abc" < "aBc"; // false
console.log("a : " + "a".charCodeAt(0)); // 97
console.log("b : " + "b".charCodeAt(0)); // 98
console.log("B : " + "B".charCodeAt(0)); // 66
console.log("c : " + "c".charCodeAt(0)); // 99

上面代码中，b 的编码大于 B 的编码，因此为 false。

相等操作符有两种：== ===。不相等操作符有两种 != !==。

== : 仅比较值是否相等

=== : 不仅比较值，还要比较数据类型

一些特殊情况：

表达式 | 值
-|-
null == undefined | true
"NaN" == NaN | false
5 == NaN | false
NaN == NaN | false
NaN != NaN | true
false == 0 | true
true == 1 | true
true == 2 | false
undefined == 0 | false
null == 0 | false
"5" == 5 | true
"5" === 5 | false

三目运算符的语法：variable = boolean_expression ? true_value : false_value。其实是对 if-else 语句的简写：

</>复制代码 
if(boolean_expression) {
  // true_value
} else {
  // false_value
}

保存两个数中的最大值：

</>复制代码 
var num1 = 3;
var num2 = 4;
var res = num1 > num2 ? num1 : num2; // 4

逗号运算符可以用于一条语句中执行多个操作。

用于声明多个变量：

</>复制代码 
var num1 = 1, num2 = 2, num3 = 3;

用于赋值，总是会把最后一个逗号后面的值赋值给变量：

</>复制代码 
var num = (1, 2, 3, 4, 5); // 5

可以用于 ++ 操作符的理解：

</>复制代码 
var num1 = 10;
var num2 = 12;
var res = 0;
res = num1++ + ++num2; // 23

最后一句代码可以通过逗号运算符，理解成下面的形式：

</>复制代码 
num2 = num2 + 1, res = num1 + num2, num1 = num1 + 1;

由于语句在编程中经常使用，更多的细节，在实际使用的过程中会逐渐加深理解，因此，这里只记录一下基本语法。

单个条件的语法：

</>复制代码 
if (condition) {
  // ...
} else {
  // ...
}

多个条件的语法：

</>复制代码 
if (condition1) {
  // ...
} else if (condition2) {
  // ... 
} else {
  // ...
}

语法如下：

</>复制代码 
do {
  // ...
} while (expression);

循环至少会被执行一次。

</>复制代码 
var i = 0;
do {
  console.log("hi~~ " + i++);
} while (i > 1);
// hi~~ 0

语法如下：

</>复制代码 
while (expression) {
  // ...
}

不满足条件，循环不会执行：

</>复制代码 
var i = 0;
while (i > 1) {
  console.log("hi~~ " + i++);
}

语法如下：

</>复制代码 
for (initalization; expression; post-loop-expression) {
  // ...
}

求出 1-100 的和。

</>复制代码 
var sum = 0;
for (var i = 1; i <= 100; i++) {
  sum += i;
}
console.log("1 + ... + 100 = " + sum);

for-in 语句是一种精准的迭代语句，可以用来枚举对象的属性。

</>复制代码 
for (property in expression) {
  // ...
}

例子如下：

</>复制代码 
for (var item in window) { // 循环BOM中window对象中的属性
  console.log(item);
}

如果被迭代对象的属性值是 null 或者 undefined，for-in 语句会报出错误，因此，应该做容错处理。

</>复制代码 
for (var item in window) { // 循环BOM中window对象中的属性
  if(item !== null && item !== undefined){ // 容错处理
    console.log(item);
  }
}

break 和 continue 用来在循环中精准控制代码的执行。

continue 是退出当前循环，继续执行下一个循环

breank 是退出整个循环

</>复制代码 
for (var i = 0; i < 10; i++) {
  if (i === 5) {
    break; // i 等于 5 的时候，退出当前循环
  }
  console.log("i = " + i);
}

上面代码中，当 i 等于 5 的时候，循环就不再执行了。

</>复制代码 
for (var i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // 当 i 等于 5 的时候，退出当前循环，接着下一次循环
  }
  console.log("i = " + i);
}

上面代码中，当 i 等于 5 的时候，就不会输出，然后接着执行 i 等于 6 的情况。

语法如下：

</>复制代码 
switch (expression) {
  case value:
    // ...
    break;
  case value:
    // ...
    break;
  default:
    // ...
    break;
}

其中需要说明的是，判断的每一项是 expression 的值与 value 是否全等。

</>复制代码 
switch ("1") {
  case 1:
    console.log("相等");
    break;
  default:
    console.log("全等");
    break;
}
// "全等"

一个函数的组成由：关键字function、函数名、函数参数、函数体、返回值

</>复制代码 
function 函数名(参数1, 参数2, ..., 参数n) {
  函数体
  return 返回值;
}

一个简单的求两数之和的函数。

</>复制代码 
function getSum(num1, num2) {
  return num1 + num2;
}
console.log("1 + 2 = " + getSum(1, 2));

</>复制代码 
注意：不能把函数名和函数参数命名为 eval 或 arguments。

ECMAScript 中，传递函数的参数比较自由，可以不用和定义函数的参数保持一致。

</>复制代码 
function getSum(num1, num2) {
  return num1 + num2;
}
console.log(getSum());          // 不传参数
console.log(getSum(1));         // 传一个参数
console.log(getSum(1, 2));      // 传两个参数
console.log(getSum(1, 2, 3));   // 传三个参数

其实在函数的内部，始终存在一个类似于数组的对象 arguments，通过这个对象，可以实现不同的个数参数的传递。

</>复制代码 
function getSum(num1, num2) {
  console.log(typeof arguments);
  for (var i = 0; i < arguments.length; i++) {
    console.log("arguments[" + i + "] = " + arguments[i]);
  }
}
getSum()
getSum(1)
getSum(1, 2)
getSum(1, 2, 3)