ES8

“

JavaScript ES8（也称为ES2017）引入了一些新的语言特性。以下是一些ES8的主要新特性。

异步函数（Async/Await）：

引入了async和await关键字，简化异步操作的编写方式，使代码更易读和理解。async函数会返回一个Promise对象，而在async函数内部可以使用await关键字来暂停执行，并等待Promise对象的解析。

async function asyncFunction() {
  try {
    const result = await asyncOperation();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

这对于处理异步操作提供了更简洁的语法。async 关键字用于标记一个函数，使其返回一个 Promise 对象。在 async 函数内部，我们可以使用 await 表达式暂停函数的执行，直到一个 Promise 被解析或拒绝。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
  console.log('Start');

  await delay(2000);
  console.log('Data fetched');

  await delay(1000);
  console.log('Processing complete');
}

fetchData(); // 输出: Start -> (等待2秒) -> Data fetched -> (等待1秒) -> Processing complete

Object.getOwnPropertyDescriptors()方法：

返回指定对象所有自身属性的描述符，包括可枚举和不可枚举属性。

const obj = {
  prop1: 'value1',
  prop2: 'value2'
};

const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors.prop1);
// { value: 'value1', writable: true, enumerable: true, configurable: true }

console.log(descriptors.prop2);
// { value: 'value2', writable: true, enumerable: true, configurable: true }

这个方法返回一个对象的所有属性的描述符（包括可枚举和不可枚举属性）。它可以用来获取一组属性的完整描述，包括属性的值、可写性、可配置性等等。

const obj = {
  prop1: 42,
  prop2: 'hello',
};

const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop1.value); // 输出: 42
console.log(descriptors.prop2.writable); // 输出: true

字符串填充方法（String padding）：

引入了字符串填充方法，允许在字符串前面或后面填充指定的字符，以达到指定的长度。

const str = 'Hello';

console.log(str.padStart(10, '-'));
// "-----Hello"

console.log(str.padEnd(10, '*'));
// "Hello*****"

字符串填充方法是JavaScript ES8中引入的一项新特性。它允许我们在字符串的开头或结尾填充指定的字符，以达到指定的长度。这对于格式化输出和对齐文本是非常有用的。

在你提供的示例代码中，我们使用了两个字符串填充方法：padStart()和padEnd()。让我解释一下它们的作用：

padStart(targetLength, padString)方法会在原始字符串的前面添加填充字符，直到字符串达到指定的长度targetLength。如果填充字符padString未提供，默认为空格。如果原始字符串已经比目标长度长，则返回原始字符串本身。在你的示例中，str.padStart(10, ‘-‘)将返回”—–Hello”，其中填充了5个连字符使得字符串总长度为10。

padEnd(targetLength, padString)方法与padStart()类似，不同之处在于它会在原始字符串的后面添加填充字符，直到字符串达到指定的长度targetLength。如果填充字符padString未提供，默认为空格。同样地，如果原始字符串已经比目标长度长，则返回原始字符串本身。在你的示例中，str.padEnd(10, ‘*’)将返回”Hello*****”，其中填充了5个星号使得字符串总长度为10。

这些字符串填充方法在处理字符串对齐、生成固定长度的文本等场景下非常有用。它们提供了一种简单、直观的方式来操纵字符串，使得代码编写更加方便和易读。

请注意，上述方法是ES8中引入的新特性，如果在较旧的JavaScript版本中使用，可能会导致兼容性问题。

共享内存与原子操作（Shared Memory and Atomics）：

引入了SharedArrayBuffer和Atomics对象，用于在多个Agent（如Web Worker）之间共享内存，并提供了原子操作来确保共享内存的安全性，避免竞争条件。

// 创建一个共享内存
const buffer = new SharedArrayBuffer(8);

// 创建一个32位有符号整数视图
const view = new Int32Array(buffer);

// 在不同的Agent中读写共享内存
view[0] = 42;
console.log(view[0]); // 输出 42

字符串填充方法 (padStart() 和 padEnd()):

这两个方法用于在字符串的开头或结尾填充指定的字符，以达到指定的长度。

const str = 'Hello';
const paddedStr = str.padEnd(8, ' World');
console.log(paddedStr); // 输出: 'Hello World'

总结

这些是JavaScript ES8的一些主要特性。ES8还引入了一些其他小的语法和API改进，可以提供更好的开发体验和效率。

ES9

“

以下是JavaScript ES9引入的一些新特性。每个特性都有助于简化开发过程、提高代码效率，并提供更强大的功能。 JavaScript ES9（也称为ES2018）

Object spread syntax（对象扩展语法）

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, ...obj1 };
console.log(obj2); // { c: 3, a: 1, b: 2 }

可以使用…语法将一个对象的属性扩展到另一个对象中，并创建一个新对象。

Promise.prototype.finally()

fetch('https://api.example.com/data')
  .then(response => response.json())
  .finally(() => {
    console.log('Fetch request completed.');
  });

finally()方法在Promise被解决或拒绝后，无论如何都会执行。它允许你指定在Promise结束时必须执行的清理逻辑。

Asynchronous Iteration（异步迭代）：

async function fetchData() {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
  for await (const response of fetchAsync(urls)) {
    console.log(response);
  }
}

async function* fetchAsync(urls) {
  for (const url of urls) {
    yield await fetch(url).then(response => response.json());
  }
}

异步迭代允许在处理异步数据源时使用for-await-of循环，可以便捷地处理一系列异步操作。

Rest/Spread Properties（剩余和扩展属性）：

const { x, y, ...rest } = { x: 1, y: 2, z: 3, a: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(rest); // { z: 3, a: 4 }

剩余和扩展属性让你能够从对象中提取特定属性，并将其余的属性放入一个单独的对象中。

RegExp named capture groups（正则表达式命名捕获组）

const regex = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const match = regex.exec('2023-06-25');
console.log(match.groups.year); // 2023
console.log(match.groups.month); // 06
console.log(match.groups.day); // 25

正则表达式现在支持命名捕获组，可以使用语法为捕获组命名，并通过.groups属性访问捕获的结果。

Promise.prototype.catch()参数可以省略

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(() => {
    console.log('An error occurred.');
  });

在ES9中，可以在catch()方法中省略错误参数，如果不需要访问错误对象，可以直接定义一个空的catch块。

ES10

“

JavaScript ES10，也被称为ES2019，引入了一些新的特性和语言改进

Array.prototype.flat()和Array.prototype.flatMap()

这两个方法可以简化多维数组的处理。flat()方法可将多维数组展平为一维数组，而flatMap()方法在展平数组的同时还可以对每个元素执行映射操作。

const arr = [1, 2, [3, 4, [5, 6]]];

// 使用 flat() 方法展平数组
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, [5, 6]]

// 使用 flatMap() 方法展平数组并映射操作
const mappedAndFlattened = arr.flatMap(num => num * 2);
console.log(mappedAndFlattened); // [2, 4, 6, 8, 10, 12]

Object.fromEntries()

这个静态方法允许将键值对列表转换为对象。它接收一个键值对的可迭代对象（如数组）作为参数，并返回一个新的对象。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

// 将键值对列表转换为对象
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }

String.prototype.trimStart()和String.prototype.trimEnd()

这两个方法用于去除字符串开头或结尾的空白字符。它们分别是trim()方法的单独扩展。

格式化数字

引入了新的Number.prototype.toFixed()方法，它允许指定小数点后的位数并将数字四舍五入为指定精度；而Intl.NumberFormat对象提供了更灵活和本地化的数字格式化。

动态导入

通过import()函数，可以在运行时动态地导入模块。这使得按需加载模块变得更加容易。

// 动态导入模块
import('./module.js')
  .then(module => {
    // 使用导入的模块
    module.doSomething();
  })
  .catch(error => {
    console.error('模块加载失败：', error);
  });

可选的catch绑定

现在可以在try-catch语句中省略catch块中的绑定，只使用catch {}，而不会将错误绑定到变量。

try {
  // 执行可能抛出异常的代码
  throw new Error('发生了错误');
} catch {
  // 省略 catch 块中的绑定
  console.log('捕获到错误');
}

BigInt

引入了一种新的基本数据类型 BigInt，它可以表示任意精度的整数。使用后缀n来声明一个BigInt。

const bigNumber = BigInt("123456789012345678901234567890");

console.log(bigNumber); // 123456789012345678901234567890n
console.log(typeof bigNumber); // "bigint"

const added = bigNumber + 1n;
console.log(added); // 123456789012345678901234567891n

globalThis

引入了一个名为globalThis的全局属性，它始终指向全局对象，无论在什么环境下。

// 在浏览器控制台和 Node.js 中使用 globalThis
console.log(globalThis);

// 在浏览器全局作用域中声明变量
globalThis.myVariable = "Hello World";
console.log(myVariable); // "Hello World"

这些是ES10中的一些主要特性。它们提供了更方便、更强大的语言功能，使JavaScript开发人员能够更高效地编写代码。