前端秋招面经

1. 模拟实现函数的call、apply、bind方法    ★★

   /* 先将传入的指定执行环境的对象 context 取到
   将需要执行的方法(调用call的对象) 作为 context 的一个属性方法fn
   处理传入的参数， 并执行 context的属性方法fn， 传入处理好的参数
   删除私自定义的 fn 属性
   返回执行的结果 */
   // 模拟 call 方法
   Function.prototype.defineCall = function (context) {
       context = context || window;
       context.fn = this; //this指向 sayName函数实例
       let args = [];
       for (let i = 1; i < arguments.length; i++) { //i从1开始 
           args.push(arguments[i]);
       } //或者args = [...arguments].slice(1);
       let result = context.fn(args.join(','));
       delete context.fn;
       return result;
   }
   let sayName = function (age) {
       console.log('current name: ' + this.name, "current age: " + age);
   }
   let obj1 = {
       name: "obj's name"
   }
   sayName.defineCall(obj1, 22); //this指向 sayName函数实例
   // current name: obj's name current age: 22
   
   
   // 模拟 apply 方法
   Function.prototype.defineApply = function (context, arr) {
       context = context || window;
       context.fn = this;
       let result;
       if (!arr) { // 第二个参数不传
           result = context.fn();
       } else { // 第二个参数是数组类型
           let args = [];
           for (let i = 0; i < arr.length; i++) { //i从0开始
               args.push(arr[i]);
           }
           result = context.fn(args.join(','));
       }
       delete context.fn;
       return result;
   }
   let obj2 = {
       name: ['Tom', 'Johy', 'Joe', 'David']
   }
   sayName.defineApply(obj2, [3, 4, 5, 6, 7]);
   // current name: Tom,Johy,Joe,David current age: 3,4,5,6,7
   
   
   //用call、apply模拟实现bind
   Function.prototype.bind = function (context) {
       let self = this; // 保存函数的引用
       return function () { // 返回一个新的函数
           // console.log(arguments);
           // return self.apply(context, arguments);
           return self.call(context, arguments);
       }
   };
   
   let obj = {
       name: 'seven'
   }
   
   let func = function () {
       console.log(this.name)
   }.bind(obj);
   func('zhangsan', 20);

   
   
2. 模拟实现函数节流、防抖方法        ★★★

   function debounce(fn, delay) {//防抖
     // 维护一个 timer，用来记录当前执行函数状态
     let timer = null;
   
     return function() {
       // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
       let context = this;
       let args = arguments;
       // 清理掉正在执行的函数，并重新执行
       clearTimeout(timer);
       timer = setTimeout(function() {
         fn.apply(context, args);
       }, delay);
     }
   }
   let flag = 0; // 记录当前函数调用次数
   // 当用户滚动时被调用的函数
   function foo() {
     flag++;
     console.log('Number of calls: %d', flag);
   }
   
   // 在 debounce 中包装我们的函数，过 2 秒触发一次
   document.body.addEventListener('scroll', debounce(foo, 2000));
   
   function throttle(func, delay){//节流
     let timer = null;
   
     return function(){
       let context = this;
       let args    = arguments;
       if(!timer){
         timer = setTimeout(function(){
           func.apply(context, args);
           timer = null;
         }, delay);
       }
     }
   }

   
   
3. 模拟实现对象的深拷贝        ★★

   //第一种：JSON.parse(JSON.stringify())方法实现深拷贝
   var obj={a:"hello",b:1,c:true,d:[1,2],e:{x:1,y:2},f:function(){console.log("copytest");},g:null,h:undefined};
   var copyobj=JSON.parse(JSON.stringify(obj));
   console.log(copyobj);
   copyobj.a="change";
   copyobj.d[0]=9;
   copyobj.e.x=8;
   console.log(obj);
   
   
   //第二种：递归的方法实现深拷贝
   function deepclone(obj,copyobj){
       var copyobj=copyobj||{};
       for (var keys in obj) { //使用for..in进行遍历   数组的话keys为0,1..... keys是string类型
           if(obj.hasOwnProperty(keys)){//剥离原型链的数据
               if((typeof(obj[keys])) ==='object' && obj[keys]!==null){//判断是否为引用数据类型
                   if (Object.prototype.toString.call(obj[keys]) === '[object Array]') { //Object原型方法得到类型
                       copyobj[keys]=[];
                   }else{
                       copyobj[keys]={};
                   }
                   deepclone(obj[keys],copyobj[keys]);
               }else{
                   copyobj[keys]=obj[keys];
               }
           }
       }
       return copyobj;
   }

   
   
4. 嵌套数组指定层次展开 flat扁平化（多种方法，至少掌握两种）★★★

   // 嵌套数组指定层次展开   flat扁平化
   // 1. 普通方法 递归
   function flattenMd() {
       let result = []
       return function flatten(arr) {//闭包
           arr.forEach(item => {
               if (Array.isArray(item)) {
                   flatten(item)
               } else {
                   result.push(item)
               }
           })
           return result
       }
   }
   // var ary = [1, [2, [3, [4, 5]]], 6]
   // flattenMd()(ary);  函数柯里化  部分求值
   
   //2.concat  与方法1类似 没用闭包
   function flattenMd(arr) {
       let result = [] // 利用函数作用域保存result var result = []也可
       arr.forEach(item => {
           if (Array.isArray(item)) {
               result = result.concat(flattenMd(item))
           } else {
               result.push(item)
           }
       })
       return result
   }
   
   //3. reduce 
   function flattenMd(arr) { //.concat([3,4])和.concat(3,4)均可
       return arr.reduce((prev, item) => prev.concat(Array.isArray(item) ? flattenMd(item) : item), [])
   }
   
   // 4. 展开运算符
   function flattenMd(arr) {
       let flatten = arr => [].concat(...arr)//可去掉一层[]
       return flatten(arr.map(item => Array.isArray(item) ? flattenMd(item) : item))
   }
   
   // 5. join和split组合（ 只适用字符串数组， 最简单粗暴）
   //[ '1', '2', '3', '4', '5', '6' ] 得到的是字符串数组  再转换一下才行
   function flattenMd(arr) {
       return arr.join().split(',')
       //join() 方法用于把数组中的所有元素放入一个字符串 默认用,隔开
   }

   
   
5. 模拟实现 reduce 数组方法    ★

   //reduce（）函数接受两个参数，一个函数一个累积变量的初始值。
   //函数有四个参数：累计变量初值（默认第一个成员），当前变量值（默认第二个成员），当前位置，数组自身。
   //arr.reduce(function(prev, cur, index, arr){}, initialValue)
   Array.prototype.myReduce=function(fn,base){
       if(typeof fn !== 'function'){
           throw new TypeError("arguments[0] is not a function");//TypeError是错误的类型之一：类型错误
       }
   
       var initialArr=this;//调用myReduce()函数的当前对象
       var arr=initialArr.concat();//目的是返回一个等于初始数组的新数组，后面的操作都基于arr，这样初始数组不会发生改动
       var index,newValue;
       
       if(arguments.length==2){
           arr.unshift(base);
           index = 0; //！！当前位置 指的是当前变量（第二个参数）针对调用该方法的数组位置即initialArr
       }else{
           index=1;
       }
   
       if(arr.length===1){//长度为1 直接返回
           newValue=arr[0];
       }
   
       while(arr.length>1){
           newValue=fn.call(null,arr[0],arr[1],index,initialArr);
           index++;
           arr.splice(0,2,newValue);//删除前两位 然后把累加值添加到第一位
       }
       return newValue;
   };

   
   
6. 模拟实现数组map方法    ★★

   // 模拟实现map
   // arr.map(function (currentValue, index, arr) {
   // })
   // currentValue 必须。 当前元素的值
   // index 可选。 当期元素的索引值
   // arr 可选。 当期元素属于的数组对象
   
   Array.prototype.newMap = function (fn) { //写法一
       var newArr = [];
       for (var i = 0; i < this.length; i++) {
           newArr.push(fn(this[i], i, this)) //this指向调用newMap方法的数组
       }
       return newArr;
   }
   
   // arr.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue？)
   // reduce若不指定初始值， 那么第一次迭代的 previousValue 为 ar[[0], currentValue 为 arr[1], currentIndex 为 1，
   // 若指定初始值， 那么第一次迭代的 previousValue 为 initialValue, currentValue为 arr[0], currentIndex 为0.
   
   Array.prototype.newMap = function (fn, Arg) { ////写法二：用数组的reduce方法实现数组的map
       var res = [];
       this.reduce((prev, curr, index, array) => {
           res.push(fn.call(Arg, curr, index, array));
       }, 0) //指定初始值initialValue=0，所以从currentIndex=0开始，即第一个开始  不这样会缺第一项，结果为[3,4]
       return res;
   }
   
   
   let arr = [1, 2, 3];
   let res = arr.newMap((a) => a + 1);
   console.log(res); //[2,3,4]

   
   
7. 模拟实现Array.fill()、Array.filter()    ★★
   array.fill(value, start, end)
   value 必需。填充的值。start 可选。开始填充位置。end 可选。停止填充位置 (默认为 array.length)

   Array.prototype.myFill = function (value, start = 0, end = this.length) {
       for (let i = start; i < end; i++) {
           this[i] = value;
       }
   }

   Array.filter()

   Array.prototype.myFilter = function myFilter(fn, context) {
       if (typeof fn !== "function") {
           throw new TypeError(`${fn} is not a function`);
       }
       let arr = this;
       let temp = [];
       for (let i = 0; i < arr.length; i++) {
           let result = fn.call(context, arr[i], i, arr);
           if (result) temp.push(arr[i]);
       }
       return temp;
   };

   
   
8. 模拟实现Array.find()、Array.findIndex()★★
   Array.find()
   用于找出第一个符合条件的数组成员，参数为一个回调函数
   [1, 4, -5, 10].find((n) => n < 0) // -5

   Array.prototype.myFind = function (fn, start = 0, end = this.length) {
       for (let i = start; i < end; i++) {
           if (fn.call(this, this[i], i, this)) {
               return this[i]
           }
       }
   }

   Array.findIndex()

   Array.prototype.myFindIndex = function (fn, start = 0, end = this.length) {
       for (let i = start; i < end; i++) {
           if (fn.call(this, this[i], i, this)) {
               return i
           }
       }
       return -1
   }

   
   
9. 模拟实现Promise.all方法(Promise.race也需要了解)★★

    //promise.all()
     function myall(proArr) {
       return new Promise((resolve, reject) => {
         let ret = []
         let count = 0
         let done = (i, data) => {
           ret[i] = data
           if(++count === proArr.length) resolve(ret)
         }
         for (let i = 0; i < proArr.length; i++) {
           proArr[i].then(data => done(i,data) , reject)
         }
       })
     }
     
     
   //promise.race();这么简单得益于promise的状态只能改变一次，即resolve和reject都只被能执行一次
    function myrace(proArr) {
       return new Promise(function (resolve, reject) {
         for(let i=0;i<proArr.length;i++){
           proArr[i].then(resolve,reject);
         }
       })
     }

   
   
10. 使用原生的JavaScript实现ajax请求（也可能让你说ajax实现原理，答案一样）★★★

    //手写3遍以上
    var xhr = new XMLHttpRequest();// 创建XMLHttqRequest
    var url = 'https://bbin.com';
    xhr.onreadystatechange=function(){// 监听状态码的变化，每次变化 均执行
        if(xhr.readyState===4){
    
            if (xhr.status === 200) { // 服务端 状态码
                console.log(xhr.responseText); //服务器返回的响应文本
            }else{
                console.error(xhr.statusText); //状态码的文本描述，如200的statusText是ok
            }
        
        }
    }
    
    xhr.open('GET', url, true); // 初始化请求参数，还没发送请求   true表示异步
    xhr.send(null); // 向服务器发送请求,但是不带有数据发送过去,一般在get方式发送时候多使用这个方式

    
    
11. 模拟实现构造函数new的过程（也可能让你口述new的过程，答案一样）★★★

    function myNew(constructor,params){
      var args = [].slice.call(arguments);
      var constructor = args.shift();
      var obj = new Object();
      obj.__proto__ = constructor.prototype;
      var res = constructor.apply(obj,args);
      return (typeof res === 'object' && typeof res !== null) ? res : obj;
    }

    
    
12. 模拟实现Object.create方法    ★★

    // 用于创建一个新对象,被创建的对象继承另一个对象(o)的原型
    function createObj(o) {//传入的参数o为返回实例的__porto__,也就是实例构造函数的显示原型
        function F() {}//构造函数
        F.prototype = o;
        return new F();//返回实例
    }

    
    
13. 模拟实现instanceof的功能        ★★★

    function instanceofObj(a, b) {
        // 模拟 a instanceof b
        let prototypeB = b.prototype;
        let protoA = a.__proto__;
        let state = false;
        while (true) {
            if (protoA == null) { // 可能是 undefined 
                state = false;
                break;
            }
            if (prototypeB === protoA) {
                state = true;
                break;
            }
            protoA = protoA.__proto__;
        }
        return state;
    }
    console.log(instanceofObj([], Array));
    instanceofObj([], Array); //true

    
    
14. 使用setTimeout实现setInterval方法 ★★

    function mysetinterval(fn,time){
        console.log("利用steTimeout实现setInterval");
        function interval(){//执行该函数，异步被挂起time时间后在执行，一上来就执行fn
            setTimeout(interval,time);//异步
            //好，time时间过去，这个异步被执行，而内部执行的函数正是interval，就相当于进了一个循环，递归
            fn();//同步
        }
        setTimeout(interval,time);//interval被延迟time时间执行
    }

    
    
15. 实现jsonp★★★

    var newscript=document.createElement('script');
    newscript.src='https://sp0.baidu.com/su?wd=Java&cb=foo';
    document.body.appendChild(newscript);
    function foo(data) { //callback函数要绑定在window对象上
       console.log(data);
    }

    
    
16. promise 实现sleep函数★★

    async function test() {
        console.log('开始');
        await sleep(4000);
        console.log('结束');
    }
     
    function sleep(ms) {
        return new Promise(resolve => {
            setTimeout(resolve, ms);
        })
    }
    test();

    
    
17. 实现promise retry重试★
    实现函数myGetData，也返回一个promise，但是有失败重试功能

    function myGetData(getData, times, delay) {//retry函数
    return new Promise(function (resolve, reject) {
        function attempt() {
            getData().then(resolve).catch(function (erro) {
                console.log(`还有 ${times} 次尝试`)
                if (0 == times) {
                    reject(erro)
                } else {
                    times--
                    setTimeout(attempt(), delay)
                }
            })
        }
        attempt()
    })
    }

    
    
18. js实现观察者模式★

    //ES6 实现观察者模式代码：（观察订阅模式）
    const queuedObservers = new Set();
    const observe = fn => queuedObservers.add(fn); // 依赖收集  Vue中的dep
    const observable = obj => new Proxy(obj, {set});// Proxy和Reflect一一对应
    function set(target, key, value, receiver){
        const result = Reflect.set(target, key, value, receiver); // 执行set
        queuedObservers.forEach(observe => observe()); // 派发更新
        return result;
    }
    
    // 使用 观察者模式实例
    const person = observable({
        name: 'Sun',
        age: 30
    });
    
    function print(){
        console.log(`name: ${person.name}, age: ${person.age}`);
    }
    observe(print);
    
    person.age = 31;
    // name: Sun, age: 31

    
    

数据结构和算法