ES8 的更少冗余且极简的 JavaScript 代码方式-FunTeaLearn Online Web Tutorials

JavaScript 是前端开发中必不可少的一门语言，它不仅能够让网页更加生动和有趣，还能够为用户提供更好的交互体验。随着技术的不断发展，ES8 的出现为我们带来了更少冗余且极简的 JavaScript 代码方式。本文将详细介绍 ES8 的特点、使用方法以及示例代码，以供学习和参考。

ES8 特点

ES8 中的新特性可以帮助我们更加方便地编写 JavaScript 代码，使得代码更加简洁、易读、可维护。在 ES8 中，我们可以使用以下新特性：

async / await

async / await 是 JS 中进行异步编程的一种新方式，可以大大简化异步编程的代码量。在使用它之前，我们需要先了解 Promise 对象。

比如，我们需要异步加载一张图片的 URL：

const loadImage = url => new Promise((resolve, reject) => {
  const image = new Image();
  image.onload = () => resolve(image);
  image.onerror = () => reject(new Error(`Could not load image at ${url}`));
  image.src = url;
});

然后通过 loadImage 方法加载图片 URL，获取图片的 width 和 height，最后输出图片的信息：

loadImage('https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg')
  .then(img => {
    console.log(`Image ${img.src} loaded`);
    console.log(`Image is ${img.width}x${img.height}`);
  })
  .catch(err => console.error(err));

使用 async / await，上面的代码可以更简单：

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

Object 增强

ES8 提供了一些新的方法来处理对象，能够帮助我们更加方便地编写 JavaScript 代码，例如：

Object.values() / Object.entries()

Object.values() 方法返回一个给定对象自身的所有值的数组，并且与自己的键对应。例如：

const obj = { x: 1, y: 2 };
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [['x', 1],['y', 2]]

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法返回一个给定对象所有自身属性的描述符，例如：

const obj = { x: 1 };
console.log(Object.getOwnPropertyDescriptors(obj)); // { x: { value: 1, writable: true, enumerable: true, configurable: true } }

String 增强

ES8 还提供了一些新的方法来处理字符串，例如字符串补白、判断字符串是否以某个子串开头或结尾、转义字符串等。

padStart() / padEnd()

padStart() 和 padEnd() 方法用于在字符串的开头或结尾填充字符，可以保证字符串的长度。例如：

const str = '10';
console.log(str.padStart(5, '0')); // '00010'
console.log(str.padEnd(5, '0')); // '10000'

startsWith() / endsWith()

startsWith() 和 endsWith() 用于判断一个字符串是否以某个子串开头或结尾。例如：

const str = 'hello world';
console.log(str.startsWith('hello')); // true
console.log(str.endsWith('world')); // true

trimStart() / trimEnd()

trimStart() 和 trimEnd() 方法用于去除字符串开头或结尾的空格，例如：

const str = '   hello world   ';
console.log(str.trimStart()); // 'hello world   '
console.log(str.trimEnd()); // '   hello world'

escape() / unescape()

escape() 和 unescape() 方法用于对字符串进行转义处理。例如：

const str = 'This is a "string"';
console.log(escape(str)); // 'This%20is%20a%20%22string%22'
console.log(unescape('This%20is%20a%20%22string%22')); // 'This is a "string"'

ES8 使用方法

要使用 ES8 的新特性，我们需要使用一个支持 ES8 的 JavaScript 引擎或编译器工具，或者使用 Babel 转换代码。

使用 Node.js

如果你在使用 Node.js，可以在控制台中输入以下命令来查看 Node.js 是否支持 ES8：

node --version

如果 Node.js 版本不低于 7.6.0，那么它就支持了 async / await 方法。如果版本不够，你可以使用 nvm 工具来安装新的版本。

使用 Babel

Babel 是一种 JavaScript 编译器，可以将 ES6 / ES7 / ES8 代码转换为 ES5 代码，这样我们就可以在大多数浏览器中运行它。具体使用可以参考 Babel 的官方网站。

示例代码

下面是一些使用 ES8 的示例代码：

async / await 示例代码

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

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

Object 增强示例代码

const obj = { x: 1, y: 2 };
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [['x', 1],['y', 2]]

const obj2 = { x: 1 };
console.log(Object.getOwnPropertyDescriptors(obj2)); // { x: { value: 1, writable: true, enumerable: true, configurable: true } }

String 增强示例代码

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

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

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

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

总结

ES8 的出现为我们带来了更少冗余且极简的 JavaScript 代码方式，使用它能够帮我们更加方便地编写 JavaScript 代码，使得代码更加简洁、易读、可维护。通过本文的介绍和示例代码，相信读者已经了解了 ES8 的特点、使用方法和示例代码，并能够愉快地去实践它们了。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a1a64648841e9894ddf24f

ES8 的更少冗余且极简的 JavaScript 代码方式