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

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

1.操作符

1-1 一元操作符

递增和递减操作符

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

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

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

1-2 布尔操作符

逻辑非(!):

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

操作数 | 结果
-|-
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

1-3 乘性操作符

乘性操作符有三种：* / %。使用乘性操作符的时候，会首先通过 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

1-4 加性操作符

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

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

console.log('5' + '2'); // '52'

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

console.log('5' - '2'); // 3

1-5 关系操作符

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

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。

1-6 相等操作符

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

• == : 仅比较值是否相等
• === : 不仅比较值，还要比较数据类型

一些特殊情况：

表达式 | 值
-|-
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

1-7 三目运算符

三目运算符的语法：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

1-8 逗号操作符

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

用于声明多个变量：

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;

2.语句

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

2-1 if语句

单个条件的语法：

if (condition) {
  // ...
} else {
  // ...
}

多个条件的语法：

if (condition1) {
  // ...
} else if (condition2) {
  // ... 
} else {
  // ...
}

2-2 do-while语句

语法如下：

do {
  // ...
} while (expression);

循环至少会被执行一次。

var i = 0;
do {
  console.log('hi~~ ' + i++);
} while (i > 1);

// hi~~ 0

2-3 while语句

语法如下：

while (expression) {
  // ...
}

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

var i = 0;
while (i > 1) {
  console.log('hi~~ ' + i++);
}

2-4 for语句

语法如下：

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);

2-5 for-in语句

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);
  }
}

2-6 break和continue语句

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 的情况。

2-7 switch语句

语法如下：

switch (expression) {
  case value:
    // ...
    break;
  case value:
    // ...
    break;
  default:
    // ...
    break;
}

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

switch ('1') {
  case 1:
    console.log('相等');
    break;
  default:
    console.log('全等');
    break;
}

// '全等'

3.函数

3-1 函数的组成

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

function 函数名(参数1, 参数2, ..., 参数n) {
  函数体
  return 返回值;
}

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

function getSum(num1, num2) {
  return num1 + num2;
}
console.log('1 + 2 = ' + getSum(1, 2));

注意：不能把函数名和函数参数命名为 eval 或 arguments。

3-2 函数的参数

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)