ES6學習筆記

寫好的es6的代碼能夠經過babel-cli插件轉化爲es5的代碼 
npm install babel-cli -g
babel以前是個專用的es6轉化es5的工具，由於es6的代碼在瀏覽器中的無法跑起來，可是如今babel的功能更增強大了，好比react的jsx也是經過babel來轉化
的，因此如今babel能夠轉化多種類型的js代碼，再也不是專用的es6轉es5的解析器了，解析工做由配置文件來實現。

.babelrc{
 "presets":["es2015"],
 "plugins":[]
}
touch .babelrc//建立一個配置文件.babelrc,將上述對象配置進去

由於babel是個多功能的解析器，所以想把es6轉化爲es5,還須要安裝專門的轉化es6爲es5的插件babel-preset-es2015。

npm install --save-dev babel-preset-es2015

babel安裝完成以後就能夠用來轉化了。babel es6.js -o es5.js
ES6代碼的頭部要引用嚴格模式 'use strict' 

1，template 模板字符串

let name = "叮呤"; let age = 26; //es5拼接字符串
console.log(name+"年齡是"+age+"歲"); //es6拼接字符串
console.log(`${name}年齡是${age}歲`)

2，箭頭函數

let say = name => name; let write = (name,age) => { var a = 5; `${name} is ${age+a} years old` } //至關於es5的
 let say = function(name){ return name; } let write = function(name,age){ let a = 5; return `${name} is ${age+a} years old` } let r = arr.map(function(item,index,arr){ return item+item; }) let r1 = arr.map(item => item+item) //箭頭函數裏的this關鍵字不會改變，而且箭頭函數也不支持bind、call、apply。箭頭函數裏的this指向再也不看運行時的this，而是看定義時的this了
 let fun(){ 　　setInterval(function(){ 　　　　console.log(this.id);//window的id
 　　}) } let fun1 = () =>{　 　　 setInterval(function(){ 　　　　console.log(this.id);//調用該方法時的this的id
 　　}) } let obj = {id:123} fun.call(obj)//輸出window的id，undefined
 fun1.call(obj)//輸出爲obj的id，123
 let objfn = { 　　id:123, 　　fun1:function(){ 　　　　setTimeout(function(){ 　　　　　　console.log(this.id) 　　　　}) 　　}, 　　fun2:function(){ 　　　　setTimeout(()=>{console.log(this.id)}) 　　}, 　　fun3:()=>{//這裏的this爲window
 　　　　setTimeout(()=>{console.log(this.id)//因此這裏的this也爲window})
 　　} } objfn.fun1();//undefined
 objfn.fun2();//123
 objfn.fun3();//undefined

 

3,構造函數

在es5中沒有構造函數與普通函數沒有太大的區別，只用new來區分。在es6中用class表示一個真正的構造函數。

class Person{ constructor(name){ this.name = name;
 this.hobbies= [] 
  } 
  getName(){ console.log(this.name); }

 get hobby(){
 return this.hobbies
 }
 set hobby(hobby){
 this.hobbies.push(hobby)
　} } //用法
var p = new Person('叮呤')
p.hobby = 'sing'
p.hobby = 'dance'
console.log(p.habby())//['sing','dance'] p.getName();


class Student extends Person(){
 constructor(name,stuNo){
 super(name);//在子類構造函數中要先調用父類的構造函數
 this.stuNo = stuNo;
 this.name = name;
 }
 getStuNo(){
 console.log(this.stuNo);
 }
}
var student = new Student('叮呤'，’‘18);
console.log(super.getName(),student.getName())

 4,模塊

在es5中，沒有模塊的功能，因此常用commonJS或者seaJs來實現。在es6中，在語言的規格上，實現了模塊功能。

·export命令用於規定模塊的對外接口。導出變量；導出變量爲一個對象；導出函數或類（class）

·import命令用於輸入其餘模塊提供的功能

　　1,其餘js文件能夠經過import命令加載這個模塊

　　2，import命令接受一個對象，裏面指定要從其餘模塊導入的變量名

　　3，模塊的總體加載  import * as util from './util'

　　4，export default命令，爲模塊指定默認輸出

　　5，export default對應的import語句不須要使用大括號，不使用export default對應的import語句須要使用大括號

　　6，一個模塊只能有一個默認輸出（export default）

·一個模塊就是一個獨立的文件，該文件內部的全部變量，外部沒法獲取

·若是你但願外部能讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量

person.js:

var name = "張三"
var getName = function(){ console.log(name); }

export{name,getName}

entry.js

import {name,getName} from "./person.js"
getName();

每一個模塊都會有一個默認導出，即export default。導入的時候默認獲得默認導出的部分

person.js:

export default print(word){ console.log(word); }

entry.js:

import Print from "./person.js"
Print("hello");//執行person中的print方法

5,迭代器Iterator

//原理：
let says = say(['hello','world']); console.log(says.next());//{value:'hello',done:false}
console.log(says.next());//{value:'world',done:false}
console.log(says.next());//{value:undefined,done:true}

function say(words){ 　　let i = 0; 　　return { 　　　　next(){ 　　　　　　value:words[i], 　　　　　　done:i++>=words.length 　　　　} 　　} }

 

 6，生成器generator

function* say(){ yield "a";//將生成器認爲一個數組，yield就至關於push yield "b"; } var says = say(); console.log(says.next()); console.log(says.next()); 

從ECMAScript2016（ES7）開始，ECMAScript就進入每一年發佈一次標準的階段
微軟的edge版本瀏覽器能夠自動升級，那麼之後js的新標準均可以及時支持。
pollyfile:在一些低版本瀏覽器中不支持es6,能夠採用pollyfile模擬高版本瀏覽器（例如ajax在IE與高版本瀏覽器中差別就能夠採用這種方法），
雖然會有所性能損耗。
淘寶移動端端頁面，採用的是es6+react
js之父花了10天時間開發完成，因此js有較多缺陷，這些缺陷致使github上的js框架是最多的，但這些前端框架的生命週期不是很長，由於js在es6,es7的
發展下正在變得愈來愈完善。
es6的模塊化定義更像php或者java，採用new的方式
在es6中實現了CMD,AMD，可是沒有瀏覽器實現
7，變量定義
es5通常採用var來定義變量，var這種方式存在的弊端有：var沒有塊級做用域，定義後在當前閉包中均可以訪問，若是變量名重複，就會覆蓋前面定義的變量，
而且也有可能被他人修改。新的兩種變量定義方式let和const。用let定義的變量具備塊級做用域。用const定義的變量是靜態變量，定義之後不可修改。
let聲明的全局變量不會影響到window，循環時不會共享let定義的變量,同一個塊做用域中重複定義會報錯。const聲明時通常用大寫的名稱，且在不一樣的程序
塊中能夠重複定義。
eg:

for(var i =0;i<3;i++){ setTimeOut(function(){ console.log(i);//3
 },1000) } for(let i =0;i<3;i++){ setTimeOut(function(){ console.log(i);//0,1,2 
 },1000) } //上述let定義的方式至關於使用了閉包
for(var i =0;i<3;i++){ ;(function(i){ setTimeOut(function(){ console.log(i);//3
   },1000) }) ) }

閉包的新寫法：{},再也不須要是;(function(){});
8，結構賦值
就是變量的批量賦值,一種模式匹配
數組的結構賦值，eg：

'use strict'//在IE6，7，8就表示一個普通的字符串，在高版本瀏覽器中表示用嚴格模式解析js。儘可能使用嚴格模式進行開發，避免使用的插件用的嚴格模式，而本身代碼不是嚴格模式致使的衝突
let arr = [0,1,2] let a = arr[0]; let b = arr[1]; let c = arr[2]; //或
let [a, b, c] = arr//逗號後面也要加個空格

let arr2 = [1,[2.1,2.2,2.3],3]
let [a,b,c]=arr2

//不定參數
let arr3 = [1,2,3,4,5]
let [a,b,...other] = arr3//...爲拓展運算符，拓展運算符不能放在中間rest element
console.log(a,b,other);//1,2,[3,4,5]

對象的結構賦值

'use strict' let obj = {//對象是無序的，底層由哈希表實現
    a:'1', b:'2', c:'3' } let {x,y,z} = obj;//因爲obj是非線性的，因此x,y,z的值不固定.因此採用下述方式進行對象的結構賦值
let {a:mya,b:myb,c:myc} = obj

 解構賦值與重命名

 

const offset = {x:100,y:200}; const {x:width,y:height} = offset; //至關於x重命名爲width,y重命名爲height.可輸出width與height查看
console.log(width); console.log(height);

 

 

 

 利用解構組合對象和數組

const  obj1 = {a:1,b:2} const obj2 = {c:1,d:2} console.log({...obj1,...obj2})//{a:1,b:2,c:1,d:2}

const flexdCenter = {alignItems:'center',justifyCenter:'center'}
<view style={{flexDirection:'column',...flexCener,flex:1}}></view>

 

 利用解構拷貝對象和數組

const obj = {a:1,b:2} const cloneObj = {...obj} obj === cloneObj //false
cloneObj   //{a:1,b:2}