浅谈JavaScript、ES5、ES6

1. 基本数据类型 VS 引用数据类型

①谈谈JavaScript中的变量、指针和引用
②JavaScript 的基本类型和引用类型

• 基本数据类型的值直接在栈内存存储，独立存在；
• 对象是保存在堆内存中的，每创建一个对象，就会在堆内存中开辟一个新的空间【但复制时不创建新对象，直接复制内存地址】比较时比较内存地址。

---

2. 函数

💡 arguments对象：在函数体内部读取所有参数。
包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

• 闭包就是能够读取其他函数内部变量的函数。[定义在一个函数内部的函数]
• eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。如果eval的参数不是字符串，那么会原样返回。eval的本质是在当前作用域之中，注入代码。【不推荐】

---

3. 数组

• JavaScript 语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串(typeof把数组当作对象)。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。
• 使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。
• 数组的slice方法可以将“类似数组的对象”变成真正的数组

var arr = Array.prototype.slice.call(arrayLike);
1

• “类似数组的对象”还有一个办法可以使用数组的方法，就是通过call()把数组的方法放到对象上面。

function print(value, index) {
  console.log(index + ' : ' + value);
}

**Array.prototype.forEach.call(arrayLike, print);**
1
2
3
4
5

---

4. 错误处理机制

• JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。
• Error实例对象必须有message属性，表示出错时的提示信息；还提供name-错误名称，stack-错误堆栈
• 原生错误类型：Error实例对象及其6个派生对象
  • SyntaxError
    对象是解析代码时发生的语法错误。
  • ReferenceError
    对象是引用一个不存在的变量时发生的错误。
  • RangeError
    对象是一个值超出有效范围时发生的错误。
  • TypeError
    对象是变量或参数不是预期类型时发生的错误。
  • URIError
    对象是 URI 相关函数的参数不正确时抛出的错误
  • eval
    函数没有被正确执行时，会抛出EvalError错误。[不再使用]

var err1 = new Error('出错了！');
var err2 = new RangeError('出错了，变量超出有效范围！');
var err3 = new TypeError('出错了，变量类型无效！');

err1.message // "出错了！"
err2.message // "出错了，变量超出有效范围！"
err3.message // "出错了，变量类型无效！"
1
2
3
4
5
6
7

throw语句

• throw语句的作用是手动中断程序执行，抛出一个错误。
• throw可以抛出任何类型的值。也就是说，它的参数可以是任何值。
• 对于 JavaScript 引擎来说，遇到throw语句，程序就中止了

try…catch语句

• try...catch结构，允许对错误进行处理，选择是否往下执行。
• 如果你不确定某些代码是否会报错，就可以把它们放在try...catch
  代码块之中，便于进一步对错误进行处理。
• catch代码块捕获错误之后，程序不会中断，会按照正常流程继续执行下去。

try {
  throw "出错了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222
1
2
3
4
5
6
7
8

finally 代码块

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

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}
1
2
3
4
5
6
7
8
9

---

5. console 对象与控制台

• console对象的静态方法
  • console.log方法用于在控制台输出信息。支持以下占位符:
    %s 字符串 %d 整数 %i 整数 %f 浮点数 %o 对象的链接 %c CSS 格式字符串
  • 对于某些复合类型的数据，console.table方法可以将其转为表格显示。
  • console.count方法用于计数，输出它被调用了多少次。
  • console.dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。dirxml方法主要用于以目录树的形式，显示 DOM 节点。
  • console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。
  • console.time()，console.timeEnd()这两个方法用于计时，可以算出一个操作所花费的准确时间
  • console.group()，console.groupEnd()，console.groupCollapsed()用于将展示信息分组
  • console.trace() 显示当前执行的代码在堆栈中的调用路径，console.clear()用于清除当前控制台的所有输出。

---

6. 控制台命令行API

• $_属性返回上一个表达式的值。
• $0 - $4：保存了最近5个在 Elements 面板选中的 DOM 元素，$0
  代表倒数第一个（最近一个），$1代表倒数第二个
• $(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方法用于停止监听
• debugger语句主要用于除错，作用是设置断点。