后端开发教程 - Java、Spring Boot 实战 - msg200.com
ES6 与 ES7 Javascript 生命周期的变化 [ES6,ES7,ES8]
首先，我想更深入地了解一下 Javascript 的实际构建现状，然后我们可以深入研究某些时候必须应用的关键变化，以便保持项目的可持续性或使代码片段更易读/更容易理解。
Javascript 到底是什么？
好吧，要确定什么是 JavaScript，我们必须深入挖掘一下。你听说过 ECMAScript 吗？它是 JavaScript 所代表的实际实现背后的标准化语言。因此，我们讨论的所有更改都已在 ECMAScript 标准中可用，但目前在 JavaScript 中，或者更确切地说，在你当前的项目中，可能还不可用。可以考虑将你的项目 Babel 化，作为一种可能的解决方案。
ECMAScript 也是大多数开发人员在其项目中呼吁ES5（ECMAScript 5） / ES6（ECMAScript 6）支持的原因。
这基本上就是他们项目的标准化程度。相比之下，你实际上可以将支持 USB3 的棒子插入 USB2 插槽，但这可能会缺少一些 USB3 的功能；反过来，你也可以将 USB2 设备插入支持 USB3 的插槽，但这也可能缺少一些 USB3 的功能。在计算机科学中，我们称之为向上/向下兼容。
这些兼容性无处不在。这些都由 TC39 委员会负责管理的 ECMAScript 标准来确保。该委员会还负责决定哪些代码应该达到他们的最终标准，哪些不能。
ES6 与 ES7（又名 2016）
Array.indexOf 与 Array.Includes
// ES6 way of searching for values in an array
let numbers = [1, 2, 3, 4];
if(numbers.indexOf(2) !== -1) {
console.log('Array contains value');
}
// ES7 way of searching for values in an array
if(numbers.includes(2)) {
console.log('Array contains value');
}
指数运算符
let base = 3;
let exponent = 4;
// old way Math.pow()
console.log(Math.pow(base ,exponent)) //81
// new way
console.log(base**exponent); //81
解构
// Before:
var width = 200;
var height = 400;
// After:
let [width, height] = [200, 400];
// before:
const calculateArea = (areaParameters) => areaParameters[0] * areaParameters[1]
calculateArea([200, 400]);
// or for better naming in older functions:
const calculateArea = ([width, height]) => width * height
calculateArea([200, 400]);
默认参数
// before:
const myFunction = (name) => name ? `I love ${name}` : 'I love marpme'
// now:
const myFunction = (name = "marpme") => `I love ${name}`
在函数内传播参数
// before with an arraylike object, very difficult:
const sumAll = () => arguments.reduce((sum, next) => sum + next, 0)
// now, real array also more way clear
const sumAll = (...numbers) => numbers.reduce((sum, next) => sum + next, 0)
数组连接
//before:
const arrayOne = [1,2,3]
const arrayTwo = [4,5,6]
Array.prototype.concat(arrayOne, arrayTwo) // [1, 2, 3, 4, 5, 6]
// now shorthand:
const arrayOne = [1,2,3]
const arrayTwo = [4,5,6]
const new = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6]
对象分配/合并
//before:
const objectOne = { love: true, number: 6 }
const objectTwo = { es7: false, number: 8 }
Object.assign({}, objectOne, objectTwo) // {love: true, number: 8, es7: false}
// now shorthand:
const objectOne = { love: true, number: 6 }
const objectTwo = { es7: false, number: 8 }
const new = {...objectOne, ...objectTwo} // {love: true, number: 8, es7: false}
类、继承...
看看你之前的 Java 类，JavaScript 中不需要它们。保持真实，并采用基本的函数式方法，这样就很好了。
// Before:
var Person = function(name) {
this.name = name;
}
Person.prototype.sayHi = function() {
console.log(`hi, I'm ${this.name}!`);
}
// After - this produces exactly the same as above:
class Person {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`hi, I'm ${this.name}!`);
}
}
// Let's test it:
var jack = new Person('Jack');
jack.sayHi();
ECMAScript 8（ES8/2017）
也完全支持所有 JavaScript 实现（V8-Chrome、NodeJS 等）。它自带的模式async/await消除了以“链式”方式处理 Promise 的痛苦。
Object.values/ Object.entries，返回所有对象值或所有对象键的数组。
支持getOwnPropertyDescriptors(obj);在对象上放置修饰符。最终，这将使我们能够围绕这些对象构建装饰器。
此外，还有像 这样的内存共享对象SharedArrayBuffer，实际上可以被多个线程同时使用。此外，还有一个用于调用Atomic一些静态方法的对象的命名空间，用于处理此类线程机制。