JavaScript 是一种高度动态化的脚本语言，由于它在浏览器中得到广泛应用，因此成为了 Web 前端技术开发的重要组成部分。在这篇文章中，我们将聚焦于 JavaScript 的新特性，从 ES5 到 ES9 的全貌，为前端开发者提供一些实现思路和深度分析。
ES5
ES5 的新特性可以分为以下几个方面：
严格模式运行
ES5 引入了“严格模式（strict mode）”，这种模式在运行时可以帮助 JavaScript 引擎抛出一些曾经被忽视的错误信息。这些错误信息可能会影响到代码的执行结果，但通常在非严格模式下 JavaScript 引擎会保持沉默。
严格模式可以添加到函数名称之前，例如：
"use strict";
function someFunction() {
// 严格模式函数体
}另外，严格模式还可以被设置在整个 JavaScript 文件的顶部，例如：
"use strict"; // some code
JSON 对象全局支持
ES5 引入了 JSON 全局支持。在浏览器中，你可以使用JSON.parse()方法来转换 JSON 格式字符串为 JavaScript 对象。
var jsonString = '{"name": "John Smith", "age": 32}';
var person = JSON.parse(jsonString);
console.log(person.name); // 输出 "John Smith"类似地，你也可以使用JSON.stringify()来把 JavaScript 对象转换为 JSON 格式字符串：
var person = { "name": "John Smith", "age": 32 };
var jsonString = JSON.stringify(person);
console.log(jsonString); // 输出 '{"name":"John Smith","age":32}'Object.create() 方法
ES5 引入了 Object.create() 方法，该方法可以帮助你创建一个新的对象，并指定它的原型对象。
var parent = {
name: "John Smith",
age: 32
};
var child = Object.create(parent);
console.log(child.name); // 输出 "John Smith"
console.log(child.age); // 输出 32上述例子中，我们创建了一个 parent 对象，然后使用Object.create()方法基于它创建了一个新的 child 对象。
在 child 对象中，name和age属性被继承自 parent 对象。
新增 Array.prototype 方法
ES5 向 Array.prototype 添加了如下方法：
- forEach()
- map()
- filter()
- reduce()
- reduceRight()
- every()
- some()
- indexOf()
例如：
var arr = [1, 2, 3, 4];
arr.forEach(function(num) {
console.log(num);
});输出如下：
1 2 3 4
在这个例子中，我们使用 forEach() 方法来循环遍历数组中的每一个元素。
ES6
ES6 添加了许多新的特性，并且这些特性让 JavaScript 前端开发更加简单。
let 和 const
ES6 引入了新的声明变量方式：let和const。
在 ES5 中，只能通过关键字var来创建变量，这种情况下，变量会被提升到函数的顶部：
function someFunction() {
console.log(name); // 输出 undefined
var name = "John Smith";
}在 ES6 中，let或const声明的变量只存在于它们所声明的块级作用域内。
function someFunction() {
console.log(name); // 抛出一个 ReferenceError 异常
let name = "John Smith";
}箭头函数
ES6 提供了一种简化函数定义的方式：箭头函数（Arrow functions）。
var square = (num) => {
return num * num;
};上述例子中，箭头函数接受一个参数num，并返回num的平方。
模板字符串
ES6 引入了模板字符串，这种字符串可以包含表达式，并且可以通过一个变量来调用它。
let firstName = "John";
let lastName = "Smith";
console.log(`My name is ${firstName} ${lastName}`);上述例子中，我们使用模板字符串来输出“我的名字是 John Smith”。
类与继承
ES6 添加了一些类和继承相关的新特性。在 ES6 中，我们可以使用class关键字来声明一个类。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
--------- -
-----------------------
-
-上述例子中，我们使用 class 创建了一个 Person 类，这个类有两个属性 name 和 age，并且有一个方法 logName。
集合类型
ES6 扩展了数据类型的种类。在 ES6 中，我们可以使用Map和Set来存储不重复的值和键值对。
例如：
-- -------------------- ---- ------- --- ----- - --- ------ ------------- ------------- ------------- ------------- ------------- ------------------------ -- -- - ------------------- -- -- ----- ---- ---- ----
在这个例子中，我们创建了一个新的 Set 对象。在这个 Set 对象中，只有不同的数字才会被存储。
Promise
在 ES6 中，我们可以使用 Promise 对象来解决回调函数带来的问题。在 Promise 中，我们可以将异步操作的结果交给 Promise，然后等待 Promise 执行结果。
-- -------------------- ---- -------
-------- ------------- -
------ --- ------------------------- ------- -
--------------------- -
-----------------
-- ------
---
-
----------------------------------- -
--------------------
---在这个例子中，我们定义了一个 doSomething 函数，这个函数返回一个 Promise。在 Promise 的回调函数中，我们模拟一个异步操作，然后返回一个 "Done" 字符串。这个 Promise 对象的结果可以通过 .then() 方法来访问。
ES7
ES7 在 ES6 的基础上新增了一些新特性。
指数运算符
ES7 引入了指数运算符 **。
let num = 2; console.log(num ** 2); // 输出 4 console.log(num ** 3); // 输出 8
在这个例子中，我们使用指数运算符**来计算num的平方和立方。
Array.prototype.includes 方法
ES7 向 Array.prototype 添加了一个新方法：includes()。
let arr = [1, 2, 3, 4, 5]; console.log(arr.includes(2)); // 输出 true console.log(arr.includes(6)); // 输出 false
在这个例子中，我们使用Array.prototype.includes()方法来查找数组中是否包含某个元素。
ES8
ES8 继续对 JavaScript 进行扩展。
async/await
ES8 添加了一个新特性：async和await。这两个关键字共同扩展了 Promise 对象。
-- -------------------- ---- -------
----- -------- ------------------- -
--- ------ - ----- --- ------------------------- ------- -
--------------------- -
-----------------
-- ------
---
--------------------
-
--------------------上述例子中，我们在函数名称前加了一个async关键字。这个关键字告诉 JavaScript 引擎这是一个异步函数。在函数体中，我们使用了await关键字来等待 Promise 的执行结果。
Object.values/Object.entries 方法
ES8 添加了新的 Object 方法：Object.values()和Object.entries()。
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // 输出 [1, 2, 3]
console.log(Object.entries(obj)); // 输出 [["a", 1], ["b", 2], ["c", 3]]在这个例子中，我们使用Object.values()和Object.entries()方法来分别获取一个对象的属性值和键值对。
ES9
ES9 提供的新特性相较 ES8 稍微简单了些，不过它们仍然非常实用。
扩展运算符在对象字面量中使用
ES9 引入了一种新的语法，允许在对象字面量中使用扩展运算符（...）。
let first = { a: 1, b: 2 };
let second = { c: 3, d: 4 };
let result = { ...first, ...second };
console.log(result); // 输出 {a: 1, b: 2, c: 3, d: 4}在这个例子中，我们使用扩展运算符在第一个对象和第二个对象之间进行拷贝和合并操作。
Promise.finally 方法
ES9 引入了 Promise 新的实例方法 Promise.finally()。在 Promise 执行完毕之后，它将始终被执行，无论 Promise 被 resolved 还是被 rejected。
-- -------------------- ---- -------
-------- ------------------- -
------ --- ------------------------- ------- -
--------------------- -
-----------------
-- ------
---
-
-------------------
---------------------- -
-------------------
--
---------------------- -
------------------
--
------------------- -
-------------------- --------
---在这个例子中，我们使用 Promise.finally() 方法在函数执行结束时输出一个信息。
总结
这篇文章中，我们介绍了 JavaScript 的新特性，包括从 ES5 到 ES9 的内容。这些特性帮助我们在 JavaScript 开发中更加方便和高效，但也要注意其兼容性和使用时的某些限制。通过学习这些新的特性，你可以更好地理解 JavaScript 的工作原理，同时也可以提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64916c7f48841e9894f6f6d8