es6+新增特性有哪些

ES6+(ES6及以后版本,如ES7、ES8等)新增了许多特性,主要包括以下几个方面:


1. ES6(2015)新增特性

变量声明

  • letconst(块级作用域)
  • var(仍可用,但更推荐 letconst

模板字符串

复制代码
const name = "Tom";
console.log(`Hello, ${name}!`); // Hello, Tom!

解构赋值

复制代码
const user = { name: "Alice", age: 25 };
const { name, age } = user; 
console.log(name, age); // Alice 25

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first, second); // 1 2

展开运算符(...)

复制代码
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

箭头函数

复制代码
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

默认参数

复制代码
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // Hello, Guest!

对象字面量增强

复制代码
const age = 25;
const user = { name, age }; // { name: "Alice", age: 25 }

类(Class)

复制代码
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}
const p = new Person("Alice");
p.sayHello(); // Hello, I'm Alice

模块(Module)

复制代码
// a.js
export const greet = () => console.log("Hello");
// b.js
import { greet } from "./a.js";
greet();

Promise

复制代码
const fetchData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data loaded"), 1000);
  });

fetchData().then((res) => console.log(res)); // Data loaded

SetMap

复制代码
const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }

const map = new Map();
map.set("key1", "value1");
console.log(map.get("key1")); // value1

for...of 循环

复制代码
const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num);
}

Symbol(唯一值)

复制代码
const sym = Symbol("unique");
console.log(sym); // Symbol(unique)

2. ES7(2016)新增特性

Array.prototype.includes

复制代码
console.log([1, 2, 3].includes(2)); // true

指数运算符(**

复制代码
console.log(2 ** 3); // 8

3. ES8(2017)新增特性

async/await

复制代码
const fetchData = async () => {
  return "Data loaded";
};
fetchData().then(console.log); // Data loaded

Object.entries() / Object.values()

复制代码
const obj = { a: 1, b: 2 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]
console.log(Object.values(obj)); // [1, 2]

字符串填充

复制代码
console.log("5".padStart(2, "0")); // '05'
console.log("5".padEnd(3, "0")); // '500'

4. ES9(2018)新增特性

对象的展开运算符

复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Promise.prototype.finally

复制代码
fetchData()
  .then(console.log)
  .catch(console.error)
  .finally(() => console.log("Done"));

5. ES10(2019)新增特性

Array.prototype.flat()flatMap()

复制代码
console.log([1, [2, [3, 4]]].flat(2)); // [1, 2, 3, 4]
console.log([1, 2].flatMap(x => [x * 2])); // [2, 4]

Object.fromEntries()

复制代码
console.log(Object.fromEntries([["a", 1], ["b", 2]])); // { a: 1, b: 2 }

6. ES11(2020)新增特性

可选链(?.

复制代码
const user = { profile: { name: "Alice" } };
console.log(user?.profile?.name); // Alice
console.log(user?.address?.street); // undefined

空值合并运算符(??

复制代码
console.log(null ?? "default"); // "default"
console.log(0 ?? "default"); // 0

Promise.allSettled()

复制代码
Promise.allSettled([Promise.resolve(1), Promise.reject("error")])
  .then(console.log);

7. ES12(2021)新增特性

String.prototype.replaceAll()

复制代码
console.log("hello world".replaceAll("l", "L")); // "heLLo worLd"

Promise.any()

复制代码
Promise.any([
  Promise.reject("error"),
  Promise.resolve("success"),
]).then(console.log); // "success"

WeakRef(弱引用)

复制代码
const obj = new WeakRef({ name: "Alice" });

8. ES13(2022)新增特性

Object.hasOwn()

复制代码
console.log(Object.hasOwn({ a: 1 }, "a")); // true

顶层 await

复制代码
const data = await fetch("https://api.example.com/data").then(res => res.json());
console.log(data);

总结

ES6+ 带来了大量新特性,其中 ES6 是最大的一次更新,引入了 letconst、箭头函数、解构赋值、类、模块化等。后续版本(ES7+)继续增加了 async/await、可选链(?.)、Promise.allSettled()Object.hasOwn() 等新特性。

你最关注哪些特性?可以针对某个特性深入探讨! 😊

相关推荐
paopaokaka_luck22 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js