ES6中常用的10個(gè)新特性講解
ECMAScript 6(ES6) 目前基本成為業(yè)界標(biāo)準(zhǔn)，它的普及速度比 ES5 要快很多夏块，主要原因是現(xiàn)代瀏覽器對(duì) ES6 的支持相當(dāng)迅速，尤其是 Chrome 和 Firefox 瀏覽器捐凭，已經(jīng)支持 ES6 中絕大多數(shù)的特性拨扶。
下面逐一為大家詳解常用的ES6新特性：
1. 不一樣的變量聲明：const和let
ES6推薦使用let聲明局部變量，相比之前的var（無論聲明在何處茁肠，都會(huì)被視為聲明在函數(shù)的最頂部） let和var聲明的區(qū)別：
var x = '全局變量';{ let x = '局部變量'; console.log(x); // 局部變量}console.log(x); // 全局變量
let表示聲明變量，而const表示聲明常量缩举，兩者都為塊級(jí)作用域垦梆；const 聲明的變量都會(huì)被認(rèn)為是常量匹颤，意思就是它的值被設(shè)置完成后就不能再修改了：
const a = 1a = 0 //報(bào)錯(cuò)
如果const的是一個(gè)對(duì)象，對(duì)象所包含的值是可以被修改的托猩。抽象一點(diǎn)兒說印蓖，就是對(duì)象所指向的地址沒有變就行：
const student = { name: 'cc' }student.name = 'yy';// 不報(bào)錯(cuò)student = { name: 'yy' };// 報(bào)錯(cuò)
有幾個(gè)點(diǎn)需要注意：
let 關(guān)鍵詞聲明的變量不具備變量提升（hoisting）特性
let 和 const 聲明只在最靠近的一個(gè)塊中（花括號(hào)內(nèi)）有效
當(dāng)使用常量 const 聲明時(shí)，請(qǐng)使用大寫變量京腥，如：CAPITAL_CASING
const 在聲明時(shí)必須被賦值
1. 模板字符串
在ES6之前赦肃，我們往往這么處理模板字符串： 通過“”和“+”來構(gòu)建模板
$("body").html("This demonstrates the output of HTML content to the page, including student's" + name + ", " + seatNumber + ", " + sex + " and so on.");
而對(duì)ES6來說
基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接公浪。用${}來界定他宛；
ES6反引號(hào)(``)直接搞定；
("body").html(This demonstrates the output of HTML content to the page, including student's {name}, {seatNumber}, {sex} and so on.);
1. 箭頭函數(shù)（Arrow Functions）
ES6 中欠气，箭頭函數(shù)就是函數(shù)的一種簡寫形式厅各，使用括號(hào)包裹參數(shù)，跟隨一個(gè) =>预柒，緊接著是函數(shù)體队塘；
箭頭函數(shù)最直觀的三個(gè)特點(diǎn)。
不需要 function 關(guān)鍵字來創(chuàng)建函數(shù)
省略 return 關(guān)鍵字
繼承當(dāng)前上下文的 this 關(guān)鍵字
// ES5var add = function (a, b) { return a + b;};// 使用箭頭函數(shù)var add = (a, b) => a + b;// ES5[1,2,3].map((function(x){ return x + 1;}).bind(this)); // 使用箭頭函數(shù)[1,2,3].map(x => x + 1);
細(xì)節(jié)：當(dāng)你的函數(shù)有且僅有一個(gè)參數(shù)的時(shí)候宜鸯，是可以省略掉括號(hào)的憔古。當(dāng)你函數(shù)返回有且僅有一個(gè)表達(dá)式的時(shí)候可以省略{} 和 return；
1. 函數(shù)的參數(shù)默認(rèn)值
在ES6之前淋袖，我們往往這樣定義參數(shù)的默認(rèn)值：
// ES6之前鸿市，當(dāng)未傳入?yún)?shù)時(shí)，text = 'default'适贸；function printText(text) { text = text || 'default'; console.log(text);}// ES6灸芳；function printText(text = 'default') { console.log(text);}printText('hello'); // helloprintText();// default
1. Spread / Rest 操作符
Spread / Rest 操作符指的是 ...，具體是 Spread 還是 Rest 需要看上下文語境拜姿。
當(dāng)被用于迭代器中時(shí)烙样，它是一個(gè) Spread 操作符：
function foo(x,y,z) { console.log(x,y,z);} let arr = [1,2,3];foo(...arr); // 1 2 3
當(dāng)被用于函數(shù)傳參時(shí)，是一個(gè) Rest 操作符：當(dāng)被用于函數(shù)傳參時(shí)蕊肥，是一個(gè) Rest 操作符：
function foo(...args) { console.log(args);}foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
1. 二進(jìn)制和八進(jìn)制字面量
ES6 支持二進(jìn)制和八進(jìn)制的字面量谒获，通過在數(shù)字前面添加 0o 或者0O 即可將其轉(zhuǎn)換為八進(jìn)制值：
let oValue = 0o10;console.log(oValue); // 8 let bValue = 0b10; // 二進(jìn)制使用 0b 或者 0Bconsole.log(bValue); // 2
1. 對(duì)象和數(shù)組解構(gòu)
// 對(duì)象const student = { name: 'Sam', age: 22, sex: '男'}// 數(shù)組// const student = ['Sam', 22, '男'];// ES5；const name = student.name;const age = student.age;const sex = student.sex;console.log(name + ' --- ' + age + ' --- ' + sex);// ES6const { name, age, sex } = student;console.log(name + ' --- ' + age + ' --- ' + sex);
1. 對(duì)象超類
ES6 允許在對(duì)象中使用 super 方法：
var parent = { foo() { console.log("Hello from the Parent"); }} var child = { foo() { super.foo(); console.log("Hello from the Child"); }} Object.setPrototypeOf(child, parent);child.foo(); // Hello from the Parent // Hello from the Child
- for...of
for...of 用于遍歷一個(gè)迭代器壁却，如數(shù)組：
let letters = ['a', 'b', 'c'];letters.size = 3;for (let letter of letters) { console.log(letter);}// 結(jié)果: a, b, c
1. ES6中的類
ES6 中支持 class 語法批狱，不過，ES6的class不是新的對(duì)象繼承模型展东，它只是原型鏈的語法糖表現(xiàn)形式赔硫。
函數(shù)中使用 static 關(guān)鍵詞定義構(gòu)造函數(shù)的的方法和屬性：
class Student { constructor() { console.log("I'm a student."); } study() { console.log('study!'); } static read() { console.log("Reading Now."); }} console.log(typeof Student); // functionlet stu = new Student(); // "I'm a student."stu.study(); // "study!"stu.read(); // "Reading Now."
類中的繼承和超集：
class Phone { constructor() { console.log("I'm a phone."); }} class MI extends Phone { constructor() { super(); console.log("I'm a phone designed by xiaomi"); }} let mi8 = new MI();
extends 允許一個(gè)子類繼承父類，需要注意的是盐肃，子類的constructor 函數(shù)中需要執(zhí)行 super() 函數(shù)爪膊。 當(dāng)然权悟，你也可以在子類方法中調(diào)用父類的方法，如super.parentMethodName()推盛。 在 這里 閱讀更多關(guān)于類的介紹峦阁。
