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.values
和 Object.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 字符串