ES6+新特性

8分钟阅读

版本说明

  • ES6 (ES2015)：重大更新，引入了大量新特性
  • ES7-ES13：后续版本的渐进式增强

一、ES6 (ES2015) 核心特性

1.1 变量声明

块级作用域声明

  • let：可变的块级作用域变量
  • const：不可变的块级作用域常量
// ✅ 推荐：使用 const/let
const PI = 3.14;
let age = 18;
 
// ❌ 避免：使用 var（函数作用域，存在变量提升）
var name = "张三";

为什么不再使用 var？

  • 存在变量提升
  • 没有块级作用域
  • 可以重复声明

相关阅读：数据类型

1.2 解构赋值

// 对象解构
const person = { name: "张三", age: 18, gender: "男" };
const { name, age, gender } = person;
 
// 数组解构
const [a, b, c] = [1, 2, 3];
 
// 函数参数解构
function greet({ name, age }) {
  console.log(`${name} 今年 ${age} 岁`);
}

1.3 箭头函数

箭头函数特点

  • 没有this绑定（继承外层作用域）
  • 不能作为构造函数
  • 没有arguments对象
  • 适合作为回调函数
// 基本语法
const add = (a, b) => a + b;
 
// 省略括号（单参数）
const double = x => x * 2;
 
// 省略 return（单表达式）
const sum = (a, b) => a + b;
 
// 对象字面量返回（需括号包裹）
const getUser = id => ({ id, name: "User" });

1.4 模板字符串

const name = "张三";
const age = 18;
 
// 多行字符串
const html = `
  <div>
    <h1>${name}</h1>
    <p>今年 ${age} 岁</p>
  </div>
`;
 
// 表达式插值
const message = `我的名字是${name}，我${age}岁了。`;

1.5 对象增强

// 属性简写
const name = "张三";
const age = 18;
const person = { name, age };
 
// 方法简写
const user = {
  name,
  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
};
 
// 计算属性名
const key = "dynamic";
const obj = {
  [key]: "value",
  [`prop_${Date.now()}`]: "computed"
};

1.6 展开与剩余运算符

用途对比

  • 展开运算符 ...：展开数组/对象
  • 剩余运算符 ...：收集参数/元素
// 数组展开
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
 
// 对象展开（ES9）
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
 
// 剩余参数（函数）
function sum(...nums) {
  return nums.reduce((a, b) => a + b);
}
 
// 剩余元素（数组解构）
const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]

1.7 新增数据结构

Symbol（唯一标识符）

const id = Symbol('id');
const user = {
  [id]: 123  // 作为对象键，确保唯一性
};

Set（不重复集合）

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set {1, 2, 3}
 
// 常用方法
set.add(4);
set.has(2);  // true
set.delete(1);

Map（键值对集合）

const map = new Map();
map.set('name', '张三');
map.set(123, '数字键');
 
// 常用方法
map.get('name');  // '张三'
map.has('name');  // true

WeakSet / WeakMap（弱引用）

弱引用特性

  • 键只能是对象
  • 键是弱引用，可被垃圾回收
  • 不可遍历

1.8 Class 类语法

class Person {
  // 实例属性（ES13）
  name = "默认值";
 
  // 构造函数
  constructor(name) {
    this.name = name;
  }
 
  // 静态方法
  static create(name) {
    return new Person(name);
  }
 
  // 原型方法
  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
}
 
// 继承
class Student extends Person {
  constructor(name, grade) {
    super(name);  // 调用父类构造函数
    this.grade = grade;
  }
 
  study() {
    console.log(`${this.name} 正在学习`);
  }
}

1.9 Proxy 代理

Vue3 响应式核心 Proxy 可以代理整个对象，是 Vue3 响应式的核心实现。

const obj = { name: "张三", age: 18 };
 
const proxy = new Proxy(obj, {
  get(target, key) {
    console.log(`获取属性: ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`设置属性: ${key} = ${value}`);
    target[key] = value;
    return true;
  }
});
 
proxy.name;  // 触发 get
proxy.age = 19;  // 触发 set

二、ES7-ES13 新增特性

2.1 ES7 (ES2016)

Array.prototype.includes() 检查数组是否包含某个值

[1, 2, 3].includes(2);  // true
[1, 2, 3].includes(4);  // false

指数运算符 **

2 ** 3;  // 8（2 的 3 次方）
Math.pow(2, 3);  // 等同于

2.2 ES8 (ES2017)

特性说明示例
Object.values()返回对象值的数组Object.values({a:1}) // [1]
Object.entries()返回键值对数组Object.entries({a:1}) // [['a',1]]
String.padStart()开头填充'a'.padStart(3,'x') // 'xxa'
String.padEnd()结尾填充'a'.padEnd(3,'x') // 'axx'
Object.getOwnPropertyDescriptors()获取属性描述符-
函数尾随逗号允许末尾逗号function f(a,b,) {}

2.3 ES9 (ES2018)

特性说明
async/await异步操作的同步写法
Promise.finally()Promise 最终执行
对象展开运算符{...obj1, ...obj2}

异步编程完整方案 相关阅读：异步编程

2.4 ES10 (ES2019)

特性说明
Array.flat()数组扁平化
Array.flatMap()映射后扁平化
Object.fromEntries()键值对转对象
String.trimStart()去除开头空格
String.trimEnd()去除结尾空格

2.5 ES11 (ES2020)

重要特性

可选链操作符 ?.

const user = {
  address: {
    city: "北京"
  }
};
 
// 安全访问嵌套属性
const city = user?.address?.city;  // "北京"
const zip = user?.address?.zip;    // undefined（不会报错）

空值合并操作符 ??

const name = null ?? "默认值";  // "默认值"
const age = 0 ?? 18;            // 0（只有 null/undefined 才取默认值）
 
// 与 || 的区别
const count = 0 || 10;   // 10（0 是 falsy）
const count2 = 0 ?? 10;  // 0（0 不是 null/undefined）

BigInt（大整数）

const bigNum = 9007199254740991n;
const bigInt = BigInt(9007199254740991);

2.6 ES12 (ES2021)

逻辑赋值运算符

// ||= 仅当左侧为 falsy 时赋值
a ||= b;  // 等同于 a || (a = b)
 
// &&= 仅当左侧为 truthy 时赋值
a &&= b;  // 等同于 a && (a = b)
 
// ??= 仅当左侧为 null/undefined 时赋值
a ??= b;  // 等同于 a ?? (a = b)

2.7 ES13 (ES2022)

特性说明
Object.hasOwn()检查属性是否为自有属性
Array.at()支持负索引的数组访问
Class 字段声明实例字段的声明语法
// Array.at() 支持负索引
const arr = [1, 2, 3];
arr.at(0);   // 1
arr.at(-1);  // 3（最后一个元素）
 
// Class 字段声明
class Person {
  name = "默认值";  // 实例属性
  static count = 0;  // 静态属性
}

三、版本速查表

版本年份重要特性
ES62015let/const、箭头函数、解构、Class、Module
ES72016includes、指数运算符
ES82017async/await、Object.entries
ES92018对象展开、Promise.finally
ES102019Array.flat、String.trim
ES112020可选链、空值合并、BigInt
ES122021逻辑赋值运算符
ES132022Class 字段、Array.at

相关链接

关系图谱

反向链接