看完这个彻底摆脱初级前端(面试高频)

清疚 2022-12-27 08:58 82阅读 0赞

### 文章目录 ###

*  前言
 *   *  01.数组扁平化
     *   *  方法一：使用flat()
         *  方法二：利用正则
         *  方法三：正则改良版本
         *  方法四：使用reduce
         *  方法五：函数递归
     *  02.数组去重
     *   *  方法一：利用Set
         *  方法二：两层for循环+splice
         *  方法三：利用indexOf
         *  方法四：利用include
         *  方法五：利用filter
         *  方法六：利用Map
     *  03.类数组转化为数组
     *   *  方法一：Array.from
         *  方法二：Array.prototype.slice.call()
         *  方法三：扩展运算符
         *  方法四：利用concat
     *  04.Array.prototype.filter()
     *  05.Array.prototype.map()
     *  06.Array.prototype.forEach()
     *  07.Array.prototype.reduce()
     *  08.Function.prototype.apply()
     *  09.Function.prototype.call
     *  10.Function.prototype.bind
     *  11.debounce（防抖）
     *  12.throttle（节流）
     *  13.函数珂里化
     *  14.模拟new操作
     *  15.instanceof
     *  16.原型继承
     *  17.Object.is
     *  18.Object.assign
     *  19.深拷贝
     *  20.Promise
     *  21.Promise.all
     *  22.Promise.race
     *  23.Promise并行限制
     *  24.JSONP
     *  25.AJAX
     *  26.event模块
     *  27.图片懒加载
     *  28.滚动加载
     *  29.渲染几万条数据不卡住页面
     *  30.打印出当前网页使用了多少种HTML元素
     *  31.将VirtualDom转化为真实DOM结构
     *  32.字符串解析问题

--------------------

# 前言 #

作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手撕JS问题，这些都是高频面试题，完全理解之后定能彻底摆脱初级前端。

--------------------

## 01.数组扁平化 ##

数组扁平化是指将一个多维数组变为一个一维数组

const arr = [1, [2, [3, [4, 5]]], 6];
    // => [1, 2, 3, 4, 5, 6]

### 方法一：使用flat() ###

const res1 = arr.flat(Infinity);

### 方法二：利用正则 ###

const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');

但数据类型都会变为字符串

### 方法三：正则改良版本 ###

const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');

### 方法四：使用reduce ###

const flatten = arr => { 
      return arr.reduce((pre, cur) => { 
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
      }, [])
    }
    const res4 = flatten(arr);

### 方法五：函数递归 ###

## 02.数组去重 ##

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', { }, { }];
    // => [1, '1', 17, true, false, 'true', 'a', {}, {}]

### 方法一：利用Set ###

const res1 = Array.from(new Set(arr));

### 方法二：两层for循环+splice ###

### 方法三：利用indexOf ###

const unique2 = arr => { 
      const res = [];
      for (let i = 0; i < arr.length; i++) { 
        if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
      }
      return res;
    }

当然也可以用include、filter，思路大同小异。

### 方法四：利用include ###

const unique3 = arr => { 
      const res = [];
      for (let i = 0; i < arr.length; i++) { 
        if (!res.includes(arr[i])) res.push(arr[i]);
      }
      return res;
    }

### 方法五：利用filter ###

const unique4 = arr => { 
      return arr.filter((item, index) => { 
        return arr.indexOf(item) === index;
      });
    }

### 方法六：利用Map ###

## 03.类数组转化为数组 ##

类数组是具有**length**属性，但不具有数组原型上的方法。常见的类数组有**arguments**、DOM操作方法返回的结果。

### 方法一：Array.from ###

Array.from(document.querySelectorAll('div'))

### 方法二：Array.prototype.slice.call() ###

Array.prototype.slice.call(document.querySelectorAll('div'))

### 方法三：扩展运算符 ###

[...document.querySelectorAll('div')]

### 方法四：利用concat ###

Array.prototype.concat.apply([],document.querySelectorAll('div'));

## 04.Array.prototype.filter() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center]

Array.prototype.filter = function(callback, thisArg) { 
      if (this == undefined) { 
        throw new TypeError('this is null or not undefined');
      }
      if (typeof callback !== 'function') { 
        throw new TypeError(callback + 'is not a function');
      }
      const res = [];
      // 让O成为回调函数的对象传递（强制转换对象）
      const O = Object(this);
      // >>>0 保证len为number，且为正整数
      const len = O.length >>> 0;
      for (let i = 0; i < len; i++) { 
        // 检查i是否在O的属性（会检查原型链）
        if (i in O) { 
          // 回调函数调用传参
          if (callback.call(thisArg, O[i], i, O)) { 
            res.push(O[i]);
          }
        }
      }
      return res;
    }

对于>>>0有疑问的：解释>>>0的作用

## 05.Array.prototype.map() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 1]

Array.prototype.map = function(callback, thisArg) { 
      if (this == undefined) { 
        throw new TypeError('this is null or not defined');
      }
      if (typeof callback !== 'function') { 
        throw new TypeError(callback + ' is not a function');
      }
      const res = [];
      // 同理
      const O = Object(this);
      const len = O.length >>> 0;
      for (let i = 0; i < len; i++) { 
        if (i in O) { 
          // 调用回调函数并传入新数组
          res[i] = callback.call(thisArg, O[i], i, this);
        }
      }
      return res;
    }

## 06.Array.prototype.forEach() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 2]

forEach跟map类似，唯一不同的是forEach是没有返回值的。

Array.prototype.forEach = function(callback, thisArg) { 
      if (this == null) { 
        throw new TypeError('this is null or not defined');
      }
      if (typeof callback !== "function") { 
        throw new TypeError(callback + ' is not a function');
      }
      const O = Object(this);
      const len = O.length >>> 0;
      let k = 0;
      while (k < len) { 
        if (k in O) { 
          callback.call(thisArg, O[k], k, O);
        }
        k++;
      }
    }

## 07.Array.prototype.reduce() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 3]

Array.prototype.reduce = function(callback, initialValue) { 
      if (this == undefined) { 
        throw new TypeError('this is null or not defined');
      }
      if (typeof callback !== 'function') { 
        throw new TypeError(callbackfn + ' is not a function');
      }
      const O = Object(this);
      const len = this.length >>> 0;
      let accumulator = initialValue;
      let k = 0;
      // 如果第二个参数为undefined的情况下
      // 则数组的第一个有效值作为累加器的初始值
      if (accumulator === undefined) { 
        while (k < len && !(k in O)) { 
          k++;
        }
        // 如果超出数组界限还没有找到累加器的初始值，则TypeError
        if (k >= len) { 
          throw new TypeError('Reduce of empty array with no initial value');
        }
        accumulator = O[k++];
      }
      while (k < len) { 
        if (k in O) { 
          accumulator = callback.call(undefined, accumulator, O[k], k, O);
        }
        k++;
      }
      return accumulator;
    }

## 08.Function.prototype.apply() ##

第一个参数是绑定的this，默认为window，第二个参数是数组或类数组

Function.prototype.apply = function(context = window, args) { 
      if (typeof this !== 'function') { 
        throw new TypeError('Type Error');
      }
      const fn = Symbol('fn');
      context[fn] = this;
    
      const res = context[fn](...args);
      delete context[fn];
      return res;
    }

## 09.Function.prototype.call ##

于call唯一不同的是，call()方法接受的是一个参数列表

Function.prototype.call = function(context = window, ...args) { 
      if (typeof this !== 'function') { 
        throw new TypeError('Type Error');
      }
      const fn = Symbol('fn');
      context[fn] = this;
    
      const res = this[fn](...args);
      delete this.fn;
      return res;
    }

## 10.Function.prototype.bind ##

Function.prototype.bind = function(context, ...args) { 
      if (typeof this !== 'function') { 
        throw new Error("Type Error");
      }
      // 保存this的值
      var self = this;
    
      return function F() { 
        // 考虑new的情况
        if(this instanceof F) { 
          return new self(...args, ...arguments)
        }
        return self.apply(context, [...args, ...arguments])
      }
    }

## 11.debounce（防抖） ##

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

## 12.throttle（节流） ##

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。

节流常应用于鼠标不断点击触发、监听滚动事件。

## 13.函数珂里化 ##

> 指的是将一个接受多个参数的函数 变为 接受一个参数返回一个函数的固定形式，这样便于再次调用，例如f(1)(2)

经典面试题：实现add(1)(2)(3)(4)=10; 、 add(1)(1,2,3)(2)=9;

## 14.模拟new操作 ##

3个步骤：

1.  以ctor.prototype为原型创建一个对象。
2.  执行构造函数并将this绑定到新创建的对象上。
3.  判断构造函数执行返回的结果是否是引用数据类型，若是则返回构造函数执行的结果，否则返回创建的对象。

function newOperator(ctor, ...args) { 
      if (typeof ctor !== 'function') { 
        throw new TypeError('Type Error');
      }
      const obj = Object.create(ctor.prototype);
      const res = ctor.apply(obj, args);
    
      const isObject = typeof res === 'object' && res !== null;
      const isFunction = typeof res === 'function';
      return isObject || isFunction ? res : obj;
    }

## 15.instanceof ##

**instanceof**运算符用于检测构造函数的**prototype**属性是否出现在某个实例对象的原型链上。

const myInstanceof = (left, right) => { 
      // 基本数据类型都返回false
      if (typeof left !== 'object' || left === null) return false;
      let proto = Object.getPrototypeOf(left);
      while (true) { 
        if (proto === null) return false;
        if (proto === right.prototype) return true;
        proto = Object.getPrototypeOf(proto);
      }
    }

## 16.原型继承 ##

这里只写寄生组合继承了，中间还有几个演变过来的继承但都有一些缺陷

function Parent5) { 
      this.name = 'parent';
    }
    function Child() { 
      Parent.call(this);
      this.type = 'children';
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;

## 17.Object.is ##

**Object.is**解决的主要是这两个问题：

+0 === -0  // true
    NaN === NaN // false

const is= (x, y) => { 
      if (x === y) { 
        // +0和-0应该不相等
        return x !== 0 || y !== 0 || 1/x === 1/y;
      } else { 
        return x !== x && y !== y;
      }
    }

## 18.Object.assign ##

**Object.assign()** 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（请注意这个操作是浅拷贝）

Object.defineProperty(Object, 'assign', { 
      value: function(target, ...args) { 
        if (target == null) { 
          return new TypeError('Cannot convert undefined or null to object');
        }
    
        // 目标对象需要统一是引用数据类型，若不是会自动转换
        const to = Object(target);
    
        for (let i = 0; i < args.length; i++) { 
          // 每一个源对象
          const nextSource = args[i];
          if (nextSource !== null) { 
            // 使用for...in和hasOwnProperty双重判断，确保只拿到本身的属性、方法（不包含继承的）
            for (const nextKey in nextSource) { 
              if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { 
                to[nextKey] = nextSource[nextKey];
              }
            }
          }
        }
        return to;
      },
      // 不可枚举
      enumerable: false,
      writable: true,
      configurable: true,
    })

## 19.深拷贝 ##

递归的完整版本（考虑到了Symbol属性）：

## 20.Promise ##

实现思路：Promise源码实现

## 21.Promise.all ##

**Promise.all**是支持链式调用的，本质上就是返回了一个Promise实例，通过**resolve**和**reject**来改变实例状态。

Promise.myAll = function(promiseArr) { 
      return new Promise((resolve, reject) => { 
        const ans = [];
        let index = 0;
        for (let i = 0; i < promiseArr.length; i++) { 
          promiseArr[i]
          .then(res => { 
            ans[i] = res;
            index++;
            if (index === promiseArr.length) { 
              resolve(ans);
            }
          })
          .catch(err => reject(err));
        }
      })
    }

## 22.Promise.race ##

Promise.race = function(promiseArr) { 
      return new Promise((resolve, reject) => { 
        promiseArr.forEach(p => { 
          // 如果不是Promise实例需要转化为Promise实例
          Promise.resolve(p).then(
            val => resolve(val),
            err => reject(err),
          )
        })
      })
    }

## 23.Promise并行限制 ##

就是实现有并行限制的Promise调度器问题。

详细实现思路：某条高频面试原题：实现有并行限制的Promise调度器

class Scheduler { 
      constructor() { 
        this.queue = [];
        this.maxCount = 2;
        this.runCounts = 0;
      }
      add(promiseCreator) { 
        this.queue.push(promiseCreator);
      }
      taskStart() { 
        for (let i = 0; i < this.maxCount; i++) { 
          this.request();
        }
      }
      request() { 
        if (!this.queue || !this.queue.length || this.runCounts >= this.maxCount) { 
          return;
        }
        this.runCounts++;
    
        this.queue.shift()().then(() => { 
          this.runCounts--;
          this.request();
        });
      }
    }
    
    const timeout = time => new Promise(resolve => { 
      setTimeout(resolve, time);
    })
    
    const scheduler = new Scheduler();
    
    const addTask = (time,order) => { 
      scheduler.add(() => timeout(time).then(()=>console.log(order)))
    }
    
    
    addTask(1000, '1');
    addTask(500, '2');
    addTask(300, '3');
    addTask(400, '4');
    scheduler.taskStart()
    // 2
    // 3
    // 1
    // 4

## 24.JSONP ##

script标签不遵循同源协议，可以用来进行**跨域请求**，优点就是兼容性好但仅限于GET请求

## 25.AJAX ##

## 26.event模块 ##

实现node中回调函数的机制，node中回调函数其实是内部使用了**观察者模式**。

> 观察者模式：定义了对象间一种一对多的依赖关系，当目标对象Subject发生改变时，所有依赖它的对象Observer都会得到通知。

## 27.图片懒加载 ##

可以给img标签统一自定义属性data-src=‘default.png’，当检测到图片出现在窗口之后再补充**src**属性，此时才会进行图片资源加载。

## 28.滚动加载 ##

原理就是监听页面滚动事件，分析**clientHeight**、**scrollTop**、**scrollHeight**三者的属性关系。

window.addEventListener('scroll', function() { 
      const clientHeight = document.documentElement.clientHeight;
      const scrollTop = document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight;
      if (clientHeight + scrollTop >= scrollHeight) { 
        // 检测到滚动至页面底部，进行后续操作
        // ...
      }
    }, false);

一个Demo：页面滚动加载的Demo

## 29.渲染几万条数据不卡住页面 ##

渲染大数据时，合理使用**createDocumentFragment**和**requestAnimationFrame**，将操作切分为一小段一小段执行。

setTimeout(() => { 
      // 插入十万条数据
      const total = 100000;
      // 一次插入的数据
      const once = 20;
      // 插入数据需要的次数
      const loopCount = Math.ceil(total / once);
      let countOfRender = 0;
      const ul = document.querySelector('ul');
      // 添加数据的方法
      function add() { 
        const fragment = document.createDocumentFragment();
        for(let i = 0; i < once; i++) { 
          const li = document.createElement('li');
          li.innerText = Math.floor(Math.random() * total);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
      }
      function loop() { 
        if(countOfRender < loopCount) { 
          window.requestAnimationFrame(add);
        }
      }
      loop();
    }, 0)

## 30.打印出当前网页使用了多少种HTML元素 ##

一行代码可以解决：

const fn = () => { 
      return [...new Set([...document.querySelectorAll('*')].map(el => el.tagName))].length;
    }

值得注意的是：DOM操作返回的是**类数组**，需要转换为数组之后才可以调用数组的方法。

## 31.将VirtualDom转化为真实DOM结构 ##

这是当前SPA应用的核心概念之一

// vnode结构：
    // { 
    // tag,
    // attrs,
    // children,
    // }
    
    //Virtual DOM => DOM
    function render(vnode, container) { 
      container.appendChild(_render(vnode));
    }
    function _render(vnode) { 
      // 如果是数字类型转化为字符串
      if (typeof vnode === 'number') { 
        vnode = String(vnode);
      }
      // 字符串类型直接就是文本节点
      if (typeof vnode === 'string') { 
        return document.createTextNode(vnode);
      }
      // 普通DOM
      const dom = document.createElement(vnode.tag);
      if (vnode.attrs) { 
        // 遍历属性
        Object.keys(vnode.attrs).forEach(key => { 
          const value = vnode.attrs[key];
          dom.setAttribute(key, value);
        })
      }
      // 子数组进行递归操作
      vnode.children.forEach(child => render(child, dom));
      return dom;
    }

## 32.字符串解析问题 ##

var a = { 
        b: 123,
        c: '456',
        e: '789',
    }
    var str=`a{a.b}aa{a.c}aa {a.d}aaaa`;
    // => 'a123aa456aa {a.d}aaaa'

实现函数使得将str字符串中的\{\}内的变量替换，如果属性不存在保持原样（比如\{a.d\}）

类似于模版字符串，但有一点出入，实际上原理大差不差

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5fd9741271a847dba4ea0ad593c99d6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d108c665bc8644d0ad482408f1761631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/19af1ab9d8064f27830342d9cbed0c4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyMDExMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/ccb803ff723b479d965f6b33aab0967d.png