這是一篇專門(mén)介紹es6特性的文章，文章寫(xiě)的非常棒，全文通過(guò)代碼示例像我們展示了es6的特性，雖然全英文但是用的都是很基礎(chǔ)的單詞，即使因?yàn)椴辉趺春玫耐瑢W(xué)依然能看懂，我這里將其翻譯過(guò)來(lái)有2個(gè)目的，1是加深自己的記憶，2是做個(gè)備份。我這里翻譯是按照我理解的進(jìn)行翻譯，并非"直譯"。如有不當(dāng)之處歡迎指正。

實(shí)踐中使用

    // jquery中
    $(".class").bind("click",e=>{
        console.log(e);
    })
    $.ajax({
        url:"/api/**/*",
        type:"POST",
        data:{
        },
        success:(data, textStatus,jqXHR)=>{
            // response data
        },
        error:err=>{
            // http error
        },
        comp
    })
    // 在react中
    export default ()=>(
這是一個(gè)最簡(jiǎn)單的組件
);
    export default ()=>{
        return 
hello
    }

箭頭函數(shù)不綁定this

    const persion = {
        name:"小明",
        arrowGetName:()=>this.name,
        regularGetName:function(){
            return this.name
        },
        arrowThis:()=>this,
        regularThis:function(){
            return this;
        }
    }
    // 執(zhí)行結(jié)果，
    persion.name;                    // 輸出："小明"
    persion.arrowGetName();          // 拋出異常，"Cannot read property "name" of undefined"
    persion.regularGetName();        // 輸出："小明"
    persion.arrowThis();             // 輸出：undefined
    persion.regularThis();           // 輸出：persion對(duì)象
    // 說(shuō)明：如果基于執(zhí)行上下文是window，那么輸出結(jié)果會(huì)有不同

箭頭函數(shù)不綁定this，但是可以直接使用上下文的this，更加方便

const getName = function(){
    let name = "getName func";
    setTimeout(()=>{
        console.log(this.name);
    },1000)
}
// 執(zhí)行結(jié)果
getName();
//1s delay "getName func"

在其他語(yǔ)言中class的概念非常明確，特別是那些面向?qū)ο蟮木幊陶Z(yǔ)言中，例如:java;在javascript中class只是基于原型集成的一個(gè)高級(jí)語(yǔ)法糖，也就是說(shuō)語(yǔ)法經(jīng)過(guò)編譯之后，是通過(guò)prototype實(shí)現(xiàn)的。

class Persion {
  static version=13
  static getVersion(){
    return this.version;
  }
  constructor(name,age){
    this.name = name;
    this.age = age;
    this.level = 0;
  }
  updateLevel(newLevel){
    this.level = newLevel;
  }
}
class Student extends Persion {
  constructor(name,age){
    super(name,age);
  }
  get levelT(){
    return `${this.level}:from XiaoMing`
  }
  set levelUpdate(level){
    this.level =level;
  }
  updateLevel(newLevel){
    super.updateLevel(newLevel);
  }
}

const tom = new Student("hello");

console.log(tom.level); // 0
console.log(tom.levelT); // 0:from XiaoMing
tom.levelUpdate = 2; 
console.log(tom.levelT); // 2:from XiaoMing
tom.updateLevel(3);
console.log(tom.levelT);  // 3:from XiaoMing

const customProtoObj = {
  toString:function(){
    return "the customProtoObj To string"
  }
}
const handler = ()=>"handler";
const obj = {
  // 直接指定重定義原型鏈
  __proto__:customProtoObj,
  // 屬性賦值的簡(jiǎn)約寫(xiě)法
  handler,
  // 重定義 對(duì)象的toString 方法
  toString(){
    return `d:${super.toString()}`;
  },
  // 動(dòng)態(tài)屬性名稱，這是最大的特性了
  ["prop_"+(()=>42)()]:42,
}

console.log(obj.handler)
console.log(obj.handler())
console.log(obj.toString())
console.log(obj.prop_42)

這個(gè)特性非常給力，特別是動(dòng)態(tài)屬性，在實(shí)踐開(kāi)發(fā)中真的是屢試不爽

    // 以前的字符串拼接只能通過(guò)加號(hào) 完成
    let str = "hello";
    let str1 = "world"
    let strEnd = "end"+str+str1;
    // 使用該特性進(jìn)行重構(gòu)
    let strEndEs6 = `end${str}${str1}`;
    // 函數(shù)調(diào)用
    const getStr = ()=>`from getStr func:${str}`;
    let strEndFun = `from func ${getStr()}`

這是一個(gè)超強(qiáng)的特性，讓我們前端處理后端接口數(shù)據(jù)的時(shí)候游刃有余（特別是遇到，那種后端 <..>）

    // 1.數(shù)組解構(gòu)
    let [a,,b] = [1,2,3];
    console.log(a,b);// 1,3
    // 2. 對(duì)象解構(gòu)
    const data = ()={name:"tom",age:18};
    let {name:a,age} = data();
    console.log(a,age);// "tom",18
    // 這種對(duì)象的解構(gòu)，如果你用過(guò)當(dāng)前流行的幾個(gè)框架:react、vue、ng2，這種解構(gòu)隨處可見(jiàn)
    import {render} from "react-dom"; // 這里的render就是解構(gòu)出來(lái)的
    // 3. 在形參中使用
    function update({name:x}){
        console.log(x);
    }
    function update2({name}){
        console.log(name)
    }
    update({name:"tom"}); // "tom’
    update2({name:"tom2"}); // "tom2"

    // 1.形參默認(rèn)值
    function f(x, y=12) {
      return x + y;
    }
    console.log(f(3))
    // 2.對(duì)象默認(rèn)值
    const p = {name:"123",age:18};
    let {name,age,level=123} = p;
    console.log(level); // 123

    // 1. 形參中使用
    function f(x,y,z){
        return x+y+z;
    }
    let params = [1,2,3];
    f(...params); //他還把數(shù)組的每個(gè)元素作為參數(shù)傳遞過(guò)去
    // 上面的通過(guò)es5的方式編寫(xiě)如下
    f.apply(undefined, [1, 2, 3, 4]);
    // 2. 數(shù)組中使用
    const arr1 = [1,2,"h"];
    const arr2 = [2,3,...arr1,4,5];
    // 上面通過(guò)es5的方式
    arr2 = [2,3].concat(arr1,[4,5]);
    // 3. 在對(duì)象字面量中使用
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // { a: 3, b: 4 }
    
    // Spread properties
    let n = { x, y, ...z };
    console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
    console.log(obj)
    

這個(gè)特性讓我們可以不去現(xiàn)在形參的個(gè)數(shù)，使我們?cè)诰帉?xiě)功能的時(shí)候更加靈活，代碼的擴(kuò)展性也增強(qiáng)很多

function demo(part1, ...part2) {
    return {part1, part2}
}
console.log(demo(1,2,3,4,5,6))