ECMAScript 6 学习笔记

2020/04/25 JavaScript ES6 views

ECMAScript 6 入门

ECMAScript 和 JavaScript

  • 前者是后者的规格,后者是前者的一种实现。

  • ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。

  • Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。

let 和 const

let

  • 作用域:只在声明所在的块级作用域内有效,只能出现在当前作用域的顶层。

  • 不存在变量提升:声明的变量一定要在声明后使用,否则报错。

  • 暂时性死区:只要块级作用域内存在 let 命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。

  • 不允许重复声明:let 不允许在相同作用域内,重复声明同一个变量。

函数声明

  • ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于 let,在块级作用域之外不可引用。

  • 严格模式下,函数只能声明在当前作用域的顶层。

  • 为了减轻不兼容问题,ES6 在附录里面规定,ES6 浏览器的实现可以不遵守上面的规定,有自己的行为方式:

  1. 允许在块级作用域内声明函数。
  2. 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
  3. 函数声明还会提升到所在的块级作用域的头部。

const

  • 声明一个只读的常量。一旦声明,常量的值就不能改变,而且必须立即初始化,不能留到以后赋值。

  • let 相同的地方:只在声明所在的块级作用域内有效,声明的常量不提升,同样存在暂时性死区,只能在声明的位置后面使用,不可重复声明。

  • 本质:

  1. 对于简单类型的数据(数值、字符串、布尔值),值保存在变量指向的那个内存地址,因此等同于常量。

  2. 对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const 只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。也就是说,用 const 将一个对象或数组声明为常量后,仍然可以对这个对象或数组进行添加属性、push等操作,但不能赋值另一个对象或数组。

  3. 如果真的想将对象冻结,应该使用 Object.freeze({}) 方法。

ES6 声明变量的六种方法

  • ES5 只有两种声明变量的方法:var 命令和 function 命令。

  • ES6 除了添加 letconst 命令,还有另外两种声明变量的方法:import 命令和 class 命令。所以 ES6 一共有 6 种声明变量的方法。

顶层对象的属性

  • 为了保持兼容性,var 命令和 function 命令声明的全局变量,依旧是顶层对象(在浏览器中指 window 对象,在 Node 中指 global 对象)的属性;

  • let 命令、const 命令、class 命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

变量的解构赋值

// 数组
let [a, b, c] = [1, 2, 3];

let [a, [b], d] = [1, [2, 3], 4];

// 对象
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

let { p, p: [x, { y }] } = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

// 字符串
const [a, b, c, d, e] = 'hello';

// 默认值
let [foo = true] = [];
let { x = 3 } = {};
  • 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

  • 用途:

  1. 交换变量的值。[x, y] = [y, x];

  2. 从函数返回多个值。

  3. 函数参数的定义。function f([x, y, z]) { ... } function f({x, y, z}) { ... }

  4. 提取 JSON 数据。

  5. 函数参数的默认值。function f({x = 0, y = 0} = {}) { ... }

  6. 遍历 Map 结构。for (let [key, value] of map) { ... }

  7. 输入模块的指定方法。

字符串的扩展

  • 字符串可以被 for of 循环遍历。

Search

    欢迎关注我的微信公众号

    闷骚的程序员

    Table of Contents