ES6 (ECMAScript 2015)
1. let 和 const
let 允许声明一个块作用域的变量。const 允许声明一个块作用域的常量。
let x = 10;
if (x === 10) {
let x = 20; // 这里的 x 和外面的 x 不是同一个变量
console.log(x); // 20
}
console.log(x); // 10
const y = 5;
// y = 10; // 会抛出错误，因为y是一个常量
2. 模板字符串
允许字符串内嵌表达式，可以用反引号 （``） 来定义。
let name = "world";
console.log(`Hello, ${name}!`); // "Hello, world!"
3.箭头函数
提供了一种更简洁的写法来声明匿名函数。
let add = (a, b) => a + b;
console.log(add(2, 3)); // 5
4.解构赋值
允许用类似数组或对象字面量的语法来分配值到变量中。
// 数组解构
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
// 对象解构
let {firstName, lastName} = {firstName: "John", lastName: "Doe"};
console.log(firstName); // John
console.log(lastName); // Doe
5.Promise
提供了一种更好的异步编程解决方案，比传统的回调函数方式更易于理解和维护。
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done"), 1000);
});
promise.then(
result => console.log(result), // "done"
error => console.log(error)
);
ES7 (ECMAScript 2016)
1.数组的 includes 方法
判断数组是否包含某个值。
let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false
2.指数运算符
简化了幂运算的书写。
console.log(2 ** 3); // 8
ES8 (ECMAScript 2017)
1.async/await
使异步代码看起来更像同步代码。
async function asyncCall() {
console.log('calling');
let result = await new Promise((resolve) => {
setTimeout(() => resolve("resolved"), 1000)
});
console.log(result);
}
asyncCall();
2.Object.values()
该方法返回一个给定对象自身的所有可枚举属性值的数组，不包括原型链上的属性。
const object = { a: 1, b: '2', c: true };
console.log(Object.values(object)); // [1, '2', true]
3.Object.entries()
与Object.values()类似，Object.entries()返回一个给定对象自身的所有可枚举属性[key, value]对的数组。
const object = { a: 1, b: '2', c: true };
console.log(Object.entries(object)); // [['a', 1], ['b', '2'], ['c', true]]
4.String Padding
两个实用的字符串实例方法：padStart()和padEnd()允许以一种便捷的方式给字符串前后填充字词，直到达到目标长度。
padStart()
let str = "5";
console.log(str.padStart(2, "0")); // "05", 填充至长度2，用"0"填充
padEnd()
let str = "5";
console.log(str.padEnd(2, "0")); // "50", 填充至长度2，用"0"填充
5.Object.getOwnPropertyDescriptors();
此方法用于获取一个对象的所有自身属性的描述符。若没有任何自身属性，则返回空对象。
const obj = {
property1: 42
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.property1.writable); // true
console.log(descriptors.property1.value); // 42
6.尾部逗号 (Trailing commas) 在函数参数列表和调用中
ES8 允许在函数参数定义和调用时使用尾部逗号，这有助于版本控制系统中清晰地查看实际更改的参数，避免因格式更改引起的不必要的差异。
function myFunc(
param1,
param2, // 尾部逗号
) {
// 函数体
}
myFunc(
1,
2, // 尾部逗号
);
ES9 (ECMAScript 2018)
1. 异步迭代（for-await-of）
允许使用 for…of 循环迭代异步操作，特别是对异步生成的集合。
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
// 模拟异步操作
await new Promise(resolve => setTimeout(resolve, 100));
yield i++;
}
}
(async () => {
for await (let num of asyncGenerator()) {
console.log(num);
}
})();
2.Promise.prototype.finally()
可以指定一个在promise执行之后无论是fulfilled还是rejected都会执行的回调函数。
new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => resolve("Success"), 1000);
})
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Promise is settled."));
3.Rest/Spread 属性
对象现在也支持 rest 参数和 spread 属性。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
ES10 (ECMAScript 2019)
1.Array.prototype.flat() 和 Array.prototype.flatMap()
可以按照指定的深度递归地将数组扁平化。
let arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // 默认深度为1, 结果: [1, 2, [3, [4]]]
console.log(arr.flat(2)); // 指定深度为2, 结果: [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 指定深度为Infinity, 结果: [1, 2, 3, 4]
2.String.prototype.trimStart() 和 String.prototype.trimEnd()
分别用于去除字符串开头和结尾的空白字符。
let greeting = ' Hello world! ';
console.log(greeting.trimStart()); // "Hello world! "
console.log(greeting.trimEnd()); // " Hello world!"
3.Object.fromEntries()
把键值对列表转换为一个对象
let entries = [['name', 'John'], ['age', 30]];
let obj = Object.fromEntries(entries);
console.log(obj); // { name: "John", age: 30 }
ES11 (ECMAScript 2020)
1.BigInt 类型
支持任意精度的整数。
let bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt + 1n); // 1234567890123456789012345678901234567891n
2.动态导入（import()）
允许你按需动态加载模块
(async () => {
if (condition) {
const module = await import('./module.js');
module.doSomething();
}
})();
3.Promise.allSettled()
返回一个在所有给定的promise已经fulfilled或rejected后的promise，并带有每个promise的结果。
let promises = [
Promise.resolve(33),
new Promise(resolve => setTimeout(() => resolve(66), 0)),
Promise.reject(new Error('an error'))
];
Promise.allSettled(promises)
.then(results => results.forEach((result) => console.log(result.status)));
ES12 (ECMAScript 2021)
1.String.prototype.replaceAll()
允许替换字符串中出现的所有匹配项。
let quote = 'To be or not to be';
console.log(quote.replaceAll('be', 'test')); // "To test or not to test"
2.逻辑赋值运算符
包含逻辑与 (&&=), 逻辑或 (||=) 和逻辑空值 (??=) 赋值运算符。
let x = 0;
let y = 1;
x &&= 2; // x = x && 2
console.log(x); // 0
y ||= 2; // y = y || 2
console.log(y); // 1
let z = null;
z ??= 2; // z = z ?? 2
console.log(z); // 2
相关文章
您阅读本篇文章共花了：
发表评论