JS语法（四、数据类型转换、错误处理、console对象）

一、数据类型的转换

JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值

1.1强制转换

Number()、String()和Boolean()三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。

1.2Number()

（1）原始类型值

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

只要有一个字符无法转成数值，整个字符串就会被转为NaN（非数值）。
parseInt逐个解析字符
parseInt和Number函数都会自动过滤一个字符串前导和后缀的空格。

（2）对象

简单的规则是，Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组。
Number([5]) // 5

转换规则：
第一步，调用对象自身的valueOf方法。如果返回原始类型的值，则直接对该值使用Number函数，不再进行后续步骤。

第二步，如果valueOf方法返回的还是对象，则改为调用对象自身的toString方法。如果toString方法返回原始类型的值，则对该值使用Number函数，不再进行后续步骤。

第三步，如果toString方法返回的是对象，就报错。

*valueOf() 方法
定义和用法
valueOf() 方法返回 Array 对象的原始值。
该原始值由 Array 对象派生的所有对象继承。
*

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();//Banana,Orange,Apple,Mango
var fruit = {"Banana":0};
var v=fruit.valueOf();//[object Object]

1.3String()

将任意类型的值转化成字符串

（1）原始类型值

• 数值：转为相应的字符串。
• 字符串：转换后还是原来的值。
• 布尔值：true转为字符串"true"，false转为字符串"false"。
• undefined：转为字符串"undefined"。
• null：转为字符串"null"。

• (2）对象

  String方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。

  String({a: 1}) // "[object Object]"
  String([1, 2, 3]) // "1,2,3"
  

  先调用对象自身的toString方法。如果返回原始类型的值，则对该值使用String函数，不再进行以下步骤。

  如果toString方法返回的是对象，再调用原对象的valueOf方法。如果valueOf方法返回原始类型的值，则对该值使用String函数，不再进行以下步骤。

  如果valueOf方法返回的是对象，就报错。

  • toString() 方法,把数字转换为字符串： 对象会转为[object object]*

  1.4 Boolean()

  Boolean()函数可以将任意类型的值转为布尔值。

  它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

  undefined
  null
  0（包含-0和+0）
  NaN
  ‘’（空字符串）

  所有对象（包括空对象）的转换结果都是true，甚至连false对应的布尔对象new Boolean(false)也是true

  1.4 自动转换

  不同类型的数据互相运算。

  对非布尔值类型的数据求布尔值。

  if ('abc') {
    console.log('hello')
  }  // "hello"
  

  对非数值类型的值使用一元运算符（即+和-）。

  + {foo: 'bar'} // NaN
  - [1, 2, 3] // NaN
  

  规则：预期什么类型的值，就调用该类型的转换函数

  1.4.1自动转换为布尔值

  到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean()函数。

  将一个表达式转为布尔值。它们内部调用的也是Boolean()函数。

  // 写法一
  expression ? true : false
  
  // 写法二
  !! expression
  

  1.4.2自动转换为字符串

  先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串。

  加法运算时，当一个值为字符串，另一个值为非字符串，则后者转为字符串。

  1.4.3自动转换为数值

  系统内部会自动调用Number()函数。

  加法运算符（+）有可能把运算子转为字符串

  '5' * []    // 0
  false / '5' // 0
  'abc' - 1   // NaN
  null + 1 // 1
  undefined + 1 // NaN
  +'abc' // NaN
  -'abc' // NaN
  +true // 1
  -false // 0
  

  一元运算符也会把运算子转成数值

  二、错误处理机制

  2.1Error 实例对象

  提供Error构造函数，所有抛出的错误都是这个构造函数的实例。

  Error实例对象
  message：错误提示信息
  name：错误名称（非标准属性）
  stack：错误的堆栈（非标准属性),用来查看错误发生时的堆栈

  2.2原生错误类型

• SyntaxError 对象 解析代码时发生的语法错误。
• ReferenceError 对象 引用一个不存在的变量时发生的错误 将一个值分配给无法分配的对象，比如对函数的运行结果赋值。
• RangeError 对象 值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。
• TypeError 对象 对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。 调用对象不存在的方法
• URIError 对象 URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
• EvalError 对象 eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留。

• 以上这6种派生错误，连同原始的Error对象，都是构造函数。手动生成错误对象的实例。这些构造函数都接受一个参数，代表错误提示信息（message）。

  2.3自定义错误

  function UserError(message) {
    this.message = message || '默认信息';
    this.name = 'UserError';
  }
  
  UserError.prototype = new Error();
  UserError.prototype.constructor = UserError;
  

  自定义一个错误对象UserError，让它继承Error对象

  2.4throw 语句

  手动中断程序执行，抛出一个错误。
  也可以抛出自定义错误

  throw可以抛出任何类型的值。也就是说，它的参数可以是任何值。

  2.5try…catch 结构

  允许对错误进行处理，选择是否往下执行。
  catch接受一个参数，表示try代码块抛出的值。

  catch代码块捕获错误之后，程序不会中断，会按照正常流程继续执行下去。
  catch代码块之中可以加入判断语句。

  2.6finally 代码块

  表示不管是否出现错误，都必需在最后运行的语句。

  unction cleansUp() {
    try {
      throw new Error('出错了……');
      console.log('此行不会执行');
    } finally {
      console.log('完成清理工作');
    }
  }
  
  cleansUp()
  // 完成清理工作
  // Uncaught Error: 出错了……
  //    at cleansUp (<anonymous>:3:11)
  //    at <anonymous>:10:1
  

  中断执行之前，会先执行finally代码块，然后再向用户提示报错信息。
  try中return语句的执行是排在finally代码之前，只是等finally代码执行完毕后才返回。

  var count = 0;
  function countUp() {
    try {
      return count;
    } finally {
      count++;
    }
  }
  
  countUp()
  // 0
  count
  // 1
  

  return语句里面的count的值，是在finally代码块运行之前就获取了。

  function f() {
    try {
      console.log(0);
      throw 'bug';
    } catch(e) {
      console.log(1);
      return true; // 这句原本会延迟到 finally 代码块结束再执行
      console.log(2); // 不会运行
    } finally {
      console.log(3);
      return false; // 这句会覆盖掉前面那句 return
      console.log(4); // 不会运行
    }
  
    console.log(5); // 不会运行
  }
  
  var result = f();
  // 0
  // 1
  // 3
  
  result
  // false
  

  catch代码块之中，触发转入finally代码块的标志，不仅有return语句，还有throw语句。
  try代码块内部，还可以再使用try代码块。

  三、编程风格

• 缩进 行首的空格和 Tab 键，都可以产生代码缩进效果（indent）。
• 区块 如果循环和判断的代码体只有一行，JavaScript 允许该区块（block）省略大括号。 **建议总是使用大括号表示区块。** **表示区块起首的大括号，不要另起一行。**
• 圆括号 一种表示函数的调用，另一种表示表达式的组合（grouping）。

• 表示函数调用时，函数名与左括号之间没有空格。
  表示函数定义时，函数名与左括号之间没有空格。
  其他情况时，前面位置的语法元素与左括号之间，都有一个空格。

• 行尾的分号 以下三种情况，语法规定本来就不需要在结尾添加分号。 （1）for 和 while 循环 **do...while循环是有分号的。** （2）分支语句：if，switch，try （3）函数的声明语句

• 如果使用了分号，并不会出错。因为，解释引擎会把这个分号解释为空语句。

  分号的自动添加”（Automatic Semicolon Insertion，简称 ASI）
  只有下一行的开始与本行的结尾，无法放在一起解释，JavaScript 引擎才会自动添加分号。
  如果一行的起首是“自增”（++）或“自减”（–）运算符，则它们的前面会自动添加分号。
  如果continue、break、return和throw这四个语句后面，直接跟换行符，则会自动添加分号。

• 全局变量 JavaScript 最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。

• 不得不使用，可以考虑用大写字母表示变量名，这样更容易看出这是全局变量，比如UPPER_CASE。

• 最好把变量声明都放在代码块的头部。函数内部的变量声明，都应该放在函数的头部
• 建议不要使用相等运算符（==），相等运算符会自动转换变量类型，只使用严格相等运算符（===）。
• 建议自增（++）和自减（--）运算符尽量使用+=和-=代替。
• 建议switch...case结构可以用对象结构代替。

• 四、console 对象

  JavaScript 的原生对象

  用途有两个：
  调试程序，显示网页代码运行时的错误信息。
  提供了一个命令行接口，用来与网页代码互动。

  开发者工具以后，顶端有多个面板。

  Elements：查看网页的 HTML 源码和 CSS 代码。
  Resources：查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
  Network：查看网页的 HTTP 通信情况。
  Sources：查看网页加载的脚本源码。
  Timeline：查看各种网页行为随时间变化的情况。
  Performance：查看网页的性能情况，比如 CPU 和内存消耗。
  Console：用来运行 JavaScript 命令。

  4.1、console 对象的静态方法

  4.1.1console.log()

  它可以接受一个或多个参数，将它们连接起来输出。

  如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。

  console.log(' %s + %s = %s', 1, 1, 2)
  //  1 + 1 = 2
  

  console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符。

  %s 字符串
  %d 整数
  %i 整数
  %f 浮点数
  %o 对象的链接
  %c CSS 格式字符串

  使用%c占位符时，对应的参数必须是 CSS 代码，用来对输出内容进行 CSS 渲染。

  console.info是console.log方法的别名，用法完全一样。只不过console.info方法会在输出信息的前面，加上一个蓝色图标。

  console.debug方法与console.log方法类似，会在控制台输出调试信息。但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况下，才会显示。

  console对象的所有方法，都可以被覆盖

  ['log', 'info', 'warn', 'error'].forEach(function(method) {
    console[method] = console[method].bind(
      console,
      new Date().toISOString()
    );
  });
  
  console.log("出错了！");
  // 2014-05-18T09:00.000Z 出错了！
  
  

  4.1.2console.warn()，console.error() ,console.table(),console.count()

  warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错。同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

  console.table()
  对于某些复合类型的数据，console.table方法可以将其转为表格显示。

  console.count()方法用于计数，输出它被调用了多少次。
  dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
  该方法对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性。

  dirxml方法主要用于以目录树的形式，显示 DOM 节点。
  如果参数不是 DOM 节点，而是普通的 JavaScript 对象，console.dirxml等同于console.dir。

  console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确
  接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会提示有错误，在控制台输出第二个参数，

  console.time()，console.timeEnd()
  这两个方法用于计时，可以算出一个操作所花费的准确时间。
  它们的参数是计时器的名称。调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。

  console.group和console.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开

  console.groupCollapsed在第一次显示时是收起的，而不是展开的。

  console.trace方法显示当前执行的代码在堆栈中的调用路径。

  console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项，console.clear方法将不起作用。

  4.2控制台命令行 API

  （1）$_

  $_属性返回上一个表达式的值。

  （2）$0 - $4

  控制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个（最近一个），$1代表倒数第二个，以此类推直到$43）$(selector)

  $(selector)返回第一个匹配的元素

  （5）$x(path)

  $x(path)方法返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。

  （6）inspect(object)

  inspect(object)方法打开相关面板，并选中相应的元素

  （7）getEventListeners(object)

  getEventListeners(object)方法返回一个对象

  （8）keys(object)，values(object)

  keys(object)方法返回一个数组，包含object的所有键名。

  values(object)方法返回一个数组，包含object的所有键值。

  （9）monitorEvents(object[, events]) ，unmonitorEvents(object[, events])

  monitorEvents(object[, events])方法监听特定对象上发生的特定事件。事件发生时，会返回一个Event对象，包含该事件的相关信息。unmonitorEvents方法用于停止监听。

  monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。

  mouse：“mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
  key：“keydown”, “keyup”, “keypress”, “textInput”
  touch：“touchstart”, “touchmove”, “touchend”, “touchcancel”
  control：“resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

  命令行 API 还提供以下方法。

  clear()：清除控制台的历史。
  copy(object)：复制特定 DOM 元素到剪贴板。
  dir(object)：显示特定对象的所有属性，是console.dir方法的别名。
  dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名。

  4.3debugger 语句

  设置断点。如果有正在运行的除错工具，程序运行到debugger语句时会自动停下