目录
Object.values 和 Object.entries
String.trimStart() 和 String.trimEnd()
ES6(2015)
let 和 count
let 和 const 声明变量与传统的 var 不同,let 和 const 声明的变量具有块级作用域,不会变量提升,而且不能被重复声明。const 声明的变量是常量,不能被重新赋值。
let name = '小豪';
const arr = [];
箭头函数
一种更简洁的函数定义方法,使用箭头符号来代替 function 关键字,可以省略大括号和 return 关键字,箭头函数会继承父作用域的 this 值。
const func = (a, b) => a + b;
func(1, 2); // 3
模板字符串
模板字符串是一种新的字符串定义方法,使用反引号(`)来表示字符串,可以在字符串中插入变量或表达式,使用 ${} 包裹。
// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3
默认参数值
ES6 允许在函数的参数列表中设置默认参数值,当调用函数时不传递参数时,会自动使用默认值。
function foo(age = 25,){ // ...}
数组解构赋值
一种快速取出数组元素并赋值给变量的方法,可以极大地简化代码。
let a = 1, b= 2;
[a, b] = [b, a]; // a 2 b 1
对象解构赋值
与数组解构赋值类似,可以快速取出对象属性值并赋值给变量。
let {a,b} = {a:10,b:20}
console.log(a,b) // 10,20
类和继承
ES6 提供了 class 关键字来定义类和继承关系,使得 JavaScript 更加面向对象。
class Man {
constructor(name) {
this.name = '小豪';
}
console() {
console.log(this.name);
}
}
const man = new Man('小豪');
man.console(); // 小豪
Promise 对象
Promise 对象用来处理异步操作,可以更方便地处理异步代码,避免回调地狱。
Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ,再打印 2
模块化
ES6 引入了模块化的概念,使用 import 和 export 关键字来导入和导出模块,使得代码更加模块化和易于管理。
// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3
扩展运算符
let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
ES7(2016)
Array.prototype.includes 方法
ES7 引入了 Array.prototype.includes 方法,用于判断一个数组是否包含某个特定的值,返回布尔值。这个方法取代了数组的 indexOf 方法,使代码更加清晰和易读。
// 使用 includes 方法判断数组是否包含某个值
const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(10)); // false
指数运算符
ES7 引入了指数运算符(**)来进行幂运算,语法更加简洁,避免了使用 Math.pow 方法。
// 使用指数运算符进行幂运算
const result = 2 ** 3; // 2的3次方,结果为8
console.log(result);
函数参数的尾逗号
ES7 允许函数定义的最后一个参数使用逗号进行结尾,这样可以方便在修改或添加参数时避免出错,提高代码的可维护性。
// 函数定义中使用尾逗号
function sum(a, b,) {
return a + b;
}
console.log(sum(2, 3)); // 5
Object.values 和 Object.entries
ES7 引入了 Object.values 和 Object.entries 方法,分别用于获取对象的属性值数组和键值对数组,方便遍历对象的属性。
// 使用 Object.values 获取对象的属性值数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
// 使用 Object.entries 获取对象的键值对数组
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]
async/await
虽然 async/await 是 ES8 的特性,但它在 ES7 中就已经被加入了标准。async/await 是一种更直观、更简洁的异步编程方式,让异步代码看起来像同步代码一样易于理解。
// 使用 async/await 处理异步操作
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function asyncFunction() {
console.log('Start');
await delay(1000);
console.log('After 1 second');
}
asyncFunction();
ES8(2017)
字符串填充方法(String padding)
ES8 新增了字符串的 padStart 和 padEnd 方法,用于在字符串的开头或结尾添加指定数量的字符,方便对齐文本格式。
// 字符串填充方法
let str = 'hello';
console.log(str.padStart(10, 'a')); // "aaaaahello"
console.log(str.padEnd(10, 'b')); // "hellobbbbb"
Object.entries()方法
虽然 Object.values 和 Object.entries 方法在 ES7 中已经被引入,但在 ES8 中对其进行了稳定化处理,使其能够在各种 JavaScript 环境中被广泛使用。
// Object.entries()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]
Object.values()方法
// Object.values()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
Async 函数
ES8 对 async 函数进行了一些改进,允许 async 函数直接返回值,而不必通过 Promise.resolve 包裹。
// Async 函数
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => {
console.log(data);
});
SharedArrayBuffer和Atomics对象(用于多线程编程)
ES8 增加了对 SharedArrayBuffer 和 Atomics 对象的支持,用于在多线程编程中共享内存并执行原子操作。
SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,
Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。
// SharedArrayBuffer和Atomics对象
const buffer = new SharedArrayBuffer(16);
const view = new Int32Array(buffer);
Atomics.store(view, 0, 42);
console.log(Atomics.load(view, 0)); // 42
ES9(2018)
异步迭代
await可以和for...of循环一起使用,以串行的方式运行异步操作
async function process(array) {
for await (let i of array) {
// doSomething(i);
}
}
Promise.finally()
Promise对象现在具有一个finally()方法,无论Promise实例是成功还是失败,都会在最后执行该方法。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Success!');
}, 1000);
});
promise.finally(() => {
console.log('Promise complete');
});
Rest/Spread 属性
ES9允许在对象字面量中使用Rest和Spread属性。
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }
正则表达式命名捕获组
const
reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
match = reDate.exec('2018-04-30'),
year = match.groups.year, // 2018
month = match.groups.month, // 04
day = match.groups.day; // 30
const
reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
d = '2018-04-30',
usDate = d.replace(reDate, '$<month>-$<day>-$<year>');
ES 10 (2019)
Array.flat()
Array.flat()方法用于将多维数组(嵌套数组)扁平化为一维数组。
const nestedArray = [1, [2, [3, 4], 5]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, [3, 4], 5]
// 可以通过传入参数指定扁平化的层级
const deeplyNestedArray = [1, [2, [3, [4, 5]]]];
const deeplyFlattenedArray = deeplyNestedArray.flat(2);
console.log(deeplyFlattenedArray); // [1, 2, 3, 4, 5]
String.trimStart() 和 String.trimEnd()
String.trimStart()和String.trimEnd()方法,用于删除字符串开头和结尾的空格。
const text = ' Hello, World! ';
console.log(text.trimStart()); // 'Hello, World! '
console.log(text.trimEnd()); // ' Hello, World!'
Object.fromEntries()
Object.fromEntries()方法用于将一个包含键值对的数组转换为一个对象
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }
Optional Catch Binding
ES10允许在try/catch块中省略catch绑定参数,以避免未使用的参数警告
try {
// Some code that may throw an error
} catch {
// Handle the error without specifying the error parameter
}
Array.flatMap()
对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]