从 ES6 到 ES11，一起探究新特性-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript（简称 ES）是一种通用脚本语言标准，它是由 Ecma 国际组织维护和发布的。JavaScript 就是这个标准的一种实现。ES6 是 ECMAScript 的第六个版本，ES11 是第十一个版本，他们都引入了一些新特性，让开发者们在编写 JavaScript 代码时更加方便、更加高效。这篇文章将会介绍这些新特性，以及它们的实际运用。

ES6

块级作用域变量（let/const）

ES6 引入了块级作用域变量 let 和 const，可以在块级作用域（大括号包围的区域）内声明变量，并且只在该块级作用域内有效。

if (true) {
    let a = 1;
    const b = 2;
}

console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: b is not defined

箭头函数

箭头函数是一种更简洁的函数声明方式，可以让函数更加精简，同时也更加易读。

let add = (a, b) => a + b;

console.log(add(1, 2)); // 3

类（class）

ES6 提供了用于创建对象的 class 关键字，class 可以更方便地定义一个对象，并且它也支持继承。

-- -------------------- ---- -------
----- ------ -
    ----------------- -
        --------- - -----
    -

    --------- -
        -----------------------
    -
-

----- --- ------- ------ -
    ----------------- ------ -
        ------------
        ---------- - ------
    -
-

----- ----- - --- --------- ------
---------------- -- ----
------------------------- -- ----

模板字符串

模板字符串是一种新的字符串表示方式，支持使用 ${} 语法来嵌入变量和表达式。

let name = 'Tom';
let greet = `Hello, ${name}!`;

console.log(greet); // 'Hello, Tom!'

解构赋值

解构赋值让我们可以方便地从对象或数组中提取值并赋值给变量。

-- -------------------- ---- -------
--- --- - --- -- -- ---
--- --- -- - ----

--------------- -- -
--------------- -- -

--- --- - --- -- ---
--- --- -- -- - ----

--------------- -- -
--------------- -- -
--------------- -- -

ES7

指数运算符

ES7 引入了指数运算符 **，用于简化求幂运算。

console.log(2 ** 3); // 8（2 的 3 次方）

Array.prototype.includes()

ES7 引入了一个数组方法 includes()，用于检查数组是否包含某个元素。

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

ES8

异步函数

ES8 引入了异步函数 async/await，更好的解决了回调地狱的问题，让异步处理更为简单。

async function getData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

getData().then(data => console.log(data));

Object.values()/Object.entries()

ES8 提供两种方便的方法，可以让我们更方便地操作对象。

Object.values() 返回一个包含对象所有属性值的数组。

let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);

console.log(values); // [1, 2, 3]

Object.entries() 返回一个包含对象所有属性键值对的数组，每个元素是一个包含键值对的数组。

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);

console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

ES9

异步迭代

ES9 引入了异步迭代器，让我们可以在异步操作中遍历数据。

-- -------------------- ---- -------
----- -------- --------- -
    --- -------- - ----- --------------------------------------
    --- ---- - ----- ----------------
    ------ -----
-

----- -------- ------------ -
    --- ---- - ----- ----------

    --- ----- ---- ---- -- ----- -
        ------------------
    -
-

Promise.finally()

ES9 引入了 Promise 对象方法 finally()，无论 Promise 对象状态如何都会执行。

-- -------------------- ---- -------
--- ------- - --- ----------------- ------- -- -
    ------------- -- -
        ----------------
    -- ------
---

-------
    ------------ -- --------------------
    ------------ -- -------------------
    ----------- -- ------------------------

ES10

扩展操作符（...）解决 new Array() 引起的问题

在旧版 JavaScript 中，使用 new Array(n) 创建一个长度为 n 的数组时，可能会产生一些问题。

let arr = new Array(3);
console.log(arr); // [ , , ]
console.log(arr.length); // 3
console.log(arr[0]); // undefined

ES10 引入了扩展操作符 ... 可以快速地创建指定长度的数组，并且数组中所有值默认为 undefined。

let arr = [...new Array(3)];
console.log(arr); // [undefined, undefined, undefined]
console.log(arr.length); // 3
console.log(arr[0]); // undefined

BigInt

ES10 引入了一种新的基本数据类型 BigInt，用于表示超出 JS 安全整数范围的整数。

let num = BigInt(Number.MAX_SAFE_INTEGER);
let sum = num + BigInt(1);

console.log(sum); // 9007199254740992n

ES11

可选链式调用

ES11 引入了可选链式调用操作符 ?.，可以在访问对象属性或方法时，自动判断属性或方法是否存在，解决了过多的判空操作。

-- -------------------- ---- -------
--- --- - -
    ----- ------
    ---- ---
    --------- -
        ------ ------ ------------- ---- -------------
    -
--

--- ---- - -----------------
------------------ -- ------ ---- ---- ---

--- ---- - -----
--- ---- - -----------
------------------ -- ---------

空值合并操作符

ES11 引入了空值合并操作符 ??，可以用来判断一个值是否为 null 或 undefined，如果是 null 或 undefined，则使用给定的默认值，否则返回该值本身。

let name1 = null;
let name2 = 'Tom';

console.log(name1 ?? 'Default'); // 'Default'
console.log(name2 ?? 'Default'); // 'Tom'

结论

本文介绍了 ES6 到 ES11 所带来的一些新特性和语法，它们的引入让 JavaScript 变得更加便捷和高效。这些新特性并不是必须要使用的，但了解它们可以让我们更为深入地学习 JavaScript，同时也能够提高我们在实际开发中的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6714798aad1e889fe213f953