百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

es6+新增特性有哪些(es6中新增)

liuian 2025-03-25 15:21 39 浏览

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


1. ES6(2015)新增特性

变量声明

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

模板字符串

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

Set 和 Map

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 是最大的一次更新,引入了 let、const、箭头函数、解构赋值、类、模块化等。后续版本(ES7+)继续增加了 async/await、可选链(?.)、Promise.allSettled()、Object.hasOwn() 等新特性。

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

相关推荐

win7旗舰版好还是win8好(win7好还是win7旗舰版好)

相比较来说,win7系统更好。1、win8只不过是一个win10的过度系统,使用起来并不是很流畅。2、而win7系统已经经历了十数年的考验,拥有很强大的稳定性和兼容性。3、如果我们是在win7和win...

如何修改电脑默认浏览器(如何更改电脑中的默认浏览器)

Windows系统:1.打开“设置”应用。2.点击“应用”。3.点击“默认应用”。4.在“网络浏览器”下,选择你想要设置为默认浏览器的应用。macOS系统:1.打开“Safari”浏览器...

免费下载360杀毒软件手机版(给我下载一个360杀毒软件)

360手机卫士苹果版来自奇虎360推出的一款iPhone手机管理软件,360手机卫士苹果版推为iOS用户提供专业、完善和高效的移动设备管理服务,360手机卫士手机版可以实现流量监控、电池管家、隐私空间...

hotmail官网邮箱登录(hotmail邮箱网址)
  • hotmail官网邮箱登录(hotmail邮箱网址)
  • hotmail官网邮箱登录(hotmail邮箱网址)
  • hotmail官网邮箱登录(hotmail邮箱网址)
  • hotmail官网邮箱登录(hotmail邮箱网址)
office2019专业版永久密钥(word2019专业版密钥)
  • office2019专业版永久密钥(word2019专业版密钥)
  • office2019专业版永久密钥(word2019专业版密钥)
  • office2019专业版永久密钥(word2019专业版密钥)
  • office2019专业版永久密钥(word2019专业版密钥)
qq手机号未验证升级密保(qq手机号未验证就不能用了吗)

QQ更换密保手机可以选择通过密保问题进行验证,而不需要以前绑定的手机号码进行验证。更换QQ手机绑定号码的方法是1登录电脑QQ2选择工具-安全-安全中心首页3.选择右边更换密保手机选项4..点击更换密保...

电脑总是蓝屏自动重启(电脑蓝屏自动重启报错whea uncorrectable)
  • 电脑总是蓝屏自动重启(电脑蓝屏自动重启报错whea uncorrectable)
  • 电脑总是蓝屏自动重启(电脑蓝屏自动重启报错whea uncorrectable)
  • 电脑总是蓝屏自动重启(电脑蓝屏自动重启报错whea uncorrectable)
  • 电脑总是蓝屏自动重启(电脑蓝屏自动重启报错whea uncorrectable)
怎样恢复被删除的好友(如何恢复被误删的好友)
  • 怎样恢复被删除的好友(如何恢复被误删的好友)
  • 怎样恢复被删除的好友(如何恢复被误删的好友)
  • 怎样恢复被删除的好友(如何恢复被误删的好友)
  • 怎样恢复被删除的好友(如何恢复被误删的好友)
开机蓝屏0x000000ed(开机蓝屏0x0000007b怎么解决)

停止代码0x000000ED蓝屏错误,通常称为“UNMOUNTABLE_BOOT_VOLUME”,表示计算机在尝试访问或加载操作系统时遇到问题。这通常是由硬盘驱动器或文件系统损坏引起的,也可能是由...

ps软件在线使用(ps在线工具)

?选择工具是最基本的PS工具之一,具有对图层进行移动和对齐的功能,工具栏上是个亿带十字的箭头图标(区别于路径选择工具,后者是一个标准的箭头图标)。?在使用PS工具的时候,我们要注意鼠标状态的变...

win7平板电脑(win7平板电脑好用吗)

方法一:平板模式只需在操作中心快速切换:1、点击右下角的操作中心图标,在弹出的窗口中点击“平板模式”实现开启或关闭;2、如此一来就能轻松实现平板模式和桌面模式的快速切换了。方法二:系统设置修改1...

windowsxp是哪一年发布的(windowsxp是什么时候发布的)

WindowsXP是微软公司研发的计算机操作系统,于2001年10月25日正式发布。其名字中“XP”的意思来自英文中的“体验”(Experience)。[1][2]WindowsXP使用了Luna...

win8没有无线网络连接(win8无线设备没有wifi)

当Win8.1的网络连接不可用时,您可以尝试以下几种方法来解决问题:1.检查物理连接:确保网络电缆正确连接到计算机和路由器/调制解调器。如果使用的是无线网络,请确保无线适配器已启用,并且与正确的网络...

手机系统重装教程(手机系统如何重装系统)
手机系统重装教程(手机系统如何重装系统)

手机怎么重装系统?1首先我们是需要做好个人数据的备份的,只要做好联系人,文件夹,重要的软件和照片的备份,使用专业的备份软件就可以,我们找到设置然后找到云服务点击进去然后就会有一个云备份,再点进去有个立即备份。2第二个条件就是手机一定要有充足...

2026-01-09 04:55 liuian

笔记本触摸板没反应怎么办(笔记本电脑触摸板没反应怎么回事)
笔记本触摸板没反应怎么办(笔记本电脑触摸板没反应怎么回事)

您可以尝试按下触摸板上方的Fn键加上触摸板功能键来恢复触摸板反应。如果这个方法不行的话,您可以尝试更换电脑驱动或进行一些基础维护来解决问题。触摸板没有反应可能是因为触摸板驱动或者硬件出现问题,还有可能是触摸板出现灰尘卡住,需要进行清理维护。...

2026-01-09 04:05 liuian