1、红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何使用Promise让三个灯不断交替重复亮灯？
function mylight(value,time){ return new Promise((resolve,reject) => { setTimeout((params) => { console.log(value); resolve() },time) }) } let step =()=>{ Promise.resolve() .then(() => { return mylight(‘red‘,3000) }) .then((res) => { return mylight(‘green‘,1000) }) .then((res) => { return mylight(‘yellow‘,1000) }) .then(res=>{ // 递归执行 step() }) } step()
2、async和await把异步改为同步，得到最新的state的值
使用Promise来封装setState(异步编程)
changeCount = (state)=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ this.setState(state) //resolve包裹成功时的结果 resolve(this.state.count) },100) }) }, pushRouter = async() => { // await this.setState({ // count:this.state.count+1 // }) const result = await this.changeCount({ count:this.state.count + 1 }) }
3、async，await结合try，catch使用捕获异常
async componentDidMount() { const { dispatch } = this.props try { const response = await dispatch({ type: "netValueQuery/queryListData", payload: {} }) if (response.httpStatus !== 200) { throw new Error(response.msg); } const json = await response.json(); this.setState({ data: json }); } catch (error) { console.log(error); } }
4、多个请求，后面的请求里需使用前面请求里返回的值
getSign(result){ return this.$post(`/share/saveRecord`) } getTask() { const actid = this.$route.query.id; return this.$get(`/lottery/powerTask/${actid}`); } async getReady(){ const task = await this.getTask() this.result = task.data.find(item => item.name.includes("分享")) const str = await this.getSign(this.result) }
5、实现多个请求并发执行，可以使用 Promise.all
const p1 = () => setTimeout(() => { console.log(1) }, 100)
const p2 = () => setTimeout(() => { console.log(2) }, 0)
const p3 = () => { console.log(3) }
async function promiseAll() {
const [result1, result2, result3] = await Promise.all([p1(), p2(), p3()])
}
promiseAll()
5、
function Person() { this.name = "志杰啊"; // 属性 this.age = 20; this.run = function () { //定义的方法 console.log(666) } };
Person.getInfo = function () { // 添加静态的方法 console.log("添加静态方法！") } //web类 继承Person类 原型链+对象冒充的组合继承模式 function Web() { Person.call(this); /* 对象冒充实现继承*/ } var w = new Web(); // 实例化w Web继承Person的属性与方法 w.run(); w.work(); // 报错 // 对象继承可以继承构造函数里面的属性和方法 但是无法继承原型链的上面的属性和方法
6、ES5原型链继承（未考虑父类构造可传参的场景）所谓原型链继承，就是让子类构造函数的 prototype 指向父类的实例对象
function Person() {
this.name = "志杰啊"; // 属性
this.age = 20;
this.run = function () { //定义的方法
console.log(666)
}
};
Person.prototype.sex = "男";
Person.prototype.work = function () {
console.log(this.name + "在认真学习typescript")
}
function Web() {
};
Web.prototype = new Person(); // 原型链的实现的继承
// 实例化
var w = new Web();
w.run();
console.log(w.name)
// 通过原型链继承的方法既能够继承构造函数里面的方法 也能继承原型链里面的方法
w.work(); // 志杰啊在认真学习typescript
7、ES5中组合继承：指的是将原型链和构造函数的技术组合到一起来实现继承。其背后的思路就是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。
function A() { this.a = "a"; } A.prototype.b = function() { console.log("b"); } function B() { A.call(this); } B.prototype = new A(); var b = new B(); // {a: "a"} b.__proto__; // {a: "a"} b.__proto__.__proto__; // {b: f}
8、ES6实现继承
//父类:两个属性，一个普通方法，一个静态方法 class Person{ constructor(name,age){ this.name= name; this.age = age; } sayName(){ console.log("我的名字是： "+this.name); } static sayHello(){ console.log("hello!!!!!!"); } } //子类继承父类 class Chinese extends Person{ constructor(name,age,addr){ super(name,age);//必须现在最前面 this.addr = addr; } sayMyaddr(){ console.log("我是中国人，我住在："+this.addr); } } //测试 var wlk = new Chinese("wk",20,"中国-重庆"); wlk.sayName(); wlk.sayMyaddr(); Person.sayHello(); Chinese.sayHello();//静态方法也可以被继承
9、手写一个防抖函数
function debounce(callback, time) {return function () { if (timer) { clearTimeout(timer)
timer = null } timer = setTimeout(callback, time) } }
10、requestIdleCallback实现一帧执行多任务举例
let taskQueue = [ () => { console.log(‘task1 start‘) console.log(‘task1 end‘) }, () => { console.log(‘task2 start‘) // sleep(950) console.log(‘task2 end‘) }, () => { console.log(‘task3 start‘) console.log(‘task3 end‘) } ] const performUnitWork = (deadline) => { // 取出第一个队列中的第一个任务并执行 console.log(`此帧的剩余时间为: ${deadline.timeRemaining()}`) taskQueue.shift()() } const workloop = (deadline) => { // 如果此帧剩余时间大于0或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务 // 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器 while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskQueue.length > 0) { performUnitWork(deadline) } // 如果还有未完成的任务，继续调用requestIdleCallback申请下一个时间片 if (taskQueue.length > 0) { window.requestIdleCallback(workloop, { timeout: 1000 }) } } requestIdleCallback(workloop, { timeout: 1000 })
11、实现一个sleep函数
async function test() {
console.log(‘Hello‘)
await sleep(1000)
console.log(‘world!‘)
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
test()
或
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time)
}, time)
})
}
sleep(5000).then(
(time) => {
console.log(`你睡了${time / 1000}s，然后做你的事情`)
}
)
12、实现数组push
Array.prototype.push2 = function(...arrs) { let len = this.length for(var i = 0; i < arrs.length; i++) { this[this.length] = arrs[i] } return this.length }
13、实现数组map
Array.prototype.map2 = function(callback) { let newArr = [] for(var i = 0; i < this.length; i++) { newArr.push(callback(this[i], i)) } return newArr } var arr = [1,2,3,4,5,6,7,8,9] console.log(arr.map2((item,index) => { return item * 2 }))
15、react setState 异步打印
class Root extends Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { let that = this; that.setState({ count: that.state.count + 1 }); console.log(that.state.count); // 打印出 0 that.setState({ count: that.state.count + 1 }); console.log(that.state.count); // 打印出 0 setTimeout(function(){ that.setState({ count: that.state.count + 1 }); console.log(that.state.count); // 打印出 2 }, 0); setTimeout(function(){ that.setState({ count: that.state.count + 1 }); console.log(that.state.count); // 打印出 3 }, 0); } render() { return ( <h1>{this.state.count}</h1> ) } }
16、队列调用
let fun1 = () => {console.log(1)}
let fun2 = () => {console.log(2)}
let fun3 = () => {console.log(3)}
let fun4 = () => {console.log(4)}
let fun5 = () => {console.log(5)}
let fun6 = () => {console.log(6)}
let arr = [fun1, fun2, fun3, fun4, fun5, fun6]
function sleep(callBack){
return new Promise((resolve, regect) => {
setTimeout(() => {resolve(); callBack(); arr.shift()}, 2000)
})
}
function row(){
if(arr && arr.length>0){
sleep(arr[0]).then(() => {
row()
console.log(‘123654‘)
})
}
}
17、保证每个时间点只有两个任务执行
let fun1 = () => {console.log(1)}
let fun2 = () => {console.log(2)}
let fun3 = () => {console.log(3)}
let fun4 = () => {console.log(4)}
let fun5 = () => {console.log(5)}
let fun6 = () => {console.log(6)}
let fun7 = () => {console.log(7)}
let fun8 = () => {console.log(8)}
let fun9 = () => {console.log(9)}
let fun10 = () => {console.log(10)}
let fun11 = () => {console.log(11)}
let arr = [fun1, fun2, fun3, fun4, fun5, fun6, fun7, fun8, fun9, fun10, fun11]
function sleep(callBack){
return new Promise((resolve, regect) => {
let randon = Math.floor(Math.random() * 5000)
setTimeout(() => {resolve(); callBack(); console.log(randon)}, randon)
})
}
function row(){
if(arr && arr.length>0){
sleep(arr.shift()).then(() => {
row()
})
}
}
row()
row()
18、实现对数据的监听，当数据改变后触发操作
function createProxy(data) { if (typeof data === ‘object‘ && data.toString() === ‘[object Object]‘) { for (let k in data) { if (typeof data[k] === ‘object‘) { defineObjectReactive(data, k, data[k]) } else { defineBasicReactive(data, k, data[k]) } } } } function defineObjectReactive(obj, key, value) { // 递归 createProxy(value) obj[key] = new Proxy(value, { set(target, property, val, receiver) { if (property !== ‘length‘) { RunAuto() // console.log(‘Set %s to %o‘, property, val) } return Reflect.set(target, property, val, receiver) } }) } function defineBasicReactive(obj, key, value) { Object.defineProperty(obj, key, { enumerable: true, configurable: false, get() { return value }, set(newValue) { if (value === newValue) return console.log(`发现 ${key} 属性 ${value} -> ${newValue}`) value = newValue } }) } let fun1 = () => {console.log(1)} let fun2 = () => {console.log(2)} let fun3 = () => {console.log(3)} let fun4 = () => {console.log(4)} let fun5 = () => {console.log(5)} let fun6 = () => {console.log(6)} let fun7 = () => {console.log(7)} let fun8 = () => {console.log(8)} let fun9 = () => {console.log(9)} let fun10 = () => {console.log(10)} let fun11 = () => {console.log(11)} let arr = [fun1, fun2, fun3, fun4, fun5, fun6, fun7, fun8, fun9] let data = {arr: arr, obj:{aaa: ‘aaa‘}} function sleep(callBack){ return new Promise((resolve, regect) => { let randon = Math.floor(Math.random() * 5000) setTimeout(() => {resolve(); callBack(); console.log(randon)}, randon) }) } function row(){ if(arr && arr.length>0){ sleep(arr.shift()).then(() => { row() }) } } function RunAuto(){ row(); row() } createProxy(data) data.arr.push(fun10, fun11)//数组改变后触发RunAuto() data.obj.aaa = ‘aaa111‘//发现 aaa 属性 aaa -> aaa111
19、节流函数
// 思路：在规定时间内只触发一次 function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() return function () { let context = this let arg = arguments let now = Date.now() if (now - prev >= delay) { fn.apply(context, arg) prev = Date.now() } } }