一、运算符

1. 算数运算符

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

加法运算符

  • 加法运算符是在运行时决定到底是执行相加，还是执行连接
  • 运算子的不同，导致了不同的语法行为，这种现象称为“重载”（overload）
  • 除了加法运算符，其他算术运算符（比如减法、除法和乘法）都不会发生重载
  • 它们的规则是：所有运算子一律转为数值，再进行相应的数学运算
  1. // 数值相加
  2. 1 + 1 // 2
  3. true + true // 2
  4. 1 + true // 2
  6. // 遇到字符串会执行连接
  7. 'a' + 'bc' // "abc"  
  8. 1 + 'a' // "1a"
  9. false + 'a' // "falsea"
  10. '3' + 4 + 5 // "345"
  11. 3 + 4 + '5' // "75"
  12. 1 - '2' // -1
  13. 1 * '2' // 2
  14. 1 / '2' // 0.5
  16. // 如果运算子是对象，必须先转成原始类型的值，然后再相加
  17. var obj = { p: 1 };
  18. obj + 2 // "[object Object]2"
  19. // JavaScript 自动调用对象的valueOf方法，再自动调用对象的toString方法
  20. var obj = { p: 1 };
  21. obj.valueOf().toString() // "[object Object]"
  22. // 知道了这个规则以后，就可以自己定义valueOf方法或toString方法，得到想要的结果
  23. // 自定义 vuLueOf
  24. var obj = {
  25.   valueOf: function () {
  26.     return 1;
  27.   }
  28. };
  29. obj + 2 // 3
  30. // 自定义 toString
  31. var obj = {
  32.   toString: function () {
  33.     return 'hello';
  34.   }
  35. };
  36. obj + 2 // "hello2"
  38. // 特例，如果运算子是一个Date对象的实例，那么会优先执行toString方法
  39. var obj = new Date();
  40. obj.valueOf = function () { return 1 };
  41. obj.toString = function () { return 'hello' };
  42. obj + 2 // "hello2"
  43. // 此刻 toString 方法优先执行

余数运算符

  • 运算结果的正负号由第一个运算子的正负号决定
  1. 12 % 5 // 2
  2. -1 % 2 // -1
  3. 1 % -2 // 1
  5. // 为了得到负数的正确余数值，可以先使用绝对值函数
  6. function isOdd(n) {
  7.   return Math.abs(n % 2) === 1;
  8. }
  9. isOdd(-5) // true
  10. isOdd(-4) // false

自增和自减运算符

  1. var x = 1;
  2. ++x // 2
  3. x // 2
  5. --x // 1
  6. x // 1
  8. var x = 1;
  9. var y = 1;
  10. x++ // 1
  11. ++y // 2

数值运算符，负数值运算符

  • 数值运算符的作用在于可以将任何值转为数值（与Number函数的作用相同）
  • 负数值运算符（-），也同样具有将一个值转为数值的功能，只不过得到的值正负相反
  • 连用两个负数值运算符，等同于数值运算符
  • 数值运算符号和负数值运算符，都会返回一个新的值，而不会改变原始变量的值
  1. +true // 1
  2. +[] // 0
  3. +{} // NaN
  5. var x = 1;
  6. -x // -1
  7. -(-x) // 1

指数运算符

  • 注意，指数运算符是右结合，而不是左结合
  • 即多个指数运算符连用时，先进行最右边的计算
  1. 2 ** 4 // 16
  2. // 相当于 2 ** (3 ** 2)
  3. 2 ** 3 ** 2 // 512

赋值运算符

  1. // 将 1 赋值给变量 x
  2. var x = 1;
  3. // 将变量 y 的值赋值给变量 x
  4. var x = y;
  6. // 等同于 x = x + y
  7. x += y
  8. // 等同于 x = x - y
  9. x -= y
  10. // 等同于 x = x * y
  11. x *= y
  12. // 等同于 x = x / y
  13. x /= y
  14. // 等同于 x = x % y
  15. x %= y
  16. // 等同于 x = x ** y
  17. x **= y
  19. // 等同于 x = x >> y
  20. x >>= y
  21. // 等同于 x = x << y
  22. x <<= y
  23. // 等同于 x = x >>> y
  24. x >>>= y
  25. // 等同于 x = x & y
  26. x &= y
  27. // 等同于 x = x | y
  28. x |= y
  29. // 等同于 x = x ^ y
  30. x ^= y

2. 比较运算符

8 个比较运算符

  • 相等比较
  • 非相等比较，看是否都是字符串
    1. 是，按照字典顺序比较（比较 Unicode 码）
    2. 不是，转成数值，再比较数值的大小
  1. > 大于运算符
  2. < 小于运算符
  3. <= 小于或等于运算符
  4. >= 大于或等于运算符
  5. == 相等运算符
  6. === 严格相等运算符
  7. != 不相等运算符
  8. !== 严格不相等运算符

非相等运算符：字符串的比较

  1. 'cat' > 'dog' // false
  2. 'cat' > 'catalog' // false
  3. 'cat' > 'Cat' // true'
  4. '大' > '小' // false

非相等运算符：非字符串的比较

  • 如果两个运算子都是原始类型的值，则是先转成数值再比较
  • 如果运算子是对象，会转为原始类型的值，再进行比较
  1. // 原始类型值
  2. 5 > '4' // true
  3. // 等同于 5 > Number('4')
  4. // 即 5 > 4
  5. true > false // true
  6. // 等同于 Number(true) > Number(false)
  7. // 即 1 > 0
  8. 2 > true // true
  9. // 等同于 2 > Number(true)
  10. // 即 2 > 1
  12. // 任何值（包括NaN本身）与NaN比较，返回的都是false
  13. 1 > NaN // false
  14. 1 <= NaN // false
  15. '1' > NaN // false
  16. '1' <= NaN // false
  17. NaN > NaN // false
  18. NaN <= NaN // false
  20. // 对象
  21. var x = [2];
  22. x > '11' // true
  23. // 等同于 [2].valueOf().toString() > '11'
  24. // 即 '2' > '11'
  26. // 如果运算子是对象，会转为原始类型的值，再进行比较
  27. // 先调用valueOf方法；如果返回的还是对象，再接着调用toString方法
  28. x.valueOf = function () { return '1' };
  29. x > '11' // false
  30. // 等同于 [2].valueOf() > '11'
  31. // 即 '1' > '11'
  33. // 两个对象的比较也是如此
  34. [2] > [1] // true
  35. // 等同于 [2].valueOf().toString() > [1].valueOf().toString()
  36. // 即 '2' > '1'
  37. [2] > [11] // true
  38. // 等同于 [2].valueOf().toString() > [11].valueOf().toString()
  39. // 即 '2' > '11'
  40. { x: 2 } >= { x: 1 } // true
  41. // 等同于 { x: 2 }.valueOf().toString() >= { x: 1 }.valueOf().toString()
  42. // 即 '[object Object]' >= '[object Object]'

严格相等运算符

  • JavaScript 提供两种相等运算符：==和===
  1. 1 === "1" // false
  2. true === "true" // false
  3. 1 === 0x1 // true
  4. NaN === NaN  // false
  5. +0 === -0 // true
  7. // 两个复合类型（对象、数组、函数）的数据比较时
  8. // 不是比较它们的值是否相等，而是比较它们是否指向同一个地址
  9. {} === {} // false
  10. [] === [] // false
  11. (function () {} === function () {}) // false
  13. // 如果两个变量引用同一个对象，则它们相等
  14. var v1 = {};
  15. var v2 = v1;
  16. v1 === v2 // true
  18. // 对于两个对象的比较，严格相等运算符比较的是地址，而大于或小于运算符比较的是值
  19. var obj1 = {};
  20. var obj2 = {};
  21. obj1 > obj2 // false
  22. obj1 < obj2 // false
  23. obj1 === obj2 // false
  25. // undefined 和 null
  26. undefined === undefined // true
  27. null === null // true
  28. var v1;
  29. var v2;
  30. v1 === v2 // true

严格不相等运算符

  • 它的算法就是先求严格相等运算符的结果，然后返回相反值
    1. 1 !== '1' // true
    2. // 等同于
    3. !(1 === '1')

相等运算符和不相等运算符

  • 建议不使用

3. 布尔运算符

4 个布尔运算符

  1. 取反运算符：!
  2. 且运算符：&&
  3. 或运算符：||
  4. 三元运算符：?:

取反运算符（!）

  1. !true // false
  2. !false // true
  4. !undefined // true
  5. !null // true
  6. !0 // true
  7. !NaN // true
  8. !"" // true
  10. !54 // false
  11. !'hello' // false
  12. ![] // false
  13. !{} // false
  15. // 如果对一个值连续做两次取反运算，等于将其转为对应的布尔值
  16. // 与Boolean函数的作用相同。这是一种常用的类型转换的写法
  17. !!x
  18. // 等同于
  19. Boolean(x)

且运算符

  • 且运算符（&&）往往用于多个表达式的求值
  • 它的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）
  • 如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值
  1. 't' && '' // ""
  2. 't' && 'f' // "f"
  3. 't' && (1 + 2) // 3
  4. '' && 'f' // ""
  5. '' && '' // ""
  7. var x = 1;
  8. (1 - 1) && ( x += 1) // 0
  9. x // 1
  10. // 这种跳过第二个运算子的机制，被称为“短路”
  12. if (i) {
  13.   doSomething();
  14. }
  15. // 等价于
  16. i && doSomething();
  18. true && 'foo' && '' && 4 && 'foo' && true
  19. // ''
  20. 1 && 2 && 3
  21. // 3

或运算符（||）

  1. 't' || '' // "t"
  2. 't' || 'f' // "t"
  3. '' || 'f' // "f"
  4. '' || '' // ""
  6. // 短路规则对这个运算符也适用
  7. var x = 1;
  8. true || (x = 2) // true
  9. x // 1
  11. false || 0 || '' || 4 || 'foo' || true
  12. // 4
  13. false || 0 || ''
  14. // ''
  16. function saveText(text) {
  17.   text = text || '';
  18.   // ...
  19. }
  20. // 或者写成
  21. saveText(this.text || '')
  23. // 或运算符常用于为一个变量设置默认值
  24. function saveText(text) {
  25.   text = text || '';
  26.   // ...
  27. }
  28. // 或者写成
  29. saveText(this.text || '')

三元条件运算符（?:）

  1. 't' ? 'hello' : 'world' // "hello"
  2. 0 ? 'hello' : 'world' // "world"
  4. console.log(true ? 'T' : 'F');

4. 二进制位运算符

7 个二进制位运算符

  • 这些位运算符直接处理每一个比特位（bit）
    • 好处是速度极快，缺点是很不直观
  • 位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行
  • 许多场合不能使用它们，否则会使代码难以理解和查错
  1. 二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1
  2. 二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0
  3. 二进制否运算符（not）：符号为~，表示对一个二进制位取反
  4. 异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0
  5. 左移运算符（left shift）：符号为<<，详见下文解释
  6. 右移运算符（right shift）：符号为>>，详见下文解释
  7. 头部补零的右移运算符（zero filled right shift）：符号为>>>，详见下文解释

5. 其他运算符，运算顺序

void 运算符

  • 作用是执行一个表达式，然后不返回任何值，或者说返回undefined
  • 这个运算符的主要用途是浏览器的书签工具（Bookmarklet），以及在超级链接中插入代码防止网页跳转
  1. void 0 // undefined
  2. void(0) // undefined
  3. // 建议采用后一种形式，即总是使用圆括号
  4. // 因为void运算符的优先性很高，如果不使用括号，容易造成错误的结果
  5. // 比如，void 4 + 7实际上等同于(void 4) + 7
  7. // 小例子
  8. var x = 3;
  9. void (x = 5) //undefined
  10. x // 5
  13. <a href="http://example.com" onclick="f(); return false;">点击</a>
  14. // 换成以下
  15. <a href="javascript: void(f())">文字</a>
  17. // 用户点击链接提交表单，但是不产生页面跳转
  18. <a href="javascript: void(document.form.submit())">
  19.   提交
  20. </a>

逗号运算符

  • 用于对两个表达式求值，并返回后一个表达式的值
  • 逗号运算符的一个用途是，在返回一个值之前，进行一些辅助操作
  1. 'a', 'b' // "b"
  2. var x = 0;
  3. var y = (x++, 10);
  4. x // 1
  5. y // 10
  7. var value = (console.log('Hi!'), true);
  8. // Hi!
  9. value // true

优先级

  • 记住所有运算符的优先级，是非常难的，也是没有必要的
  • 圆括号的优先级是最高的，即圆括号中的表达式会第一个运算
  • 顺便说一下，圆括号不是运算符，而是一种语法结构，一共有两种用法
    • 一种是把表达式放在圆括号之中，提升运算的优先级
    • 另一种是跟在函数的后面，作用是调用函数
  • 因为圆括号不是运算符，所以不具有求值作用，只改变运算的优先级
  1. // 该代码可以运行，这验证了圆括号只改变优先级，不会求值
  2. var x = 1;
  3. (x) = 2;
  4. (expression)
  5. // 等同于
  6. expression
  8. // 函数放在圆括号中，会返回函数本身。如果圆括号紧跟在函数的后面，就表示调用函数
  9. function f() {
  10.   return 1;
  11. }
  12. (f) // function f(){return 1;}
  13. f() // 1
  15. // 圆括号之中，只能放置表达式，如果将语句放在圆括号之中，就会报错
  16. (var a = 1)
  17. // SyntaxError: Unexpected token var

左结合与右结合

  • 对于优先级别相同的运算符，同时出现的时候，就会有计算顺序的问题
  1. // 左结合
  2. x + y + z
  3. // JS 引擎解释如下
  4. (x + y) + z
  6. // 右结合
  7. w = x = y = z;
  8. q = a ? b : c ? d : e ? f : g;
  9. // JS 引擎解释如下
  10. w = (x = (y = z));
  11. q = a ? b : (c ? d : (e ? f : g));
  13. // 指数运算符（**）也是右结合
  14. 2 ** 3 ** 2
  15. // 相当于 2 ** (3 ** 2)
  16. // 512

二、语法专题

1. 数据类型转换

  • JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值
  • 虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的
  • 如果运算符发现，运算子的类型与预期不符，就会自动转换类型
  1. var x = y ? 1 : 'a';
  2. // 减法运算符预期左右两侧的运算子应该是数值
  3. '4' - '3' // 1

强制转换

  • Number()
  • String()
  • Boolean()

Number()

  • 使用Number函数，可以将任意类型的值转化成数值，分成两种情况讨论
    • 一种是参数是原始类型的值
    • 另一种是参数是对象
  1. // 原始类型值
  2. // 数值：转换后还是原来的值
  3. Number(324) // 324
  4. // 字符串：如果可以被解析为数值，则转换为相应的数值
  5. Number('324') // 324
  6. // 字符串：如果不可以被解析为数值，返回 NaN
  7. Number('324abc') // NaN
  8. // 空字符串转为0
  9. Number('') // 0
  10. // 布尔值：true 转成 1，false 转成 0
  11. Number(true) // 1
  12. Number(false) // 0
  13. // undefined：转成 NaN
  14. Number(undefined) // NaN
  15. // null：转成0
  16. Number(null) // 0
  17. // Number函数将字符串转为数值，要比parseInt函数严格很多
  18. // 基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN
  19. parseInt('42 cats') // 42
  20. Number('42 cats') // NaN
  21. 另外，parseInt和Number函数都会自动过滤一个字符串前导和后缀的空格
  22. parseInt('\t\v\r12.34\n') // 12
  23. Number('\t\v\r12.34\n') // 12.34
  25. // 对象
  26. // 简单的规则是，Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组
  27. Number({a: 1}) // NaN
  28. Number([1, 2, 3]) // NaN
  29. Number([5]) // 5.
  31. // 第一步，调用对象自身的valueOf方法，如果返回原始类型的值，则直接对该值使用Number函数
  32. // 第二步，如果valueOf方法返回的还是对象，则改为调用对象自身的toString方法
  33. // 第三步，如果toString方法返回原始类型的值，则对该值使用Number函数
  34. // 第四步，如果toString方法返回的是对象，就报错
  35. var obj = {x: 1};
  36. Number(obj) // NaN
  37. // 等同于
  38. if (typeof obj.valueOf() === 'object') {
  39.   Number(obj.toString());
  40. } else {
  41.   Number(obj.valueOf());
  42. }
  43. Number({}) // NaN
  44. var obj = {
  45.   valueOf: function () {
  46.     return {};
  47.   },
  48.   toString: function () {
  49.     return {};
  50.   }
  51. };
  52. Number(obj)
  53. // TypeError: Cannot convert object to primitive value
  54. Number({
  55.   valueOf: function () {
  56.     return 2;
  57.   }
  58. })
  59. // 2
  60. Number({
  61.   toString: function () {
  62.     return 3;
  63.   }
  64. })
  65. // 3
  66. Number({
  67.   valueOf: function () {
  68.     return 2;
  69.   },
  70.   toString: function () {
  71.     return 3;
  72.   }
  73. })
  74. // 2

String()

  • 可以将任意类型的值转化成字符串
  1. // 原始数据类型
  2. String(123) // "123"
  3. String('abc') // "abc"
  4. String(true) // "true"
  5. String(undefined) // "undefined"
  6. String(null) // "null"
  8. // 对象
  9. String({a: 1}) // "[object Object]"
  10. String([1, 2, 3]) // "1,2,3"
  11. // 第一步，先调用对象自身的toString方法。如果返回原始类型的值，则对该值使用String函数
  12. // 如果toString方法返回的是对象，再调用原对象的valueOf方法
  13. // 如果valueOf方法返回原始类型的值，则对该值使用String函数
  14. // 如果valueOf方法返回的是对象，就报错
  15. String({a: 1})
  16. // "[object Object]"
  17. // 等同于
  18. String({a: 1}.toString())
  19. // "[object Object]"
  21. // 如果toString法和valueOf方法，返回的都是对象，就会报错
  22. var obj = {
  23.   valueOf: function () {
  24.     return {};
  25.   },
  26.   toString: function () {
  27.     return {};
  28.   }
  29. };
  30. String(obj)
  31. // TypeError: Cannot convert object to primitive value
  33. // 自定义toString方法，改变返回值的例子
  34. String({
  35.   toString: function () {
  36.     return 3;
  37.   }
  38. })
  39. // "3"
  40. String({
  41.   valueOf: function () {
  42.     return 2;
  43.   }
  44. })
  45. // "[object Object]"
  46. String({
  47.   valueOf: function () {
  48.     return 2;
  49.   },
  50.   toString: function () {
  51.     return 3;
  52.   }
  53. })
  54. // "3"

Boolean()

  • 可以将任意类型的值转为布尔值
  1. // 除了以下 5 个 falsy 值，其他全为 true
  2. // undefined null 0 NaN ''
  3. Boolean(undefined) // false
  4. Boolean(null) // false
  5. Boolean(0) // false
  6. Boolean(NaN) // false
  7. Boolean('') // false
  9. Boolean(true) // true
  10. Boolean(false) // false
  12. Boolean({}) // true
  13. Boolean([]) // true
  14. Boolean(new Boolean(false)) // true

自动转换

  • 预期什么类型的值，就调用该类型的转换函数
  • 由于自动转换具有不确定性，而且不易除错
  • 建议在预期为布尔值、数值、字符串的地方
  • 全部使用Boolean、Number和String函数进行显式转换
  1. 123 + 'abc' // "123abc"
  3. if ('abc') {
  4.   console.log('hello')
  5. }  // "hello"
  7. + {foo: 'bar'} // NaN
  8. - [1, 2, 3] // NaN
  10. // 自动转换为布尔值
  11. // JavaScript 遇到预期为布尔值的地方（比如if语句的条件部分）
  12. // 就会将非布尔值的参数自动转换为布尔值
  13. // 系统内部会自动调用Boolean函数
  14. if ( !undefined
  15.   && !null
  16.   && !0
  17.   && !NaN
  18.   && !''
  19. ) {
  20.   console.log('true');
  21. } // true
  22. // 将一个表达式转为布尔值
  23. // 写法一
  24. expression ? true : false
  25. // 写法二
  26. !! expression
  28. // 自动转换为字符串
  29. // 遇到预期为字符串的地方，就会将非字符串的值自动转为字符串
  30. // 先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串
  31. '5' + 1 // '51'
  32. '5' + true // "5true"
  33. '5' + false // "5false"
  34. '5' + {} // "5[object Object]"
  35. '5' + [] // "5"
  36. '5' + function (){} // "5function (){}"
  37. '5' + undefined // "5undefined"
  38. '5' + null // "5null"
  39. // 这种自动转换很容易出错
  40. var obj = {
  41.   width: '100'
  42. };
  43. obj.width + 20 // "10020"，开发者可能期望 120
  45. // 自动转换为数值
  46. //遇到预期为数值的地方，就会将参数值自动转换为数值
  47. // 系统内部会自动调用Number函数
  48. // 除了加法运算符（+）有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值
  49. '5' - '2' // 3
  50. '5' * '2' // 10
  51. true - 1  // 0
  52. false - 1 // -1
  53. '1' - 1   // 0
  54. '5' * []    // 0
  55. false / '5' // 0
  56. 'abc' - 1   // NaN
  57. null + 1 // 1
  58. undefined + 1 // NaN
  59. // 注意：null转为数值时为0，而undefined转为数值时为NaN
  60. // 一元运算符也会把运算子转成数值
  61. +'abc' // NaN
  62. -'abc' // NaN
  63. +true // 1
  64. -false // 0

2. 错误处理机制

Error 实例对象

  1. // message：错误提示信息
  2. var err = new Error('出错了');
  3. err.message // "出错了"
  5. // name：错误名称（非标准属性）
  6. if (error.name) {
  7.   console.log(error.name + ': ' + error.message);
  8. }
  10. // stack属性用来查看错误发生时的堆栈。
  11. function throwit() {
  12.   throw new Error('');
  13. }
  14. function catchit() {
  15.   try {
  16.     throwit();
  17.   } catch(e) {
  18.     console.log(e.stack); // print stack trace
  19.   }
  20. }
  21. catchit()
  22. // Error
  23. //    at throwit (~/examples/throwcatch.js:9:11)
  24. //    at catchit (~/examples/throwcatch.js:3:9)
  25. //    at repl:1:5

原生错误类型

  1. // SyntaxError对象是解析代码时发生的语法错误
  2. // 变量名错误
  3. var 1a;
  4. // Uncaught SyntaxError: Invalid or unexpected token
  5. // 缺少括号
  6. console.log 'hello');
  7. // Uncaught SyntaxError: Unexpected string
  9. // ReferenceError对象是引用一个不存在的变量时发生的错误
  10. // 使用一个不存在的变量
  11. unknownVariable
  12. // Uncaught ReferenceError: unknownVariable is not defined
  13. // 等号左侧不是变量
  14. console.log() = 1
  15. // Uncaught ReferenceError: Invalid left-hand side in assignment
  17. // RangeError对象是一个值超出有效范围时发生的错误
  18. // 主要有几种情况，一是数组长度为负数
  19. // 二是Number对象的方法参数超出范围，以及函数堆栈超过最大值
  20. // 数组长度不得为负数
  21. new Array(-1)
  22. // Uncaught RangeError: Invalid array length
  24. // TypeError对象是变量或参数不是预期类型时发生的错误
  25. new 123
  26. // Uncaught TypeError: number is not a func
  28. var obj = {};
  29. obj.unknownMethod()  // obj.unknownMethod的值是undefined，而不是一个函数
  30. // Uncaught TypeError: obj.unknownMethod is not a function
  32. // URIError对象是 URI 相关函数的参数不正确时抛出的错误
  33. // 主要涉及encodeURI()、decodeURI()、encodeURIComponent()
  34. // decodeURIComponent()、escape()和unescape()这六个函数
  35. decodeURI('%2')
  36. // URIError: URI malformed
  38. // EvalError 对象，eval函数没有被正确执行时，会抛出EvalError错误
  39. // 该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留
  41. // 总结
  42. 以上这6种派生错误，连同原始的Error对象，都是构造函数
  43. 开发者可以使用它们，手动生成错误对象的实例
  44. 这些构造函数都接受一个参数，代表错误提示信息（message）
  45. var err1 = new Error('出错了！');
  46. var err2 = new RangeError('出错了，变量超出有效范围！');
  47. var err3 = new TypeError('出错了，变量类型无效！');
  48. err1.message // "出错了！"
  49. err2.message // "出错了，变量超出有效范围！"
  50. err3.message // "出错了，变量类型无效！"

自定义错误

  1. // 除了 JavaScript 原生提供的错误对象，还可以定义自己的错误对象
  2. function UserError(message) {
  3.   this.message = message || '默认信息';
  4.   this.name = 'UserError';
  5. }
  6. UserError.prototype = new Error();
  7. UserError.prototype.constructor = UserError;
  9. // 生成这种自定义类型的错误的实例
  10. new UserError('这是自定义的错误！');

throw 语句

  1. // throw语句的作用是手动中断程序执行，抛出一个错误
  2. if (x <= 0) {
  3.   throw new Error('x 必须为正数');
  4. }
  5. // Uncaught ReferenceError: x is not defined
  7. // throw也可以抛出自定义错误
  8. function UserError(message) {
  9.   this.message = message || '默认信息';
  10.   this.name = 'UserError';
  11. }
  13. throw new UserError('出错了！');
  14. // Uncaught UserError {message: "出错了！", name: "UserError"}
  16. // 对于 JavaScript 引擎来说，遇到throw语句，程序就中止了
  17. // 引擎会接收到throw抛出的信息，可能是一个错误实例，也可能是其他类型的值

try…catch 结构

  1. // 一旦发生错误，程序就中止执行了
  2. // JavaScript 提供了try...catch结构，允许对错误进行处理，选择是否往下执行
  3. try {
  4.   throw new Error('出错了!');
  5. } catch (e) {
  6.   console.log(e.name + ": " + e.message);
  7.   console.log(e.stack);
  8. }
  9. // Error: 出错了!
  10. //   at <anonymous>:3:9
  11. //   ...
  13. // 常用方法
  14. try {
  15.   f();
  16. } catch(e) {
  17.   // 处理错误
  18. }
  19. try {
  20.   throw "出错了";
  21. } catch (e) {
  22.   console.log(111);
  23. }
  24. console.log(222);
  25. // 111
  26. // 222
  29. catch代码块之中，还可以再抛出错误，甚至使用嵌套的try...catch结构
  30. var n = 100;
  32. try {
  33.   throw n;
  34. } catch (e) {
  35.   if (e <= 50) {
  36.     // ...
  37.   } else {
  38.     throw e;
  39.   }
  40. }
  41. // Uncaught 100
  43. // 为了捕捉不同类型的错误，catch代码块之中可以加入判断语句
  44. try {
  45.   foo.bar();
  46. } catch (e) {
  47.   if (e instanceof EvalError) {
  48.     console.log(e.name + ": " + e.message);
  49.   } else if (e instanceof RangeError) {
  50.     console.log(e.name + ": " + e.message);
  51.   }
  52.   // ...
  53. }

finally 代码块

  1. // try...catch结构允许在最后添加一个finally代码块
  2. // 表示不管是否出现错误，都必需在最后运行的语句
  3. function cleansUp() {
  4.   try {
  5.     throw new Error('出错了……');
  6.     console.log('此行不会执行');
  7.   } finally {
  8.     console.log('完成清理工作');
  9.   }
  10. }
  11. cleansUp()
  12. // 完成清理工作
  13. // Uncaught Error: 出错了……
  14. //    at cleansUp (<anonymous>:3:11)
  15. //    at <anonymous>:10:1
  16. // 上面代码中，由于没有catch语句块，一旦发生错误，代码就会中断执行
  17. // 中断执行之前，会先执行finally代码块，然后再向用户提示报错信息
  19. var count = 0;
  20. function countUp() {
  21.   try {
  22.     return count;
  23.   } finally {
  24.     count++;
  25.   }
  26. }
  27. countUp()
  28. // 0
  29. count
  30. // 1
  31. // 上面代码说明，return语句里面的count的值，是在finally代码块运行之前就获取了
  33. // 下面是finally代码块用法的典型场景
  34. openFile();
  35. try {
  36.   writeFile(Data);
  37. } catch(e) {
  38.   handleError(e);
  39. } finally {
  40.   closeFile();
  41. }
  43. // 下面例子充分反映了try...catch...finally这三者之间的执行顺序
  44. function f() {
  45.   try {
  46.     console.log(0);
  47.     throw 'bug';
  48.   } catch(e) {
  49.     console.log(1);
  50.     return true; // 这句原本会延迟到 finally 代码块结束再执行
  51.     console.log(2); // 不会运行
  52.   } finally {
  53.     console.log(3);
  54.     return false; // 这句会覆盖掉前面那句 return
  55.     console.log(4); // 不会运行
  56.   }
  58.   console.log(5); // 不会运行
  59. }
  60. var result = f();
  61. // 0
  62. // 1
  63. // 3
  64. result
  65. // false
  67. // catch代码块之中，触发转入finally代码块的标志，不仅有return语句，还有throw语句
  68. function f() {
  69.   try {
  70.     throw '出错了！';
  71.   } catch(e) {
  72.     console.log('捕捉到内部错误');
  73.     throw e; // 这句原本会等到finally结束再执行
  74.   } finally {
  75.     return false; // 直接返回
  76.   }
  77. }
  78. try {
  79.   f();
  80. } catch(e) {
  81.   // 此处不会执行
  82.   console.log('caught outer "bogus"');
  83. }
  84. //  捕捉到内部错误
  86. // try代码块内部，还可以再使用try代码块
  87. try {
  88.   try {
  89.     consle.log('Hello world!'); // 报错
  90.   }
  91.   finally {
  92.     console.log('Finally');
  93.   }
  94.   console.log('Will I run?');
  95. } catch(error) {
  96.   console.error(error.message);
  97. }
  98. // Finally
  99. // consle is not defined
  100. // 上面代码中，try里面还有一个try。内层的try报错（console拼错了）
  101. 这时会执行内层的finally代码块，然后抛出错误，被外层的catch捕获

3. 编程风格

  • 编译器的规范叫做“语法规则”（grammar），这是程序员必须遵守的
  • 而编译器忽略的部分，就叫“编程风格”（programming style），这是程序员可以自由选择的
  1. // 缩进
  2. // 不要一会使用 Tab 键，一会使用空格键
  4. // 区块
  5. // 如果循环和判断的代码体只有一行，JavaScript 允许该区块（block）省略大括号
  6. if (a)
  7.   b();
  8.   c();
  9. // 等同与
  10. if (a) {
  11.   b();
  12. }
  13.   c();
  14. // JavaScript 要使用起首的大括号跟在关键字的后面
  15. // 因为 JavaScript 会自动添加句末的分号，导致一些难以察觉的错误
  16. block {
  17.   // ...
  18. }
  20. // 圆括号
  21. // 圆括号（parentheses）在 JavaScript 中有两种作用
  22. // 一种表示函数的调用，另一种表示表达式的组合
  23. // 圆括号表示函数的调用
  24. console.log('abc');
  25. // 圆括号表示表达式的组合
  26. (1 + 2) * 3
  27. // 建议可以用空格，区分这两种不同的括号
  28. // 表示函数调用时，函数名与左括号之间没有空格。
  29. // 表示函数定义时，函数名与左括号之间没有空格。
  30. // 其他情况时，前面位置的语法元素与左括号之间，都有一个空格。
  33. // 行尾的分号
  34. // 分号表示一条语句的结束, JavaScript 允许省略行尾的分号
  35. // 为了方便使用，我不加分号
  36. // 并额外记忆一些，规则，不要括号开头，不要奇奇怪怪的字符开头
  37. // 大多数情况下，JavaScript 会自动添加分号
  38. var a = 1
  39. // 等同于
  40. var a = 1;
  42. // 全局变量
  43. // JavaScript 最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写
  44. // 因此，建议避免使用全局变量
  45. // 如果不得不使用，可以考虑用大写字母表示变量名
  46. 这样更容易看出这是全局变量，比如UPPER_CASE
  48. // 变量声明
  49. // JavaScript 会自动将变量声明“提升”（hoist）到代码块（block）的头部
  50. if (!x) {
  51.   var x = {};
  52. }
  53. // 等同于
  54. var x;
  55. if (!x) {
  56.   x = {};
  57. }
  58. // 了避免可能出现的问题，最好把变量声明都放在代码块的头部
  60. // with 语句
  61. with可以减少代码的书写，但是会造成混淆
  62. with (o) {
  63. 　foo = bar;
  64. }
  65. // 可能有四种运行结果
  66. o.foo = bar;
  67. o.foo = o.bar;
  68. foo = bar;
  69. foo = o.bar;
  70. // 这四种结果都可能发生，取决于不同的变量是否有定义
  71. // 因此，不要使用with语句
  73. // 相等和严格相等
  74. // 相等运算符会自动转换变量类型，造成很多意想不到的情况
  75. 0 == ''// true
  76. 1 == true // true
  77. 2 == true // false
  78. 0 == '0' // true
  79. false == 'false' // false
  80. false == '0' // true
  81. ' \t\r\n ' == 0 // true
  82. // 建议不要使用相等运算符（==），只使用严格相等运算符（===）
  84. // 语句的合并
  85. a = b;
  86. if (a) {
  87.   // ...
  88. }
  89. // 有人喜欢写成这样的
  90. //虽然语句少了一行，但是可读性大打折扣，而且会造成误读
  91. if (a = b) {
  92.   // ...
  93. }
  95. // 自增和自减运算符
  96. // 自增（++）和自减（--）运算符，放在变量的前面或后面，返回的值不一样，很容易发生错误
  97. // 事实上，所有的++运算符都可以用+= 1代替
  98. ++x
  99. // 等同于
  100. x += 1;
  101. // 建议自增（++）和自减（--）运算符尽量使用+=和-=代替
  103. // witch...case 结构
  104. // switch...case结构要求，在每一个case的最后一行必须是break语句
  105. // 否则会接着运行下一个case。这样不仅容易忘记，还会造成代码的冗长
  106. // 而且，switch...case不使用大括号，不利于代码形式的统一
  107. // 此外，这种结构类似于goto语句，容易造成程序流程的混乱，使得代码结构混乱不堪
  108. // 不符合面向对象编程的原则
  109. function doAction(action) {
  110.   switch (action) {
  111.     case 'hack':
  112.       return 'hack';
  113.     case 'slash':
  114.       return 'slash';
  115.     case 'run':
  116.       return 'run';
  117.     default:
  118.       throw new Error('Invalid action.');
  119.   }
  120. }
  121. // 上面的代码建议改写成对象结构
  122. function doAction(action) {
  123.   var actions = {
  124.     'hack': function () {
  125.       return 'hack';
  126.     },
  127.     'slash': function () {
  128.       return 'slash';
  129.     },
  130.     'run': function () {
  131.       return 'run';
  132.     }
  133.   };
  134.   if (typeof actions[action] !== 'function') {
  135.     throw new Error('Invalid action.');
  136.   }
  137.   return actions[action]();
  138. }
  140. // 因此，建议switch...case结构可以用对象结构代替

4. console 对象与控制台

console 对象

  • console对象是 JavaScript 的原生对象
  • 可以输出各种信息到控制台，并且还提供了很多有用的辅助方法
  • console的常见用途有两个
    • 调试程序，显示网页代码运行时的错误信息
    • 提供了一个命令行接口，用来与网页代码互动

console.log()，console.info()，console.debug()

  • console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。
  1. console.log('Hello World')
  2. // Hello World
  3. console.log('a', 'b', 'c')
  4. // a b c
  6. // console.log方法会自动在每次输出的结尾，添加换行符
  7. console.log(1);
  8. console.log(2);
  9. console.log(3);
  10. // 1
  11. // 2
  12. // 3
  14. // 如果第一个参数是格式字符串（使用了格式占位符）
  15. // console.log方法将依次用后面的参数替换占位符，然后再进行输出
  16. console.log(' %s + %s = %s', 1, 1, 2)
  17. //  1 + 1 = 2
  19. // console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符
  20. %s 字符串
  21. %d 整数
  22. %i 整数
  23. %f 浮点数
  24. %o 对象的链接
  25. %c CSS 格式字符串
  27. // 第二个参数是数值，对应的占位符是%d，第三个参数是字符串，对应的占位符是%s
  28. var number = 11 * 9;
  29. var color = 'red';
  30. console.log('%d %s balloons', number, color);
  31. // 99 red balloons
  33. // 使用%c占位符时，对应的参数必须是 CSS 代码，用来对输出内容进行 CSS 渲染
  34. console.log(
  35.   '%cThis text is styled!',
  36.   'color: red; background: yellow; font-size: 24px;'
  37. )
  39. console.log(' %s + %s ', 1, 1, '= 2')
  40. // 1 + 1  = 2
  41. console.log({foo: 'bar'})
  42. // Object {foo: "bar"}
  43. console.log(Date)
  44. // function Date() { [native code] }
  46. // console.info是console.log方法的别名，用法完全一样
  47. // console.debug方法与console.log方法类似，会在控制台输出调试信息
  48. // 但是，默认情况下，console.debug输出的信息不会显示
  49. // 只有在打开显示级别在verbose的情况下，才会显示
  51. // console对象的所有方法，都可以被覆盖。因此，可以按照自己的需要，定义console.log方法
  52. ['log', 'info', 'warn', 'error'].forEach(function(method) {
  53.   console[method] = console[method].bind(
  54.     console,
  55.     new Date().toISOString()
  56.   );
  57. });
  58. console.log("出错了！");
  59. // 2014-05-18T09:00.000Z 出错了！

console.warn()，console.error()

  • warn方法和error方法也是在控制台输出信息，它们与log方法的不同之处在于
  • warn方法输出信息时，在最前面加一个黄色三角，表示警告
  • error方法输出信息时，在最前面加一个红色的叉，表示出错。
  1. console.error('Error: %s (%i)', 'Server is not responding', 500)
  2. // Error: Server is not responding (500)
  3. console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
  4. // Warning! Too few nodes (1)

console.table()

  • 对于某些复合类型的数据，console.table方法可以将其转为表格显示
  1. var languages = [
  2.   { name: "JavaScript", fileExtension: ".js" },
  3.   { name: "TypeScript", fileExtension: ".ts" },
  4.   { name: "CoffeeScript", fileExtension: ".coffee" }
  5. ];
  6. console.table(languages);
  8. var languages = {
  9.   csharp: { name: "C#", paradigm: "object-oriented" },
  10.   fsharp: { name: "F#", paradigm: "functional" }
  11. };
  13. console.table(languages);

console.count()

  • count方法用于计数，输出它被调用了多少次
  1. function greet(user) {
  2.   console.count();
  3.   return 'hi ' + user;
  4. }
  5. greet('bob')
  6. //  : 1
  7. // "hi bob"
  8. greet('alice')
  9. //  : 2
  10. // "hi alice"
  11. greet('bob')
  12. //  : 3
  13. // "hi bob"
  15. // 该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类
  16. function greet(user) {
  17.   console.count(user);
  18.   return "hi " + user;
  19. }
  20. greet('bob')
  21. // bob: 1
  22. // "hi bob"
  23. greet('alice')
  24. // alice: 1
  25. // "hi alice"
  26. greet('bob')
  27. // bob: 2
  28. // "hi bob"

console.dir()，console.dirxml()

  • dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示
  • 该方法对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性
  • dirxml方法主要用于以目录树的形式，显示 DOM 节点
  • 如果参数不是 DOM 节点，而是普通的 JavaScript 对象，console.dirxml等同于console.dir
  1. console.log({f1: 'foo', f2: 'bar'})
  2. // Object {f1: "foo", f2: "bar"}
  4. console.dir({f1: 'foo', f2: 'bar'})
  5. // Object
  6. //   f1: "foo"
  7. //   f2: "bar"
  8. //   __proto__: Object
  10. console.dir(document.body)
  11. console.dir(obj, {colors: true})
  13. console.dirxml(document.body)

console.assert()

  • console.assert方法主要用于程序运行过程中，进行条件判断
  • 如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确
  1. console.assert(false, '判断条件不成立')
  2. // Assertion failed: 判断条件不成立
  4. // 相当于
  5. try {
  6.   if (!false) {
  7.     throw new Error('判断条件不成立');
  8.   }
  9. } catch(e) {
  10.   console.error(e);
  11. }

console.time()，console.timeEnd()

  • 这两个方法用于计时，可以算出一个操作所花费的准确时间
  1. // time方法表示计时开始，timeEnd方法表示计时结束
  2. // 它们的参数是计时器的名称
  3. // 调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”
  4. console.time('Array initialize');
  6. var array= new Array(1000000);
  7. for (var i = array.length - 1; i >= 0; i--) {
  8.   array[i] = new Object();
  9. };
  11. console.timeEnd('Array initialize');
  12. // Array initialize: 1914.481ms

console.group()，console.groupEnd()，console.groupCollapsed()

  • console.group和console.groupEnd这两个方法用于将显示的信息分组
  • 它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开
  1. console.group('一级分组');
  2. console.log('一级分组的内容');
  4. console.group('二级分组');
  5. console.log('二级分组的内容');
  7. console.groupEnd(); // 二级分组结束
  8. console.groupEnd(); // 一级分组结束
  10. // console.groupCollapsed方法与console.group方法很类似
  11. // 唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的

console.trace()，console.clear()

  • console.trace方法显示当前执行的代码在堆栈中的调用路径
  • console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行
  • 如果用户选中了控制台的“Preserve log”选项，console.clear方法将不起作用
  1. console.trace()
  2. // console.trace()
  3. //   (anonymous function)
  4. //   InjectedScript._evaluateOn
  5. //   InjectedScript._evaluateAndWrap
  6. //   InjectedScript.evaluate
  8. console.clear()

debugger 语句

  • debugger语句主要用于除错，作用是设置断点
  • 如果有正在运行的除错工具，程序运行到debugger语句时会自动停下
  • 如果没有除错工具，debugger语句不会产生任何结果，JavaScript 引擎自动跳过这一句
  1. for(var i = 0; i < 5; i++){
  2.   console.log(i);
  3.   if (i === 2) debugger;
  4. }
  5. // 上面代码打印出0，1，2以后，就会暂停，自动打开源码界面，等待进一步处理

三、章节链接

「@浪里淘沙的小法师」