ES6相关

约 728 字大约 2 分钟

2025-03-12

变量和常量

let variableByVar = 10
let variableByLet = 10
const constant = 10

let、var的区别

全局污染。let定义的变量不会污染全局，var定义的会。（let定义的变量仍然可以跨越标签使用）
作用域。let声明的变量作用域：块级作用域、全局作用域、函数作用域；var：全局作用域、函数作用域。
暂时性死区。var声明的变量能变量提升（声明前可以调用，返回undefined），let声明的变量也有提升，但是会形成暂时性死区，无法访问未声明的变量。
重复声明。var声明的变量可以重复声明，let声明的不可重复声明。

新基本数据类型

新增两个基本数据类型Symbol、Bigint。

Symbol的本质是表示一个唯一标识。每次创建一个Symbol，它所代表的值都不可能重复。所以理论上Symbol 的存在只有一个意义：用于必须使用唯一值的场景。

BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值以任意精度表示整数的能力尤为重要。使用BigInt ，整数溢出将不再是问题。

模板字符串

使用反引号```包围，变量替换使用${}。模板支持换行。

const name = 'L0v3ch4n'
const age = 18
console.log(`My name is ${name}, I am ${age} years old.`)
// My name is L0v3ch4n, I am 18 years old.

解构赋值

const [a, b, c] = [1, 2, 3]

const {
  userName,
  age: userAge,
  ...otherInfo
} = {
  name: 'L0v3ch4n',
  age: 18,
  gender: 'male',
  other: 'chors',
}

扩展操作符

展开的元素是无序的。

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]

const obj1 = {
  key1: 'value1',
}
const obj2 = {
  key2: 'value2',
}
const obj3 = {
  kay3: 'value3',
  ...obj1,
  ...obj2,
}

类

声明&实例化

class A {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const a = new A('L0v3ch4n', 18)

继承

class A {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

class B extends A {
  constructor(name, age, gender) {
    super.constructor(name, age)
    this.gender = gender
  }
}

箭头函数

const fn1 = n => n + 3
const fn2 = (n1, n2) => n1 + n2
const fn3 = (n1, n2, ...other) => console.log(other)
function fn4(n1, n2, ...other) {
  console.log(other)
  return n1 + n2
}

异步

Promise

Promise 会放置在微任务消息队列中，优先级最高； ES6 中加入了async、await关键字支持异步（将异步代码以同步形式写出）。

Promise

const p1 = new Promise((resolve, reject) => {
  if (success)
    resolve()
  else reject()
})
p1.then((res) => {}).catch((err) => {})

async

function fn1() {
  return 1
}

async function fn2() {
  let res = await fn1()
  console.log(res)
}

Proxy

代理对象，响应式的基础。用于监控对对象属性的操作。

const obj = {
  name: 'L0v3ch4n',
  age: 18,
}
new Proxy(obj, {
  get(target, property, receiver) {
    console.log('Getter')
    return obj[property]
  },
  set(target, property, value, receiver) {
    console.log('Setter')
    obj[property] = value
    container.textContent = obj.name // 界面数据更新逻辑
  },
})

Module

ESM

a.js (export)

export const aTitle = 'a title'

export function aFun() {
  console.log('a')
}

export default {
  name: 'a Module',
}

b.js (import)

import { aFun, aTitle, name } from './a.js'

Common JS

a.js (export)

module.exports = {
  a: 1,
  b: 2,
  c: 3,
}
exports.d = 4

b.js (import)

const moduleA = require('./a')

贡献者

Cuber-Wei