首页

Appearance

ES6 与语法糖 ​

ES6+ ​

ECMAScript 6（也称为 ES6 和 ECMAScript 2015）以及之后的版本（ES7/ES2016, ES8/ES2017 等）引入了许多新的语言特性，以改进 JavaScript 的编程体验和能力。以下是一些主要的新特性：

ES6/ECMAScript 2015 ​

  1. Let 和 Const: 引入了let和const关键字，用于声明变量，提供了块级作用域。
  2. 箭头函数: 提供了更简洁的函数写法，使用=>符号，并且不绑定自己的this。
  3. 类: 引入了基于类的面向对象编程。
  4. 模板字符串: 使用反引号（`）来创建包含表达式的字符串。
  5. 解构赋值: 允许从数组或对象中提取数据，并赋值给新的变量。
  6. 默认参数: 函数参数可以有默认值。
  7. 扩展运算符: 使用...语法来展开数组或对象。
  8. Promises: 提供了用于处理异步操作的 Promise 对象。
  9. 模块导入/导出: 使用import和export语句来导入和导出模块中的功能。
  10. Map 和 Set: 引入了 Map 和 Set 数据结构。
  11. 迭代器和 for...of 循环: 允许在集合对象上创建自定义迭代，并使用for...of循环进行迭代。
  12. Symbol: 引入了新的原始数据类型 Symbol，用于创建唯一的标识符。

ES7/ECMAScript 2016 ​

  1. Array.prototype.includes: 新增数组方法includes，用于检查数组是否包含某个元素。
  2. 指数运算符: 引入了指数运算符**，例如2 ** 3等于 8。

ES8/ECMAScript 2017 ​

  1. Async/Await: 引入了async函数和await运算符，用于简化异步操作的写法。
  2. Object.values/Object.entries: 新增方法用于返回对象的值或键值对数组。
  3. 字符串填充: String.prototype.padStart和String.prototype.padEnd用于字符串填充。
  4. Object.getOwnPropertyDescriptors: 用于获取对象所有自有属性的描述符。

ES9/ECMAScript 2018 ​

  1. 异步迭代: 引入了for-await-of循环，用于遍历异步生成的数据。
  2. Promise.finally: 新增finally方法，用于指定不管 Promise 对象最后状态如何都会执行的操作。
  3. Rest/Spread 属性: 对象现在也支持 rest 参数和扩展运算符。
  4. 正则表达式改进: 包括命名捕获组、后行断言、dotAll 模式等。

ES10/ECMAScript 2019 ​

  1. Array 的 flat 和 flatMap 方法: 用于创建一个新的数组，其中的子数组元素被递归地连接或处理。
  2. Object.fromEntries: 与Object.entries相反，它允许将键值对列表转换成一个对象。
  3. String 的 trimStart 和 trimEnd 方法: 类似于trim，但只去除字符串开头或结尾的空白。
  4. 可选的 Catch Binding: catch子句不再强制要求必须有一个错误绑定。

ES11/ECMAScript 2020 ​

  1. BigInt: 用于表示大于2^53 - 1的整数。
  2. Dynamic import(): 允许动态地加载模块。
  3. nullish coalescing operator (??): 用于处理 null 或 undefined 的默认值。
  4. Optional Chaining (?.): 允许读取位于连接对象链深处的属性，而不必显式验证链中的每个引用是否有效。
  5. Promise.allSettled: 返回一个 promise，该 promise 在所有给定的 promise 已被解决或拒绝后解决。
  6. globalThis: 提供了一个标准的方式来获取不同环境下的全局 this 对象。

ES12/ECMAScript 2021 ​

  1. String.prototype.replaceAll: 用于替换字符串中所有匹配项。
  2. Promise.any: 接受一组 Promise 实例，只要其中的一个实例 fulfilled，就返回那个已经被 fulfilled 的实例。
  3. WeakRefs 和 FinalizationRegistry: 提供了创建弱引用对象和注册清理回调的能力。
  4. 逻辑赋值运算符: 引入了逻辑与(&&=)、逻辑或(||=)、逻辑空值(??=)赋值运算符。

ES13/ECMAScript 2022 ​

  1. 类字段: 类的实例字段和静态字段。
  2. 私有方法和访问器: 类的私有实例方法、访问器和静态方法。
  3. 顶层 await: 允许在模块的顶层使用await关键字。
  4. 错误原因: Error对象的构造函数可以接受一个options对象，其中包含一个cause属性。

随着 JavaScript 的发展，每年都会有新的特性被提案并添加到 ECMAScript 标准中。开发者应该关注最新的规范和浏览器实现状态，以便有效地利用这些新特性。

语法糖 ​

在编程语言中，"语法糖"（Syntactic Sugar）是指那些使代码更易读、更易写，但并不提供新功能的语法。JavaScript 中有许多这样的语法糖，它们使得代码更加简洁和表达性强。以下是一些 JavaScript 中的语法糖：

箭头函数 ​

javascript
// 传统函数表达式
const add = function (a, b) {
  return a + b;
};

// 使用箭头函数的语法糖
const add = (a, b) => a + b;

模板字符串 ​

javascript
// 传统的字符串拼接
var name = "Alice";
var greeting = "Hello, " + name + "!";

// 使用模板字符串的语法糖
const greeting = `Hello, ${name}!`;

对象属性简写 ​

javascript
// 传统的对象属性定义
const x = 1,
  y = 2;
const obj = { x: x, y: y };

// 使用属性简写的语法糖
const obj = { x, y };

方法简写 ​

javascript
// 传统的对象方法定义
const obj = {
  sayHello: function () {
    console.log("Hello!");
  },
};

// 使用方法简写的语法糖
const obj = {
  sayHello() {
    console.log("Hello!");
  },
};

解构赋值 ​

javascript
// 不使用解构赋值
const person = { name: "Alice", age: 25 };
const name = person.name;
const age = person.age;

// 使用解构赋值的语法糖
const { name, age } = person;

默认参数 ​

javascript
// 不使用默认参数
function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name);
}

// 使用默认参数的语法糖
function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

扩展运算符 ​

javascript
// 不使用扩展运算符
var parts = ["shoulders", "knees"];
var lyrics = ["head", parts[0], parts[1], "and", "toes"];

// 使用扩展运算符的语法糖
const parts = ["shoulders", "knees"];
const lyrics = ["head", ...parts, "and", "toes"];

可选链 ​

javascript
// 不使用可选链
const x = foo && foo.bar && foo.bar.baz;

// 使用可选链的语法糖
const x = foo?.bar?.baz;

空值合并运算符 ​

javascript
// 不使用空值合并运算符
const baz = foo !== null && foo !== undefined ? foo : bar;

// 使用空值合并运算符的语法糖
const baz = foo ?? bar;

异步函数 ​

javascript
// 不使用async/await
function fetchUserData() {
  return fetch("/users/1")
    .then((response) => response.json())
    .then((data) => console.log(data));
}

// 使用async/await的语法糖
async function fetchUserData() {
  const response = await fetch("/users/1");
  const data = await response.json();
  console.log(data);
}

这些语法糖不仅使代码更加简洁，而且往往使逻辑更加清晰和易于理解。然而，值得注意的是，过度使用或者在不适当的场合使用语法糖可能会使代码难以理解，特别是对于那些不熟悉这些特性的开发者。因此，应当在保持代码清晰和可维护的前提下，谨慎使用语法糖。

hancenter808@outlook.com

Copyright © 2024 Hanwei