es6學習6:一些新特性的實例練習
阿新 • • 發佈：2018-12-11
for gen als text 對象產生 ont 代理模式 content asp
// 先定義一個簡化輸出函數 window.print = function (oper, result) { result ? console.log(oper, ‘=>‘, result) : console.log(oper); }
1.------------------proxy------------------------
// 設置一個msg用來檢測上次操作是否成功變更 let msg = {status: 0, content: ‘‘}; // 設置proxy驗證規則 var studentValid = { get: function(target, key) { msg.status = 0; if (key in target) { return target[key]; } return ‘無相關記錄‘; }, set: function (target, key, newValue) { msg.status = 0; let oldValue = target[key]; if (!(key intarget)) { msg = ‘無相關屬性..‘; return ‘^_^‘; } if (mm.isEqual(oldValue, newValue)) { msg = ‘名稱相同, 無需更改‘; return ‘^_^‘; } if (key === ‘name‘ && !/[A-Za-z]+/.test(newValue)) {throw new Error(‘值類型錯誤‘); return ‘^_^‘; } if (key === ‘name‘ && (newValue.length === 1 || newValue.length > 6)) { throw new Error(‘長度設置錯誤..‘); return ‘^_^‘; } if (key === ‘age‘ && (newValue <= 0)) { throw new Error(‘值範圍設置錯誤..‘); return ‘^_^‘; } msg = {status: 1, content: `key: ${key} 更改為${newValue}`}; target[‘up_date‘] = Date(); return target[key] = newValue; }, has(target, key) { if (key === ‘up_date‘) { return false; } return ‘ ‘; }, deleteProperty(target, key) { if (/^_/.test(key)) { msg = {status: 1, content: `刪除了${key}屬性`}; target[‘up_date‘] = Date(); return delete target[key]; } return true; } }; // 代理模式處理數據 let student_1_orgin = {name: ‘avenda‘, age: ‘24‘, up_date: Date(), _deleteProp: ‘test‘}, student_1 = new Proxy(student_1_orgin, studentValid); delete student_1._deleteProp; print(student_1_orgin, msg);
2.------------------class每New一個對象產生一個新的序號------------------------
let authorDefault = { name: ‘avenda‘, age: 25 } class Father { constructor(name = "father") { this.data = { name: name, author: authorDefault } } } class Son extends Father { constructor(status = 0, msg = ‘‘) { super(); if (!Son.vol) { Son.vol = 0 } // 指定初始版本號為0 this.data.vol = Son.vol++; // 對象版本號 this.data.status = status; this.data.msg = msg; } static creatSonByErrorMsg(msg) { return new Son(0, msg).data; } static creatSonByError() { return new Son(0).data; } static creatSonBySuccess() { return new Son(1).data; } static creatSonBySuccessMsg(msg) { return new Son(1, msg).data; } } var son = Son.creatSonBySuccessMsg(‘創建成功‘); var son2 = Son.creatSonBySuccessMsg(‘創建成功‘); var son3 = Son.creatSonBySuccessMsg(‘創建成功‘); print(‘sucson‘, son); print(‘vol‘, son3.vol)
3.------------------Promise串行(比較麻煩的方法)------------------------
let [a, b, d] = [true, true, true]; let promiseA = new Promise((resolve, reject) => { setTimeout(() => { if (a) { resolve(() => { print(‘promise‘, ‘A‘) }); } else { reject(‘A執行錯誤‘); } }, 1000) }); let promiseB = new Promise((resolve, reject) => { setTimeout(() => { if (b) { resolve(() => { print(‘promise‘, ‘B‘) }); } else { reject(‘B執行錯誤‘); } }, 1000) }); let promiseC = new Promise((resolve, reject) => { setTimeout(() => { if (d) { resolve(() => { print(‘promise‘, ‘C‘) }); } else { reject(‘C執行錯誤‘); } }, 1000) });
4.------------------Promise串行(比較方便的方法)------------------------
let [a, b, d] = [true, true, true]; let promiseA = new Promise((resolve, reject) => { setTimeout(() => { if (a) { resolve(() => { print(‘promise‘, ‘A‘) }); } else { reject(‘A執行錯誤‘); } }, 1000) }); let promiseB = new Promise((resolve, reject) => { setTimeout(() => { if (b) { resolve(() => { print(‘promise‘, ‘B‘) }); } else { reject(‘B執行錯誤‘); } }, 1000) }); let promiseC = new Promise((resolve, reject) => { setTimeout(() => { if (d) { resolve(() => { print(‘promise‘, ‘C‘) }); } else { reject(‘C執行錯誤‘); } }, 1000) }); Promise.all( [promiseA,promiseB,promiseC] ).then((result)=>{ // result是對應的promiseA-C的resolve參數 result.forEach(item=>item()) print(‘全部執行完成...‘); },(msg)=>{ // 執行到某步錯誤時候對應的reject print(msg) })
5.------------------模擬叠代器原理寫個對象叠代器代理(讓對象像數組一樣操作, 並像java叠代器一樣叠代)----------------------
function iteratorProxy (target) { let _index = 0; let keys = Object.keys(target); let len = keys.length; let loop = false; return { next() { this.indexFilter(); if (_index < len - 1 && _index >= 0) { return { key: keys[_index], value: target[keys[_index++]], done: false } } else { try { return { key: keys[_index], value: target[keys[_index++]], done: true } } finally { if(loop){ _index = 0; } } } }, pre() { this.indexFilter(); if (_index < len && _index >= 0) { return { key: keys[_index], value: target[keys[_index--]], done: false } } else { loop ? _index = len - 1 : ‘‘; return { key: keys[_index], value: target[keys[_index--]], done: true } } }, hasNext() { return _index < len; }, hasPre() { return _index >= 0; }, get(index = _index) { this.indexFilter(); return (index >= 0 && index < len) ? { key: keys[index], value: target[keys[index]] } : null; }, getKey(index = _index) { this.indexFilter(); return (index >= 0 && index < len) ? keys[index] : null; }, getValue(index = _index) { this.indexFilter(); return (index >= 0 && index < len) ? target[keys[index]] : null; }, initIndex() { _index = 0; this.flushProp(); return this; }, getIndex() { return _index; }, delProp(keyIndex = _index) { // 刪除Key及對應值 delete target[keys[keyIndex]]; this.flushProp(); return this; }, setProp(obj) { Object.assign(target, obj); this.flushProp(); return this; }, getObj() { return target; }, setLoop(open=false){ loop = open; }, flushProp() { keys = Object.keys(target); len = keys.length; if (_index >= len) { _index = len - 1; } if (_index <= 0) { _index = 0; } return this; }, indexFilter(){ if(_index<0){ _index =0; return; } if(_index>=len){ _index=len-1; } } } }
// 測試
let obj = { name: ‘avenda‘, age: ‘245‘, ccc: ‘ccc‘ } let oI = iteratorProxy(obj); oI.setProp({ newName: ‘dog‘ }) // oI.setLoop(true); while(oI.hasNext()){ print(‘next‘,oI.next()) } while (oI.hasPre()) { print(‘pre‘,oI.pre()) } print(oI.getIndex())
6.------------------generator狀態機------------------------
let draw = function (count) { print(`剩余${count}次`) } let residue = function* (count) { while (count>0) { count--; yield draw(count); } } let start = residue(5); let btn = document.createElement(‘button‘); btn.id = ‘start‘; btn.textContent = "抽獎"; document.body.appendChild(btn); document.getElementById(‘start‘).addEventListener(‘click‘,function () { start.next(); },false)
7.------------------generator長輪詢------------------------
let ajax = function* () { yield new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve({code:0}) },200) }) } let pull = function () { let generator = ajax(); let step = generator.next(); step.value.then((d)=>{ if (d.code===0) { setTimeout(()=>{ console.log(‘wait‘) pull(); },1000); }else{ console.log(d); } }); } // pull()
8.---------------@decorator修飾器-------------------
let readonly = function (target, name, descriptor) { descriptor.writable = false; return descriptor; } class Test{ @readonly time(){ return ‘2017-03-11‘; } } let test = new Test(); let addName = function (target, name, descr) { target.staticProps = ‘hello‘; } @addName class Test2 { } console.log(Test2.staticProps)
9.---------------class + call-------------------
class A{ constructor() { this.a = ‘我是A的a‘; } } // noinspection JSAnnotator function doSth(args){ console.log(args); console.log(this.a) } let a = new A(); doSth.call(a,‘我是個小白‘);
es6學習6:一些新特性的實例練習