這是一篇專門介紹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> }
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,那麼輸出結果會有不一樣
const getName = function(){ let name = 'getName func'; setTimeout(()=>{ console.log(this.name); },1000) } // 執行結果 getName(); //1s delay 'getName func'
在其餘語言中class
的概念很是明確,特別是那些面向對象的編程語言中,例如:java
;在javascript
中class
只是基於原型集成的一個高級語法糖,也就是說語法通過編譯以後,是經過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)
這個特性讓咱們能夠不去如今形參的個數,使咱們在編寫功能的時候更加靈活,代碼的擴展性也加強不少react
function demo(part1, ...part2) { return {part1, part2} } console.log(demo(1,2,3,4,5,6))