這是一篇專門介紹es6特性的文章，文章寫的非常棒，全文通過代碼示例像我們展示了es6的特性，雖然全英文但是用的都是很基礎的單詞，即使因為不怎么好的同學依然能看懂，我這里將其翻譯過來有2個目的，1是加深自己的記憶，2是做個備份。我這里翻譯是按照我理解的進行翻譯，并非"直譯"。如有不當之處歡迎指正。

實踐中使用

    // 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 ()=>(
這是一個最簡單的組件
);
    export default ()=>{
        return 
hello
    }

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

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

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

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

在其他語言中class的概念非常明確，特別是那些面向?qū)ο蟮木幊陶Z言中，例如:java;在javascript中class只是基于原型集成的一個高級語法糖，也就是說語法經(jīng)過編譯之后，是通過prototype實現(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,
  // 屬性賦值的簡約寫法
  handler,
  // 重定義 對象的toString 方法
  toString(){
    return `d:${super.toString()}`;
  },
  // 動態(tài)屬性名稱，這是最大的特性了
  ["prop_"+(()=>42)()]:42,
}

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

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

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

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

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

    // 1.形參默認值
    function f(x, y=12) {
      return x + y;
    }
    console.log(f(3))
    // 2.對象默認值
    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ù)組的每個元素作為參數(shù)傳遞過去
    // 上面的通過es5的方式編寫如下
    f.apply(undefined, [1, 2, 3, 4]);
    // 2. 數(shù)組中使用
    const arr1 = [1,2,"h"];
    const arr2 = [2,3,...arr1,4,5];
    // 上面通過es5的方式
    arr2 = [2,3].concat(arr1,[4,5]);
    // 3. 在對象字面量中使用
    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)
    

這個特性讓我們可以不去現(xiàn)在形參的個數(shù)，使我們在編寫功能的時候更加靈活，代碼的擴展性也增強很多

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