在早期的 Web 項目當中，後端的語言和前端的語言混合在一起，比如在 jsp 和 php 的代碼中能看到大篇幅的 HTML 代碼。後來逐漸的發展到有了“模闆語言”，使得後端語言和前端語言進行了部分的分離，雖然前端中調用模闆的方法，但是前端還需要後端來進行渲染。到現在，前後端語言完全分離，前端做互動，後端寫接口，各司其職。在移動網際網路的飛速發展，前端也日益重要，尤其是出現了所謂的“大前端”。
作為一個後端程式員對前端知識不用懂太多，能看懂、或夠用就行。為了彌補自己不懂前端的短闆，周末對前端進行了簡單的了解，就有了這份筆記。
ECMAScript 6
什麼是 ES 6 呢，我這裡引用了網上給出的說明，引用如下：
JavaScript 是大家所了解的語言名稱，但是這個語言名稱是商标（ Oracle 公司注冊的商标）。是以，JavaScript 的正式名稱是 ECMAScript 。1996年11月，JavaScript 的創造者網景公司将 JS 送出給國際化标準組織 ECMA（European computer manufactures association，歐洲計算機制造聯合會），希望這種語言能夠成為國際标準，随後 ECMA 釋出了規定浏覽器腳本語言的标準，即 ECMAScript。這也有利于這門語言的開放和中立。
https://www.runoob.com/w3cnote/es6-tutorial.html
我這裡整理了 ES 6 的幾個特性，當然 ES 6 的特性不隻有這些，這些是最基本的部分。
一、變量定義
在 ES 6 中增加了 let 關鍵字用于定義變量，let 的用法與之前的關鍵字 var 有所不同。
let 關鍵字有作用域、不能重複聲明和不存在變量提升。
這裡示範一下作用域、不能重複聲明和變量提升。
// 定義變量
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b); // b is not defined 複制
在 { } 中使用 let 定義的變量，在 { } 外進行輸出時，提示變量未定義，這是 let 的作用域的特性。
var m = 1;
var m = 2;
let n = 10;
let n = 20; // Identifier 'n' has already been declared 複制
當在同一作用域使用 let 定義同一變量時，會提示該辨別符已經被定義。
console.log(x) // Cannot access 'x' before initialization
let x = 100;
console.log(y) // undefined
var y = 200; 複制
從上面的代碼可以看到，在未定義 y 在前面輸出 y 時，y 已經存在，由于未指派，是以輸出 undefined，而在 x 前面輸出 x 時，則會提示不能在 x 初始化之前通路 x。
二、常量定義
常量的定義使用 const 關鍵字，常量在定義時必須指派，且之後值不可以改變。
// 定義常量
const PI = 3.1415926
PI = 3 // Assignment to constant variable. 複制
當對 const 定義的常量指派時，會提示“在給常量指派”。
const MY // Missing initializer in const declaration 複制
當定義常量沒有指派時，會提示“定義常量時沒有指定值”。
三、解構指派
解構指派時對指派運算的擴充，來看一下最基本的解構使用方法。
let a = 1, b = 2, c = 3
console.log(a, b, c) 複制
之前的指派需要逐個指派，對于 ES 6 可以使用新的方法進行指派，方法如下：
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z) 複制
上面的方式為數組模型的解構，除了對數組進行解構外，還可以對對象進行解構，方法如下：
// 對象解構
let user = {name: 'Helen', age: 18}
// ES6
let {name, age} = user // 解構的變量必須是user中的屬性
console.log(name, age) 複制
解構的變量需要和 user 中的屬性相同。
上面是解構的基本用法，除了基本用法外，還可以使用可嵌套可忽略、不完全解構、剩餘運算符、結構預設值等方法。
四、字元串
在 ES 6 中對字元串提供了很多拓展方法，比如子串識别、字元串重複、字元串補全等。這裡簡單的介紹一下字元串模闆的使用。
字元串模闆使用反引号（`）進行辨別，模闆字元串具備普通字元串的用法，可以使用 ${} 将變量放入字元串中等功能。
<script>
let name = 'lucy'
let age = 20
// 其中的換行在輸出是也進行輸出
let info = `My name is ${name},
i am ${age + 1} years old`
console.log(info)
</script> 複制
通過浏覽器的 console 視窗來檢視它的輸出，輸出如下：
My name is lucy,
i am 21 years old 複制
可以看到，在輸出中将變量 name 進行了輸出，将變量 age 進行加 1 後輸出，在代碼中的字元串模闆中使用了換行，在控制台中字元串的輸出也進行了換行。
五、對象
在 ES 6 中定義對象、對象拷貝、對象合并也非常的好用，對象定義的代碼如下：
<script>
const name = 'lucy'
const age = 20
// 其中的名字可以省略，名字和變量名相同
const user = {name, age}
console.log(user)
</script> 複制
輸出如下所示：
{name: "lucy", age: 20}
age: 20
name: "lucy" 複制
對象拷貝的代碼如下：
<script>
// 對象複制
let person = {name: 'amy', age: 15}
let someone = { ... person }
console.log(someone)
</script> 複制
以上代碼輸出如下：
{name: "amy", age: 15}
age: 15
name: "amy" 複制
對象合并的代碼如下：
<script>
// 對象合并
let age = {age : 15}
let name = {name : 'amy'}
let person = { ... age, ... name}
console.log(person)
</script> 複制
以上代碼輸出如下：
{age: 15, name: "amy"}
age: 15
name: "amy" 複制
ES 6 中還有其他的關于對象的操作，比如屬性名表達式、方法名簡寫等。
六、箭頭函數
在 ES 6 中提供了箭頭函數，它是函數的一種簡潔書寫方式。這裡整理了帶一個參數和帶多個參數的函數。先來看帶一個參數的函數，代碼如下：
<script>
// 參數 => 函數體
var f1 = a => a
console.log(f1(3))
</script> 複制
該函數等價于如下函數：
var f1 = function(a) {
return a
} 複制
是以，在上面的 console.log(f1(3)) 會輸出一個 3。再來檢視帶多個參數的函數如何定義，代碼如下：
<script>
// ES6
var f2 = (m, n) => m + n
console.log(f2(3, 4))
</script> 複制
在上面的代碼中，m 和 n 是參數，傳回值是 m + n 的和，上面的代碼輸出 7。當參數隻有一個的時候可以不使用小括号，當沒有參數或有一個以上的參數時，小括号不可用省略。
總結
上面是整理的部分關于 ES 6 的特性，ES 6 中還包括 Symbol、Map、Set、Proxy、Reflect、Promise、Generator 和async 等，具體參考連接配接為 ：https://www.runoob.com/w3cnote/es6-tutorial.html，有需要的可以點選該連接配接自行閱讀。