es6特性介紹(上)

這是一篇專門介紹es6特性的文章,文章寫的很是棒,全文經過代碼示例像咱們展現了es6的特性,雖然全英文可是用的都是很基礎的單詞,即便由於不怎麼好的同窗依然能看懂,我這裏將其翻譯過來有2個目的,1是加深本身的記憶,2是作個備份。我這裏翻譯是按照我理解的進行翻譯,並不是"直譯"。若有不當之處歡迎指正。javascript

箭頭函數

實踐中使用
// 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 ()=>(<div>這是一個最簡單的組件</div>);
    export default ()=>{
        return <div>hello</div>
    }
箭頭函數不綁定this
const persion = {
        name:'小明',
        arrowGetName:()=>this.name,
        regularGetName:function(){
            return this.name
        },
        arrowThis:()=>this,
        regularThis:function(){
            return this;
        }
    }
    // 執行結果,
    persion.name;                    // 輸出:'小明'
    persion.arrowGetName();          // 拋出異常,'Cannot read property 'name' of undefined'
    persion.regularGetName();        // 輸出:'小明'
    persion.arrowThis();             // 輸出:undefined
    persion.regularThis();           // 輸出:persion對象
    // 說明:若是基於執行上下文是window,那麼輸出結果會有不一樣
箭頭函數不綁定this,可是能夠直接使用上下文的this,更加方便
const getName = function(){
    let name = 'getName func';
    setTimeout(()=>{
        console.log(this.name);
    },1000)
}
// 執行結果
getName();
//1s delay 'getName func'

classess

在其餘語言中class的概念很是明確,特別是那些面向對象的編程語言中,例如:java;在javascriptclass只是基於原型集成的一個高級語法糖,也就是說語法通過編譯以後,是經過prototype實現的。前端

實踐使用

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()}`;
  },
  // 動態屬性名稱,這是最大的特性了
  ["prop_"+(()=>42)()]:42,
}

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

這個特性很是給力,特別是動態屬性,在實踐開發中真的是屢試不爽vue

字符串插值表達式,或者叫作字符串模版

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

數據解構

這是一個超強的特性,讓咱們前端處理後端接口數據的時候遊刃有餘(特別是遇到,那種後端 <..>)java

// 1.數組解構
    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); //他還把數組的每一個元素做爲參數傳遞過去
    // 上面的經過es5的方式編寫以下
    f.apply(undefined, [1, 2, 3, 4]);
    // 2. 數組中使用
    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)

Rest形參

這個特性讓咱們能夠不去如今形參的個數,使咱們在編寫功能的時候更加靈活,代碼的擴展性也加強不少react

function demo(part1, ...part2) {
    return {part1, part2}
}
console.log(demo(1,2,3,4,5,6))
相關文章
相關標籤/搜索