前端手撕

88 阅读1分钟
  1. 链式调用
class Math{
    constructor(number){
        this.number = number
    }
    add(number){
        this.number += number
        return this
    }
    subtract(number){
        this.number -= number
        return this
    }
    multiply(number){
        this.number = this.number * number
        return this
    }
    divide(number){
        if(!number){
            return null
        }
        this.number = this.number/number
        return this
    }
}
let math = new Math(1)
math.add(2).subtract(1).multiply(1).divide(1)
console.log(math.number)

2.随机打乱数组

let arr = [1,2,3,4,5,6,7,8,9]

function randomArray(arr){
    let len = arr.length
    let set = new Set()
    let newArr = new Array(len).fill(0)
    
    for(let i = 0;i<arr.length;i++){
        while(true){
            let num = Math.floor(Math.random()*len)
            if(!set.has(arr[num])){
                newArr[i] = arr[num]
                set.add(arr[num])
                arr.splice(num,1)
                arr.push(arr[num])
                len--
                break
            }
        }
    }
    return newArr
}
console.log(randomArray(arr))

3.红绿灯

function fn(num){
    for(var i = 0;i<num;i++){
        setTimeout(console.log,1000,i)
    }
}
fn(10)
/**
瞬间输出0,1,2,3,4,5,6,7,8,9
并且你改成let依然是瞬间输出0,1,2,3,4,5,6,7,8,9
应该是放入到任务队列之后这个数就确定了
如果没有settimeout,就是9个9
**/

function fn(num){
    for(var i = 0;i<num;i++){
        setTimeout(console.log,1000*i,i)
    }
}
fn(10)
/**
每隔1秒输出0,1,2,3,4,5,6,7,8,9
改成let也是一样的结果,如果没有setTimeout就是0-9瞬间输出
**/

function fn(num){
    let pro =  (num)=>{
        return new Promise(res=>{
            setTimeout(()=>res(num),1000*num)
        })
    }
    for(let i = 0;i<num;i++){
        pro(i).then(res=>{
            console.log(res)
        })
    }
}
fn(10)
/**
promise的写法
**/

async function fn(num){
    let pro =  (num)=>{
        return new Promise(res=>{
            setTimeout(()=>res(num),1000)
        })
    }
    for(let i = 0;i<num;i++){
        let result = await pro(i)
        console.log(result)
    }
}
fn(10)
/**
async await的写法
**/