ES6 常用知识

提示

ECMAScript 6 (简称 ES6) 是 JavaScript 语言的下一代标准。本文总结了 ES6+ 中最常用的特性。

1. let 和 const

ES6 新增了 let 和 const 命令，用于声明变量。

区别

特性	var	let	const
变量提升	✅ (提升到作用域顶部，值为 undefined)	❌ (存在暂时性死区 TDZ)	❌ (存在暂时性死区 TDZ)
作用域	函数作用域	块级作用域	块级作用域
重复声明	✅	❌	❌
挂载到顶层对象	✅ (window.a)	❌	❌
能否修改	✅	✅	❌ (值不可变，引用类型的属性可变)

暂时性死区 (TDZ)

在代码块内，使用 let 或 const 命令声明变量之前，该变量都是不可用的。

if (true) {
  // TDZ 开始
  console.log(tmp) // ReferenceError
  // ...
  let tmp // TDZ 结束
  console.log(tmp) // undefined
}

2. 解构赋值

数组解构

const [a, b, c] = [1, 2, 3]
const [x, , y] = [1, 2, 3] // x=1, y=3
const [head, ...tail] = [1, 2, 3, 4] // head=1, tail=[2, 3, 4]
const [foo = true] = [] // 默认值

对象解构

const { foo, bar } = { foo: 'aaa', bar: 'bbb' }

// 重命名
const { foo: baz } = { foo: 'aaa' } // baz='aaa'

// 默认值
const { x = 3 } = {} // x=3

3. 模板字符串

使用反引号 (`) 标识，支持多行字符串和变量插值。

const name = 'fengfeng'
const age = 18
const str = `我叫 ${name}，今年 ${age} 岁`

4. 函数扩展

参数默认值

function log(x, y = 'World') {
  console.log(x, y)
}

箭头函数

const f = (v) => v
const sum = (num1, num2) => num1 + num2

注意点：

1. 没有自己的 this，this 指向定义时所在的上层作用域。
2. 不能当作构造函数（不能 new）。
3. 没有 arguments 对象，可以使用 rest 参数代替。
4. 不能使用 yield 命令。

5. 扩展运算符 (...)

数组

console.log(...[1, 2, 3]) // 1 2 3
const arr = [...arr1, ...arr2] // 合并数组
const copy = [...arr] // 浅拷贝

对象

const obj = { ...obj1, ...obj2 } // 合并对象
const copy = { ...obj } // 浅拷贝

6. 数组扩展方法

• Array.from(): 将类数组对象或可迭代对象转为数组。
• Array.of(): 将一组值转为数组。
• includes(): 判断数组是否包含某个值。
• find() / findIndex(): 查找第一个符合条件的成员/索引。
• flat() / flatMap(): 数组扁平化。
• at(): 支持负索引访问。

;[1, 2, 3]
  .includes(2) // true
  [(1, 4, -5, 10)].find((n) => n < 0) // -5
  [(1, [2, [3]])].flat(Infinity) // [1, 2, 3]

7. 对象扩展方法

• 属性简写: { x, y } 等同于 { x: x, y: y }。
• Object.assign(): 对象合并（浅拷贝）。
• Object.is(): 比较两个值是否严格相等（修复了 NaN === NaN 为 false 的问题）。
• Object.keys() / values() / entries(): 遍历键/值/键值对。
• 可选链 (?.): obj?.prop。
• 空值合并 (??): 只有当左侧为 null 或 undefined 时才返回右侧的值。

const user = {
  name: 'fengfeng',
  cat: {
    name: 'doudou',
  },
}

const catName = user?.cat?.name // 'doudou'
const dogName = user?.dog?.name ?? '旺财' // '旺财'

8. Promise

异步编程的解决方案。

const promise = new Promise((resolve, reject) => {
  if (/* 异步操作成功 */){
    resolve(value)
  } else {
    reject(error)
  }
})

promise.then(value => {
  // success
}, error => {
  // failure
})

静态方法

• Promise.all(): 所有成功才成功，一个失败就失败。
• Promise.race(): 谁快以谁为准。
• Promise.allSettled(): 等待所有结束（无论成功失败）。
• Promise.any(): 只要有一个成功就成功。

9. Module 模块化

ES6 模块是编译时加载，使得静态分析成为可能。

export

// 导出变量
export const name = 'fengfeng'

// 导出函数
export function log() {}

// 默认导出
export default function () {}

import

import { name, log } from './utils'
import customName from './utils' // 对应 export default
import * as utils from './utils' // 整体加载

10. async / await

ES2017 引入，是 Generator 的语法糖，使异步代码看起来像同步代码。

async function fetchData() {
  try {
    const res = await fetch('/api/data')
    const data = await res.json()
    console.log(data)
  } catch (err) {
    console.error(err)
  }
}