【编程指南】ES2016到ES2023新特性解析一网打尽(一)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 【编程指南】ES2016到ES2023新特性解析一网打尽(一)

ES2016

Array.prototype.includes()

Array.prototype.includes 方法: 这个方法用于检查数组是否包含特定元素,如果包含则返回 true,否则返回 false

// 我有一个水果篮子
const fruitBasket = ['apple', 'banana', 'orange', 'grape'];
// 我要检查篮子里是否有橙子
const hasOrange = fruitBasket.includes('orange');
console.log(hasOrange); // 输出: true
// 我还想知道篮子里是否有葡萄
const hasGrape = fruitBasket.includes('grape');
console.log(hasGrape); // 输出: true
// 现在我要检查篮子里是否有西瓜
const hasWatermelon = fruitBasket.includes('watermelon');
console.log(hasWatermelon); // 输出: false

求幂运算

求幂运算符: 这是一个新的算术运算符,用于计算一个数的幂

// 我要计算 2 的 3 次幂
const result = 2 ** 3;
console.log(result); // 输出: 8

ES2017

Object.values/Object.entries

Object.valuesObject.entries 方法:

  • Object.values:把字典里的值都拿出来,就像拿出一个个水果。
  • Object.entries:把字典里的值和对应的名字都拿出来,就像知道每个水果的名字和样子。
const person = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};
const values = Object.values(person); // 得到:['Alice', 25, 'New York']
const entries = Object.entries(person); // 得到:[['name', 'Alice'], ['age', 25], ['city', 'New York']]

字符串补全

字符串补全是一种操作,可以在一个字符串的末尾添加一些额外的字符,使得字符串的长度达到特定的目标长度。

console.log('a'.padStart(5, '1')); // 1111a
console.log('a'.padEnd(5, '2')); // a2222

async/await

async/await 是 JavaScript 中处理异步操作的一种方式,它使得在代码中处理异步任务更加直观和易读。

function simulateFetchingData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}
async function fetchData() {
  console.log('Fetching data...');
  const data = await simulateFetchingData();
  console.log(data); // 输出: 'Data fetched'
}
fetchData(); // 会在一秒后输出: 'Data fetched'

Object.getOwnPropertyDescriptors()

用于获取一个对象的所有属性的详细信息,包括属性的特性(例如可写、可枚举、可配置)以及属性的值。

const item = {
  name: 'Widget',
  color: 'Blue'
};
const descriptors = Object.getOwnPropertyDescriptors(item);
console.log(descriptors);

参数列表支持尾逗号

函数参数列表最后一个参数后面允许有一个逗号,这在以后添加更多参数时更方便。

function inviteFriends(friend1, friend2, friend3,) {
  console.log("Inviting:", friend1, friend2, friend3);
}
inviteFriends('Alice', 'Bob', 'Charlie',); // 输出: Inviting: Alice Bob Charlie

ES2018

for-await-of 异步迭代

异步迭代在 Node.js 中用的会多些,使用 for-await-of 遍历异步数据。例如使用 MongoDB 查询数据返回值默认为一个游标对象,避免了一次性把数据读入应用内存


想象你有一组需要分步完成的任务,比如读取多个文件,这些任务都是异步的。for-await-of 就像是一个一个完成这些任务,等一个任务完成后再进行下一个。

async function fetchUserData(userId) {
  // 模拟异步操作,比如从服务器获取用户数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`User data for ID ${userId}`);
    }, 1000);
  });
}
const userIds = [1, 2, 3];
(async () => {
  for await (const userData of userIds.map(fetchUserData)) {
    console.log(userData);
  }
})();

Promise.finally

Promise.finally 是在 Promise 结束(不管是成功还是失败)后,无论如何都会执行的代码块。

const fetchData = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('Data fetched');
  }, 1000);
});
fetchData
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log('Promise finished'));

新的正则表达式功能

  • 正则命名组捕获
  • 正则表达式 Unicode 转义
  • 正则表达式dotAll模式
  • 正则 Lookbehind 断言

Rest/Spread 属性

这些属性让你可以更方便地处理函数参数和对象数组的拷贝。

想象你要组织一场聚会,需要把朋友们的名字一个一个列出来。Rest 属性就像是把这些名字都捡起来放进一个列表,而 Spread 属性就像是把这个列表里的名字一个一个散落出来。

// Rest 属性
function inviteFriends(host, ...guests) {
  console.log(`${host}邀请了${guests.join(', ')}参加聚会`);
}
inviteFriends('Alice', 'Bob', 'Charlie', 'David');
// Spread 属性
const oldFriends = ['John', 'Jane'];
const newFriends = ['Mike', 'Emily'];
const allFriends = [...oldFriends, ...newFriends];
console.log(allFriends); // 输出: ['John', 'Jane', 'Mike', 'Emily']

解除模版字符串限制

解析器会去查找有效的转义序列,例如 Unicode 字符以 "\u" 开头,例如 \u00A9,以下 "\unicode" 是一个非法的 Unicode 字符,在之前就会得到一个 SyntaxError: malformed Unicode character escape sequence 错误。ES2018 中解除了这个限制,当遇到不合法的字符时也会正常执行,得到的是一个 undefined,通过 raw 属性还是可以取到原始字符串。

function latex(strings, ...exps) {
  console.log(strings); // [ undefined ]
  console.log(strings.raw);  // [ 'latex \unicode' ]
 }
 latex`latex \unicode`;

ES2019

可选的 catch 参数

允许在 catch 块中省略异常参数,使得在不需要异常信息时代码更简洁。

try {
  // 一些可能会发生问题的代码
} catch {
  // 不需要异常参数
  console.log('出错了');
}

Symbol.prototype.description

这是一个新的方法,用于返回 Symbol 的可读描述,方便开发者理解 Symbol 的用途。


想象你有很多特殊的印章,每个印章代表不同的事情。description 就像是告诉你每个印章代表的是什么,让你能更好地理解这些印章。

const mySymbol = Symbol('这是一个特殊的标记');
console.log(mySymbol.description); // 输出: '这是一个特殊的标记'

函数的 toString() 方法

一个函数对象的方法,用于将函数的源代码转化成字符串。

function sayHello() {
  console.log('Hello!');
}
const functionString = sayHello.toString();
console.log(functionString); // 输出函数的源代码字符串

Object.fromEntries()

一个用于将键值对列表转换成对象的方法。

想象你有一些标签和对应的价值,现在你想把它们整理成一个清单。Object.fromEntries() 就像是帮你把这些标签和价值整理成一个清单。

const entries = [
  ['name', 'Alice'],
  ['age', 30]
];
const person = Object.fromEntries(entries);
console.log(person); // 输出: { name: 'Alice', age: 30 }

消除前后空格

一种字符串处理方法,用于去除字符串开头和结尾的空格。

const messyText = '   这里有很多空格   ';
const cleanText = messyText.trim();
console.log(cleanText); // 输出: '这里有很多空格'

数组 flat()、flatMap()

数组的两个方法,用于将多维数组拉平为一维数组,以及在拉平的同时对数组元素进行操作。Infinity是flat对数组深度展开,flatMap则只能展开一层。


想象你有一些叠在一起的盒子,里面还有更小的盒子。flat() 就像是把所有的盒子都打开,把里面的东西拿出来放在一起。而 flatMap() 就像是在拿出东西的同时,还可以对它们做些处理。

const nestedArray = [1, [2, [3, [4]]]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // 输出: [1, 2, [3, [4]]]
const flattened = nestedArray.flat(Infinity);
console.log(flattenedArray); // 输出: [1, 2, 3, 4]
const doubledArray = nestedArray.flatMap(value => value * 2);
console.log(doubledArray); // 输出: [2, 4, 6, [4]]

JSON 超集

ES2019 之前 JSON 字符串中不支持 \u2028(行分隔符)、\u2029(段落分隔符) 字符,否则 JSON.parse() 会报错,现在给予了支持。

const json = '"\u2028"';
JSON.parse(json);

JSON.stringify() 加强格式转化

防止 JSON.stringify 返回格式错误的 Unicode 字符串

相关文章
|
30天前
|
存储 Java
深入探讨了Java集合框架中的HashSet和TreeSet,解析了两者在元素存储上的无序与有序特性。
【10月更文挑战第16天】本文深入探讨了Java集合框架中的HashSet和TreeSet,解析了两者在元素存储上的无序与有序特性。HashSet基于哈希表实现,添加元素时根据哈希值分布,遍历时顺序不可预测;而TreeSet利用红黑树结构,按自然顺序或自定义顺序存储元素,确保遍历时有序输出。文章还提供了示例代码,帮助读者更好地理解这两种集合类型的使用场景和内部机制。
38 3
|
1月前
|
存储 算法 Java
解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用
在Java中,Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用。
41 3
|
1月前
|
缓存 JavaScript 前端开发
Vue3与Vue2生命周期对比:新特性解析与差异探讨
Vue3与Vue2生命周期对比:新特性解析与差异探讨
91 2
|
13天前
|
编译器 C# 开发者
C# 9.0 新特性解析
C# 9.0 是微软在2020年11月随.NET 5.0发布的重大更新,带来了一系列新特性和改进,如记录类型、初始化器增强、顶级语句、模式匹配增强、目标类型的新表达式、属性模式和空值处理操作符等,旨在提升开发效率和代码可读性。本文将详细介绍这些新特性,并提供代码示例和常见问题解答。
31 7
C# 9.0 新特性解析
|
12天前
|
C# 开发者
C# 10.0 新特性解析
C# 10.0 在性能、可读性和开发效率方面进行了多项增强。本文介绍了文件范围的命名空间、记录结构体、只读结构体、局部函数的递归优化、改进的模式匹配和 lambda 表达式等新特性,并通过代码示例帮助理解这些特性。
26 2
|
19天前
|
安全 程序员 API
|
15天前
|
存储 设计模式 分布式计算
Java中的多线程编程:并发与并行的深度解析####
在当今软件开发领域,多线程编程已成为提升应用性能、响应速度及资源利用率的关键手段之一。本文将深入探讨Java平台上的多线程机制,从基础概念到高级应用,全面解析并发与并行编程的核心理念、实现方式及其在实际项目中的应用策略。不同于常规摘要的简洁概述,本文旨在通过详尽的技术剖析,为读者构建一个系统化的多线程知识框架,辅以生动实例,让抽象概念具体化,复杂问题简单化。 ####
|
15天前
|
PHP 开发者
PHP 7新特性深度解析及其最佳实践
【10月更文挑战第31天】本文将深入探讨PHP 7带来的革新,从性能提升到语法改进,再到错误处理机制的变革。我们将通过实际代码示例,展示如何高效利用这些新特性来编写更加健壮和高效的PHP应用。无论你是PHP新手还是资深开发者,这篇文章都将为你打开一扇窗,让你看到PHP 7的强大之处。
|
15天前
|
设计模式 安全 Java
Java编程中的单例模式深入解析
【10月更文挑战第31天】在编程世界中,设计模式就像是建筑中的蓝图,它们定义了解决常见问题的最佳实践。本文将通过浅显易懂的语言带你深入了解Java中广泛应用的单例模式,并展示如何实现它。
|
15天前
|
安全 编译器 PHP
PHP 8新特性解析与实践应用####
————探索PHP 8的创新功能及其在现代Web开发中的实际应用

推荐镜像

更多