web前端从零开始系列-08-Javascript语法专题

Javascript语法专题:数据类型转换,错误处理,编程风格,console对象

数据类型转换

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

强制转换

  • Number() 可以将任意类型的值转化成数值
  • String() 可以将任意类型的值转化成字符串
  • Boolean() 可以将任意类型的值转为布尔值

自动转换

自动转换布尔值

if ( !undefined
  && !null
  && !0
  && !NaN
  && !''
) {
  console.log('true');
} // true

自动换为字符串

var obj = {
  width: '100'
};

obj.width + 20 // "10020

自动转换为数值

null转为数值时为0,而undefined转为数值时为NaN

错误处理

Error 实例对象

JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例。

原生错误类型

  • SyntaxError对象是解析代码时发生的语法错误。
  • ReferenceError对象是引用一个不存在的变量时发生的错误。
  • RangeError对象是一个值超出有效范围时发生的错误。
  • TypeError对象是变量或参数不是预期类型时发生的错误。
  • URIError对象是 URI 相关函数的参数不正确时抛出的错误。
  • EvalError 对象eval函数没有被正确执行时,会抛出EvalError错误。

自定义错误

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

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

throw语句

throw语句的作用是手动中断程序执行,抛出一个错误。会中止程序

try...catch 结构

try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    console.log(e.name + ": " + e.message);
  } else if (e instanceof RangeError) {
    console.log(e.name + ": " + e.message);
  }
  // ...
}

finally 代码块

try...catch结构允许在最后添加一个finally代码块,表示不管是否出现错误,都必需在最后运行的语句。

典型场景

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}
编程风格

缩进:tab 和 空格选一种

表示区块起首的大括号,不要另起一行。

return {
  key : value
};

圆括号

  • 两个作用 函数调用 表达式组合
  • 函数调用时,函数定义时,函数名与左括号之间没有空格。
  • 其他情况,语法元素与左括号之间,都有一个空格

行尾分号

  • 有些情况可以省略,建议不省略行尾的分号,容易出错

全局变量

  • 建议避免使用全局变量,不得不使用请用大写字母

变量声明

尽量先在头部声明

if (!x) {
  var x = {};
}

// 等同于
var x;
if (!x) {
  x = {};
}
  • with可以减少代码的书写,但是会造成混淆。

  • 相等运算符会自动转换变量类型,造成很多意想不到的情况。

  • 建议不要将不同目的的语句,合并成一行。

  • 建议自增(++)和自减(--)运算符尽量使用+=和-=代替。

建议switch...case结构可以用对象结构代替。

function doAction(action) {
  switch (action) {
    case 'hack':
      return 'hack';
    case 'slash':
      return 'slash';
    case 'run':
      return 'run';
    default:
      throw new Error('Invalid action.');
  }
}
function doAction(action) {
  var actions = {
    'hack': function () {
      return 'hack';
    },
    'slash': function () {
      return 'slash';
    },
    'run': function () {
      return 'run';
    }
  };

  if (typeof actions[action] !== 'function') {
    throw new Error('Invalid action.');
  }

  return actions[action]();
}
console对象

console对象是 JavaScript 的原生对象

常用场景

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

console对象提供的各种静态方法

console.log(),console.info(),console.debug()

  • console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。
  • console.log方法会自动在每次输出的结尾,添加换行符。
  • console对象的所有方法,都可以被覆盖。

console.warn(),console.error()

console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

console.table() 表格显示数据

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

console.count()用于计数,输出它被调用了多少次。

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

console.dir(),console.dirxml()

dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

dirxml方法主要用于以目录树的形式,显示 DOM 节点。

如果参数不是 DOM 节点,而是普通的 JavaScript 对象,console.dirxml等同于console.dir。

console.assert()

console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立

console.time(),console.timeEnd() 可以算出一个操作所花费的准确时间。

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

console.clear方法用于清除当前控制台的所有输出,将光标回置到第一行。

控制台命令行 API

  • $_属性返回上一个表达式的值。
  • $0 - $4 控制台保存了最近5个在 Elements 面板选中的 DOM 元素
  • $(selector)返回第一个匹配的元素,等同于document.querySelector()
  • $$(selector)返回选中的 DOM 对象,等同于document.querySelectorAll。
  • $x(path)方法返回一个数组,包含匹配特定 XPath 表达式的所有 DOM 元素。
  • inspect(object)方法打开相关面板,并选中相应的元素,显示它的细节。
  • getEventListeners(object)方法返回一个对象,该对象的成员为object登记了回调函数的各 种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数。
  • keys(object)方法返回一个数组,包含object的所有键名。
  • values(object)方法返回一个数组,包含object的所有键值。
  • monitorEvents(object[, events])方法监听特定对象上发生的特定事件。
  • unmonitorEvents方法用于停止监听。
  • 其他方法
  • clear():清除控制台的历史。
  • copy(object):复制特定 DOM 元素到剪贴板。
  • dir(object):显示特定对象的所有属性,是console.dir方法的别名。
  • dirxml(object):显示特定对象的 XML 形式,是console.dirxml方法的别名。

debugger 语句

  • debugger语句主要用于除错,作用是设置断点。
  • Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。

以上学习整理于 阮一峰教程 更详细内容可直接访问

彼特城博客
请先登录后发表评论
  • latest comments
  • 总共0条评论