前端面试大全之手写代码（一）

每日12题（高频基础）

1.构造函数继承

function Super(name,age){
    this.name = name;
    this.age = age;
    this.color = ['red','yellow','blue'];
    this.sayHi = function(){
        console.log('hi')
    }
    console.log(this)
}
function Sub(){
    Super.apply(this,arguments)
    this.height = 180;
}

var instance1 = new Sub('mengfeng',25);
var instance2 = new Sub('mengfeng123',24);
instance1.sayHi();

2.计时器

var i = 10;
let fn = () => {
    console.log(i--);
}
function mySetInterval(fn, delay, times) {
    let timer = setTimeout(function a() {
        fn()
        times--
        timer = setTimeout(a, delay)
        if (times <= 0) {
            clearTimeout(timer)
        }
    }, delay)
}
mySetInterval(fn, 1000, 10)

3.寄生组合继承

 function inheritPrototype(Sub,Super){
    var subPrototype=Object.create(Super.prototype)
    subPrototype.constructor=Sub
    Sub.prototype=subPrototype
    
  }
  function Super(name){
    this.name=name
  }
  Super.prototype.sayHi=function(){
    console.log(this.name)//ccdida
  }
  function Sub(name){
    Super.call(this,name)
  }
  inheritPrototype(Sub,Super)

  Sub.prototype.sayHello=function(){
    console.log('sayHello')
  }

  var instance1=new Sub('ccdida')
  console.log(instance1.__proto__)
  console.log(instance1.__proto__.__proto__)

4.柯里化函数

function add() {
    const _args = [...arguments];
    function fn() {
      _args.push(...arguments);
      return fn; //一直重复收集参数
    }
    fn.toString = function() {
      return _args.reduce((sum, cur) => sum + cur);
    }
    return fn;
  }
console.log(add(1)(2)(3)(4).toString())
console.log(add(1,2)(1, 2, 3)(2).toString())

5.千位符

// 将金额类型转为数字类型
function toNum(str) {
    return str.replace(/\,|\￥/g, "");
}

// 保留两位小数（四舍五入）
function toPrice(num) {
    num = parseFloat(toNum(num)).toFixed(2).toString().split(".");
    num[0] = num[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
    return "￥" + num.join(".");
}

// 保留两位小数（不四舍五入）
function toPrice1(num) {
    num = parseFloat(toNum(num).replace(/(\.\d{2})\d+$/,"$1")).toFixed(2).toString().split(".");
    num[0] = num[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
    return "￥" + num.join(".");;
}

// 不处理小数部分
function toPrice2(num) {
    var source = toNum(num).split(".");
    source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
    return "￥" + source.join(".")
}

console.log(toPrice('12312.236')) //￥12,312.24
console.log(toPrice1('12312.234')) //￥12,312.23
console.log(toPrice2('1232342312.234')) //￥1,232,342,312.234

6.深拷贝

function deepClone(obj,hash = new WeakMap()){
    if(obj == null) return obj;
    if(obj instanceof Date) return new Date(obj);
    if(obj instanceof RegExp) return new RegExp(obj);
    if(typeof obj !== 'object') return obj;
    if(hash.get(obj)) return hash.get(obj);
    let cloneObj = new obj.constructor;
    hash.set(obj,cloneObj);
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            cloneObj[key] = deepClone(obj[key],hash);
        }
    }
    return cloneObj;
}

let obj = {name:1,address:{x:1000}};
let d = deepClone(obj);
obj.address.x = 200;
console.log(d); //{name:1,address:{x:1000}}

7.数组扁平化

//递归实现
var arr = [1,2,[3,4,[5,6]]]
function flatten(arr){
    let result = []
    arr.forEach(item => {
        if(Array.isArray(item)){
            result = result.concat(flatten(item))
        }else{
            result.push(item)
        }
    });
    return result
}
console.log(flatten(arr)) //[ 1, 2, 3, 4, 5, 6 ]

//利用reduce函数迭代
var arr1 = [1,2,[3,4,[5,6]]]
function flatten1(arr){
    return arr.reduce((res,next) => {
        return res.concat(Array.isArray(next) ? flatten1(next) : next)
    },[])
}
console.log(flatten1(arr1)) //[ 1, 2, 3, 4, 5, 6 ]

8.原型链继承

//1.原型链继承
function Super(){
    this.color = ['red','yellow','black']
}
function Sub(){
}

Sub.prototype = new Super();
const instance1 = new Sub();
const instance2 = new Sub();
console.log(instance1.__proto__.color === instance2.__proto__.color)//true

9.组合继承

function Super(name,age){
    this.name = name;
    this.age = age;
    this.color = ['red','yellow','blue']
}

Super.prototype.sayHi = function(){
    console.log('hi')
}

function Sub(name,age,height){
    Super.apply(this,arguments)
    this.height = height;
}

Sub.prototype = new Super('w',22);
Sub.prototype.constructor = Sub;
console.log(Sub.prototype)
Sub.prototype.sayHello = function(){
    console.log('hello')
}

var instance1 = new Sub('mengfeng',23,180);
var instance2 = new Sub('mengfeng123',24,181);
console.log(instance1)

10.instanceof

function new_instance_of(leftValue,rightValue){
    let rightProto = rightValue.prototype;//取右边表达式的 prototype 值
    leftValue = leftValue.__proto__;//取左表达式的 __proto__ 值
    while(true){
        if(leftValue == null){
            return false;
        }
        if(leftValue === rightProto){
            return true;
        }
        leftValue = leftValue.__proto__;
    }
}
function Foo(){}
console.log(new_instance_of(Foo,Object))//true

11.promise.all

Promise.prototype.all = function(promises){
    let results = [];
    let promiseCount = 0;
    let promisesLength = promises.length;
    return new Promise(function(resolve,reject){
        for(let val of promises){
            Promise.resolve(val).then(function(res){
                promiseCount++;
                results[i] = res;
                if(promiseCount === promisesLength){
                    return resolve(results);
                }
            },function(err){
                return reject(err);
            })
        }
    })
}

let promise1 = new Promise(function(resolve) {
    resolve(1);
  });
  let promise2 = new Promise(function(resolve) {
    resolve(2);
  });
  let promise3 = new Promise(function(resolve) {
    resolve(3);
  });
  
  let promiseAll = Promise.all([promise1, promise2, promise3]);
  promiseAll.then(function(res) {
    console.log(res);
  });

12.promise.race

Promise.race = function(promises){
    //将可迭代对象转换为数组
    promises = Array.from(promises);
    return new Promise((resolve,reject)=>{
        if(promises.length === 0){
            //空的可迭代对象，用于pending状态
        }else{
            for(let i = 0;i < promises.length;i++){
                Promise.resolve(promises[i]).then((data)=>{
                    resolve(data);
                }).catch((reason)=>{
                    reject(reason)
                })
            }
        }
    })
}

let p1 = new Promise(function(resolve,reject){
    setTimeout(function(){
     resolve('success')
    },1000)
})

let p2 = new Promise(function(resolve,reject){
    setTimeout(function(){
     resolve('faild')
    },500)
})

Promise.race([p1,p2]).then(result=>{
console.log(result)             //  faild    faild耗时短
})