Es6知識點
-
ES5 變量
var 聲明
1.可以重複聲明 不報錯
var a=12; var a=5; alert(a) //52.沒有塊級作用域（語法塊）
{ 變量=123 } for(...){ var a=12 } alert(a) 12ES6語法 let const 不能重複聲明
let 是變量
let a=12; a=5 alert(a) 5const 常量
const a=12 a=5 alert(a) 報錯兩者皆爲塊級作用域 更容易合作開發
if(true){ let a=1; const b=1; } alert (a=1)報錯 未定義 alert (b=1)報錯 未定義 -
函數
箭頭函數
1.如果只有一個參數（）可以省
resp=>{ console.log(resp) } let show=(n1,n2)=>{ alert(n1+n2) }2.如果只有一個返回值
(a)=>a*2 等價 (a)=>{ return a*2 }3.this的指向問題(重點)
普通函數：根據調用我的人（誰調用我，我的this就指向誰） 箭頭函數：根據所在的環境（我再哪個環境中，this就指向誰）4.Es6的傳參問題 …args 必須放最後
let show=(a,b,...args)=>{ alert(a,b,...args) } show(12,23,54,)5.展開數組
let arr=[1,2,3]; ...arr; let show=(a,b,c)=>{ alert(a) alert(b) alert(c) } show(1,2,3) 等價於 show(...arr)6.解構賦值(兩邊結構一致)語法糖
//原始 let arr=[1,2,3] let a=arr[0]; let b=arr[1]; let c=arr[2] //一一對應，右邊的給左邊 let [a,b,c]=[1,2,3] let {a,c,d}={a:12,c:13,d:14} //---------------------------------------- let{{a,b},[n1,n2,n3],num,str}= {{a:1,b:2},[1,2,3],12,"str"} let{json,arr,num,str}= {{a:1,b:2},[1,2,3],12,"str"} console.log(a,b,c,n1,n2,n3,num,str) console.log(json,arr,num,str) //----------------------------------------- let {a,b}={12,13} console.log(a,b)報錯 因爲右邊不是個東西 非數組，非對象，非json //將值打印出來 -
數組
數組新方法
map 映射 一個對一個 [12,99,78] ["不及格","優秀","良好"] let score=[12,99,78] //返回一個新數組 let result=score.map(item=>item>=60?"及格":"不及格") alert(result) //------------------------------------------- let arr=[12,5,6] let result=arr.map((item)=>{ return item*2 //數值乘以2 }) alert(result)reduce 彙總 一堆出來一個 [19,59,99] 算總分 平均分 let arr=[19,59,99] tmp 中間值 item 數值 index 下標 總分 let sum=arr.reduce((tmp,item,index)=>{ return tmp+item )} alert(sum) 平均分 let average=arr.reduce(function(tmp,item,index){ if(index!=arr.length-1){ return tmp+item }else{ return (tmp+item)/index } }) alert(average)filter 過濾器 選擇過濾 let arr=[19,59,99] let result=arr.filter(item=>{ //return true;//全部保留 //return false //全部不保留 /* 本身就是boolen值 if(item>20){ return true; }else{ return false; } */ 等價於 return item>20 }) //------------------------------------------ let objs=[ {name:"楊樂樂",age:18}, {name:"谷咕咕",age:22}, {name:"阿姜",age:21}, {name:"周某人",age:22}, ] let result=objs.filter(json=>json.age=22) console.log(result) 返回/* {name:"周某人",age:22}, {name:"谷咕咕",age:22}, */forEach 迭代 循環遍歷 let arr=[1,2,3] let result=arr.forEach((item,index)=>{ alert(item +index) }) -
字符串
字符串操作
（1）多了兩個新方法
startsWith
let str="http://baidu.com" if(str.startsWith("http://")){ alert("普通網址") } //是一個網址 返回值時boolen類型endsWith 進行郵箱的驗證，文件類型的擴展名都可以
（2）字符串模板 不需要換行符，可以折行
字符串拼接 反單引號
let str=`abc`; let str2=`a${str}bc` alert(str2)//aabcbc -
面向對象
-
promise-承諾
異步 同步 操作之間沒關係，同時進行多個操作。回調地獄,一直使用ajax請求 同時能做一件事。一個再走下一個 代碼複雜 代碼簡單 promise==消除異步操作
用同步的方式書寫異步代碼
let p=new Promise(function(resolve,reject){ /* resolve 成功推薦 reject 失敗回調 */ $.ajax({ url:'aaa.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) p.then(function(){ alert("成功回調") },function(){ alert("失敗回調") });好處顯現
let p=new Promise(function(resolve,reject){ /* resolve 成功推薦 reject 失敗回調 */ $.ajax({ url:'aaa.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) let p1=new Promise(function(resolve,reject){ /* resolve 成功推薦 reject 失敗回調 */ $.ajax({ url:'bbb.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) Promise.all([ p,p1 ]).then(function(arr){ let [res1,res2]=arr; //arr數組作爲結果 console.log(res1) //aaa.txt文件內容 console.log(res2)//bbb.txt文件內容 alert('全部成功了') },function(){ alert('至少一個失敗了') })簡化操作 封裝promise
function createPromise(url){ return new Promise(function(resolve,reject){ $.ajax({ url:url, dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) } ) } Promise.all([ createPromise('aaa.txt') createPromise('bbb.txt') ]).then(function(arr){ let [res1,res2]=arr; //arr數組作爲結果 console.log(res1) //aaa.txt文件內容 console.log(res2)//bbb.txt文件內容 alert('全部成功了') },function(){ alert('至少一個失敗了') })更進一步 jquery的封裝promise
let p=$.ajax({url:'aaa.txt',dataType:'json'}) 返回的是promise對象 直接 Promise.all([ $.ajax({url:'aaa.txt',dataType:'json'}) $.ajax({url:'bbb.txt',dataType:'json'}) ]).then(function(arr){ let [res1,res2]=arr; //arr數組作爲結果 console.log(res1) //aaa.txt文件內容 console.log(res2)//bbb.txt文件內容 alert('全部成功了') },function(){ alert('至少一個失敗了') })最簡單大致的寫法
Promise.all([ajax1,ajax2]).then(success=>{},error=>())封裝爲一個promise方法 console.log(111); let promise = new Promise((resolve, reject) => { setTimeout(function () { console.log(222); resolve("hello word") },3000) }) promise.then((data)=>{ console.log(333); console.log(data); }).catch(()=>{ console.log(444);//錯誤進入 }) /* 111 222 333 hello word */Promise.race([]) 優先加載速度快的
-
generator
-
模塊化
在一個單獨的js文件中export拋出模塊
export function show(){ console.log("模塊化執行show的方法") } export let show1=()=>{ console.log("模塊化執行show1的方法") }import {show,show1} from './js/es6' show(); show1(); //分別執行控制檯打印的內容1、export
一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個 JS 文件，裏面使用export命令輸出變量。export寫法一般如下：
var firstName = 'name'; var lastName = 'last'; var year = 1996; export { firstName, lastName, year };通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。例：
function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名後，v2可以用不同的名字輸出兩次。
2、import
使用export命令定義了模塊的對外接口以後，其他 JS 文件就可以通過import命令加載這個模塊。例：import { firstName, lastName, year } from './profile.js'; function setName(element) { element.textContent = firstName + ' ' + lastName; }當然，如果想爲輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名，這也是上文說通常情況下，export輸出的變量名不變的原因。例：
import { lastName as surname } from './profile.js';另外，注意import命令具有提升效果，會提升到整個模塊的頭部，首先執行。
3、export default
從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。這就產生一個問題，使用模塊者不願閱讀文檔，不想知道變量名。此時就要用到export default命令，爲模塊指定默認輸出。person.js文件 export default { firstName:'first', lastName:'last', age: 11 } 此時import導入寫成： import person from 'person'; console.log(person.age) //11本質上，export default就是輸出一個叫做default的變量或方法，然後系統允許你爲它取任意名字。
4、總結拓展
export default 向外暴露的成員，可以使用任意變量名來import
在一個模塊中，export default 只允許向外暴露一次。
在一個模塊中，可以同時使用export default 和export 向外暴露成員
export可以向外暴露多個成員，同時，如果某些成員，在import導入時不需要，可以在import時不寫。
使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收