ESMAScript6.0
ES6 兼容
IE10+ 、Chrome、Firefox
要想兼容IE10以下的有兩種方法：
-
用 babel 工具 borwer.js ，在 script 標簽里添加 type="text/babel" 屬性
變數let和const
-
let ：用于定義變數，不能重復宣告
-
const ：用于定義常量，不能重復宣告
箭頭函式
箭頭函式有效更改 this 的指向，
show((item) => { return alert(item); // 13 }); show(13);
如果只有一個引數，可以省掉
( )show(item =>{ return alert(item); // 13 }); show(13);
如果只有一個 return ，可以省掉
{ }和 returnshow = item => alert(item); // 13 show(13);
函式-引數
收集引數： ...args
Rest Parameter 必須是最后一位
let arr = [1,2,3]; function show(a,b,...args){ alert(args); // 35,57,18,45 } show(13,14,35,57,18,45); function show2(a,b,c){ alert(a); // 1 alert(b); // 2 alert(c); // 3 } show2(...arr);
展開陣列： ...args
展開后的效果，跟直接把陣列的類容寫在哪兒一樣
let arr = [1,2,3]; let arr2 = [4,5,6]; function show(...args){ fu(...args); } function fu(a,b,...args){ console.log(a,b); // 1 2 console.log(a,b,...args); // 1 2 3 4 5 6 } show(...arr,...arr2);
默認引數： (a,b,c=10)
當我們傳遞 c=1000 時 c=10 將會被替換，
如果沒有給
c設定引數，那么它的值默認為10，
function show(a,b,c=10){ console.log(a,b,c); } show(10,100,1000); // 10 100 1000 // show(10,100); // 10 100 10
解構賦值
-
左右兩邊結構相同
-
宣告和賦值不能分開（必須在一句話里完成）
let [a,b,c] = [1,2,3]; console.log(a,b,c); // 1 2 3 let {a,b,c} = { a:1, c:3, b:2 }; console.log(a,b,c); // 1 2 3 let [{ a,b },[n1,n2,n3],num,str] = [{ a:1, b:6 },[12,24,32],58,'結構賦值'] console.log(a,b,n1,n2,n3,num,str); // 1 6 12 24 32 58 "結構賦值"
也可以根據右邊的引數的型別進行回傳相應的引數
let [json,arr,num,str] = [{ a:1, b:6 },[12,24,32],58,'結構賦值']
console.log(json,arr,num,str); // { a: 1, b: 6 } [12, 24, 32] 58 "結構賦值"
陣列
map：映射（一個對一個）
let arr = [3,43,12]; arr.map(function (item){ alert(item); // 3 43 12 })
設定回傳值：
let arr = [3,43,12]; let result = arr.map(function (item){ return item * 2 }) alert(result); // 6 86 24
簡寫(箭頭函式)：
let arr = [3,43,12]; let result = arr.map( item => item*2 ) alert(result); // 6 86 24
實列：
let score = [19,85,25,90]; const result = score.map(item => item >= 60 ? '及格' : '不及格'); console.log(score); // [19, 85, 25, 90] console.log(result); // ["不及格", "及格", "不及格", "及格"]
reduce：匯總（一堆出來一個）
計算：
/** * @param tmp (上一輪的結果) * @param item (arr里的數依次傳遞給item) * @param index (次數) */ let arr = [12,155,64,74] let result = arr.reduce(function (tmp,item,index){ return tmp + item; }) alert(result); // 305 let arr = [12,155,64,74] let result = arr.reduce(function (tmp,item,index){ if(index != arr.length-1){ // 不是最后一次 return tmp + item; }else{ // 最后一次 return (tmp + item)/arr.length; } }) alert(result); // 76.25
filter：過濾器
保留能被3整除的數
let arr = [12,54,35,75,11,24]; const result = arr.filter(function (item){ if(item % 3 == 0){ return true; }else{ return false; } }) alert(result); // 12,54,75,24
簡寫：
let arr = [12,54,35,75,11,24]; const result = arr.filter(function (item){ return item % 3 == 0; }) alert(result); // 12,54,75,24
實列：
let arr = [ { item: '手機', price: 5600}, { item: '電腦', price: 14000}, { item: '電視', price: 7600}, { item: '顯示屏', price: 3600} ] const result = arr.filter(json => json.price >= 6000); console.log(result); // [{ item: '電腦', price: 14000} { item: '電視', price: 7600}]
forEach：回圈（迭代）
對陣列里的數回圈
let arr = [12,54,35]; arr.forEach( (item,index) =>{ alert(index + '---' + item); // 0---12 1---54 2---35 })
字串
startsWith和endsWith方法
-
startsWith
let str = 'https://www.baidu.com'; if(str.startsWith('http://')){ alert('普通網址'); }else if(str.startsWith('https://')){ alert('加密網址'); }else if(str.startsWith('git://')){ alert('git網址'); }else if(str.startsWith('svn://')){ alert('svn網址'); }else { alert('其它'); }
-
endsWith
let str = '1.txt'; if(str.endsWith('.txt')){ alert('文本檔案'); }else if(str.endsWith('.jpg')){ alert('JPG圖牌'); }else { alert('其它'); }
字串模板
${ name } 直接把變數名放進字串里面，可以折行，
字串連接 ：
let a = 15; let str = `a,${a},b,c`; alert(str); // a,15,b,c
字串連接實列：
let title = '標題'; let content = '內容'; let str = <div> <h1>${title}</h1> <p>${content}</p> </div>; alert(str);
面向物件
1. class 關鍵字、 constructor 構造器和類分開了
2.可以在 class 里直接加方法
class User{ constructor(name,pass){ this.name = name; this.pass = pass } showName(){ alert(this.name); // Snaek } showPass(){ alert(this.pass); // 123456 } } const ul = new User('Snaek','123456'); ul.showName(); ul.showPass();
繼承：
class VipUser extends User{ constructor(name,pass,level){ super(name,pass); this.level = level; } showLevel(){ alert(this.level); } } const vl = new VipUser('Snaek','123456',12); vl.showName(); // Snaek vl.showPass(); // 123456 vl.showLevel(); // 12
JSON物件/簡寫
JSON
JSON.stringify(); let str = { a: 12, b: 54 }; let json = JSON.stringify(str); console.log(json); // {"a":12,"b":54} JSON.parse(); let str = '{ "a":12, "b":32, "c":"abc" }'; let json = JSON.parse(str); console.log(json); // {a: 12, b: 32, c: "abc"}
簡寫
名字和值（ key 和 value ）一樣可以簡寫
let [a,b] = [12,5]; let json = { a, b, c: 55 }; console.log(json); // {a: 12, b: 5, c: 55}方法在 json 里可以把
: function去掉let json = { a: 12, /* show: function(){ */ show(){ alert(this.a); // 12 }, }; json.show();
Promise
異步：操作之間沒有關系，可以同時進行多個操作，
同步：同時只能做一件事，
Promise.all
Promise : 用來消除異步操作，用同步一樣方式，來寫異步代碼，
const p1 = Promise(function (resolve,reject){ $.ajax({ url: 'arr.txt', dataType: 'json', success(arr){ resolve(arr); }, error(err){ reject(err); } }) }); const p2 = Promise(function (resolve,reject){ $.ajax({ url: 'json.txt', dataType: 'json', success(arr){ resolve(arr); }, error(err){ reject(err); } }) }); Promise.all([ p1,p2 ]).then(function (arr){ let [res1,res2] = arr; alert('成功',res1); console.log('成功',res2); },function (err){ alert('失敗',err; });簡寫
function createPromise(url){ return new Promise(function (resolve,reject){ $.ajax({ url, dataType: 'json', success(arr){ resolve(arr); }, error(err){ reject(err); } }) }); } Promise.all([ createPromise('arr.txt'), createPromise('json.txt') ]).then(function (arr){ let [res1,res2] = arr; alert('成功',res1); console.log('成功',res2); },function (err){ alert('失敗',err; });在更高的 JQuery 版本中， ajax 自帶 Promise 封裝 ，我們可以簡寫成
Promise.all([ $.ajax({url:'arr.txt',dataType:'json'}); $.ajax({url:'json.txt',dataType:'json'}); ]).then(function (arr){ let [res1,res2] = arr; alert('成功',res1); console.log('成功',res2); },function (err){ alert('失敗',err; });
Promise.race
race 競速，在多個請求中，那條請求地址先拿到資料，就先用那一條，
Promise.race([ $.ajax({url:'http://a1.baidu.com/data'}); $.ajax({url:'http://a3.baidu.com/data'}); $.ajax({url:'http://a4.baidu.com/data'}); $.ajax({url:'http://a2.baidu.com/data'}); ]);
Generator
*號
generator 是一個函式,它可以讓函式在執行的程序中停止（走走停停），
generator 是將一個函式拆分成多個小函式，通過 next() 來自動執行它里面的小函式，從而實作停止（走走停停），
generator 跟普通函式不一樣，它會回傳一個 generator 物件，
用法： 用
*號代替 generator ，需要引入 runner ，
function * show(){ alert('a'); yield; alert('b'); } const genObje= show(); console.log(genObje); genObje.next(); // a // genObje.next(); // b
yield
yield 傳參
在 next 傳遞引數，只會在 yield 后面起作用, yield 前面是接收不到 next 所傳遞的值.
在第一個 next 里傳值是沒有效果的，
function * show(){ alert('a'); yield; alert('b'); } const genObje= show(); console.log(genObje); genObje.next(); // a // genObje.next(); // b
yield 回傳
yield 可以在中間拿到中間結果，并對中間所拿到的結果進行一些操作
function * show(){ let data1 = yield 13; console.log(data1); let data2 = yield 21; console.log(data2); return 32; } let genObje = show(); let res1 = genObje.next(); console.log(res1); // {value: 13, done: false} let res2 = genObje.next(); console.log(res2); // {value: 21, done: false} let res3 = genObje.next(); console.log(res3); // {value: 32, done: true}
async/await
async function readData(){ let data1 = await $.ajax({ url:'data/1txt', dataType:'json' }); let data1 = await $.ajax({ url:'data/2txt', dataType:'json' }); let data1 = await $.ajax({ url:'data/3txt', dataType:'json' }); console.log(data1,data2,data3); } readData();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/946.html
標籤：JavaScript