面试时，你会手写源码吗？

超、凢脫俗 2023-07-19 12:25 58阅读 0赞

如今前端工程师的技术要求越来越高，会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在中大厂基本都会要求面试者手写前端常见API的原理，以此来证明你对该知识点的理解程度。接下来，我将列举我面试时以及自认为比较重要的CSS部分、JS部分常见手写原理题！

## CSS部分 ##

### 经典Flex布局 ###

如今`Flex`布局不管是移动端还是PC端的应用已经非常广泛了，下面我列举几个平时项目中非常常见的几个需求。以下例子我们都以Vue项目为例~

> flex布局均匀分布后换行问题

需求一：`ul`下有多个`li`，每三个`li`排一列，多余的换行显示。

很显然，绝大部分的小伙伴都会使用`Flex布局`，很显然会出现一个问题就是如果li是3的倍数的话就能正常显示，若不是的话，布局就不是产品经理满意的结果。

display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

![format_png][]

**解决方案**：

我们在`ul`的底部新增`li`，个数为数组**总长度%3**的余数即可。

![format_png 1][]

### 两栏布局 ###

> 两栏布局：`左右两栏，左边固定，右边自适应`

效果图

![format_png 2][]

1.  第一种方式 — `浮动`
    
    HTML部分：
    
        <div class="outer outer1">
            <div class="left">1-left</div>
            <div class="right">1-right</div>
        </div>
    
    CSS部分：
    
        .outer1 .left {
            width: 200px;
            float: left;
        }
        .outer1 .right {
            width: auto;
            margin-left: 200px;
        }
2.  第二种方式 — `flex`
    
    HTML部分：
    
        <div class="outer outer2">
            <div class="left">2-left</div>
            <div class="right">2-right</div>
        </div>
    
    CSS部分：
    
        .outer2 {
           display: flex;
        }
        .outer2 .left {
           flex: 0 0 200px;
           /* flex-grow: 0;
           flex-shrink:0;
           flex-basis:200px; */
        }
        .outer2 .right {
           flex: auto;
        }
        
        注意：flex: 0 0 200px是flex: flex-grow flex-shrink flex-basis的简写
3.  第三种方式 — `position`
    
    HTML部分：
    
        <div class="outer outer3">
           <div class="left">3-left</div>
           <div class="right">3-right</div>
        </div>
    
    CSS部分：
    
        .outer3 {
           position: relative;
        }
        .outer3 .left {
           position: absolute;
           width: 200px;
        }
        .outer3 .right {
           margin-left: 200px;
        }
4.  第四种方式 — `position again`
    
    HTML部分：
    
        <div class="outer outer4">
            <div class="left">4-left</div>
            <div class="right">4-right</div>
        </div>
    
    CSS部分：
    
        .outer4 {
            position: relative;
        }
        .outer4 .left {
            width: 200px;
        } 
        .outer4 .right {
            position: absolute;
            top: 0;
            left: 200px;
            right: 0;
        }

### 三栏布局 ###

> 三栏布局： `中间列自适应宽度，旁边两侧固定宽度`

效果图

![format_png 3][]

1.  第一种方式 — `定位`
    
    HTML部分：
    
        <div class="outer outer1">
           <div class="left">1-left</div>
           <div class="middle">1-middle</div>
           <div class="right">1-right</div>
        </div>
    
    CSS部分：
    
        .outer1 {
           position: relative;
        }
        .outer1 .left {
           position: absolute;
           width: 100px;
        }
        .outer1 .middle {
           margin: 0 200px 0 100px;
        }
        .outer1 .right {
           position: absolute;
           width: 200px;
           top: 0;
           right: 0;
        }
        注意：左右分别使用绝对定位，中间设置外边距
2.  第二种方式 — `flex布局`
    
    HTML部分：
    
        <div class="outer outer2">
           <div class="left">2-left</div>
           <div class="middle">2-middle</div>
           <div class="right">2-right</div>
        </div>
    
    CSS部分：
    
        .outer2 {
           display: flex;
        }
        .outer2 .left {
           flex: 0 0 100px;
        }
        .outer2 .middle {
           flex: auto;
        }
        .outer2 .right {
           flex: 0 0 200px;
        }
3.  第三种方式 — `浮动原理`
    
    HTML部分：
    
        <div class="outer outer3">
           <div class="left">3-left</div>
           <div class="right">3-right</div>
           <div class="middle">3-middle</div>
        </div>
    
    CSS部分：
    
        .outer3 .left{
           float: left;
           width: 100px;
        }
        .outer3 .right {
           float: right;
           width: 200px;
        }
        .outer3 .middle {
           margin: 0 200px 0 100px;
        }

### 圣杯布局 ###

> 圣杯布局: `中间的优先渲染，独立的左中右结构`

具体实现圣杯布局的步骤：

1.  让左右浮动在一行显示，相对定位
2.  让中间模块的middle宽度为100%
3.  让左边的色块移动到middle前面，margin-left:-100%
4.  让右边的色块移动到middle的后面，margin-left:-宽度
5.  给三个小块的父元素加一个内填充的属性padding,为的是填充挤到中间
6.  给左边的块移动到左边left:-200px, 给右边的块移动到右边right:-200px

效果图

![format_png 4][]

HTML部分：

<header>header</header>
       <div class="container">
          <div class="middle">midlle</div>
          <div class="left">left</div>
          <div class="right">right</div>
       </div>
    <footer>footer</footer>

CSS部分：

header, footer {
       height: 100px;
       width: 100%;
       background-color: antiquewhite;
    }
    .container {
       height: 200px;
       padding-left: 200px;
       padding-right: 300px;
    }
    .container > div {
       float: left;
       position: relative;
       height: 100%;
    }
    .left {
       width: 200px;
       height: 200px;
       background-color: burlywood;
       margin-left: -100%;
       left: -200px;
    }
    .right {
       width: 300px;
       height: 200px;
       background-color: burlywood;
       margin-left: -300px;
       right: -300px;
    }
    .middle {
       width: 100%;
       height: 200px;
       background-color: #b0f9c2;
    }

### 双飞翼布局 ###

> 双飞翼布局

具体实现双飞翼布局的步骤：

1.  给左，中，右 加浮动，在一行显示
2.  给middle宽度为100%
3.  让左边的模块移动middle的左边 margin-left:-100%
4.  让右边的模块移动middle的右边 margin-left:-自己宽度
5.  给middle里面的容器添加外间距 margin: 左右

效果：

![format_png 5][]

html部分

css部分

.main>div { 
        float:left;
        position: relative;
        height: 300px; 
    }
    .middle { 
        width: 100%;
        background-color: lightgreen 
    }
    .left { 
       width:200px;
       margin-left:-100%;
       background-color:#b0f9c2 
    }
    .right { 
       width: 200px;
       margin-left:-200px;
       background-color:pink 
    }
    .middle-inner{
       margin:0 200px; 
       background-color: burlywood; 
       height:300px;
    }

### 水平垂直居中 ###

html部分

css部分

公共部分

body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .box {
        box-sizing: border-box;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        border: 1px solid lightblue;
        background: lightcyan;
    }

第一种：`定位`

.box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -25px;
    }

**注意**：上面的方式是一定要知道具体的宽高。但下面的方式是知道宽高，但是没有用到宽高。

第二种：`flex`

body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

**注意**：这种方式也是兼容性不是很好

第三种：`JavaScript`

let html = document.documentElement,
                winW = html.clientWidth,
                winH = html.clientHeight,
                boxW = box.offsetWidth, // offsetWidth带边框
                boxH = box.offsetHeight;
    
                box.style.position = 'absolute';
                box.style.left = (winW - boxW) / 2 + 'px';
                box.style.top = (winH - boxH) / 2 + 'px';

第四种：`table-cell`

body {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

![format_png 6][]

## JS 部分 ##

### 统计网页中出现的标签 ###

**实现步骤**：

1.  获取所有的DOM节点
2.  NodeList集合转化为数组
3.  获取数组每个元素的标签名
4.  去重

new Set([...document.querySelectorAll('*')].map(ele=>ele.tagName)).size

![format_png 7][]

### JS深浅拷贝 ###

对象深浅拷贝，是面试常见的面试题之一。

原对象：

let obj = {
       a: 100,
       b: [100, 200, 300],
       c: {
          x: 10
       },
       d: /^\d+$/
    }

> 浅克隆

浅克隆 只克隆第一层

方法一：

let obj2 = {...obj};

方法二：

let obj2 = {};
    for(let key in obj) {
       if(!obj.hasOwnProperty(key)) break;
       obj2[key] = obj[key];
    }

> 深克隆

**注意**：在函数、日期、正则表达式时，JSON.stringify时，都会被转换成对象\{\}

方法一：

let obj3 = JSON.parse(JSON.stringify(obj));

方法二：

### 原生Ajax ###

> 一个完整的 ajax 请求一般包括以下步骤：

*  实例化 XMLHttpRequest 对象
 *  连接服务器
 *  发送请求
 *  介绍

**注意**：IE5、6不兼容XMLHttpRequest，所以要使用ActiveXObject()对象，并传入 ‘Microsoft.XMLHTTP’，达到兼容目的。

*  readyState的五种状态详解：
    
    0 － （未初始化）还没有调用send()方法
    
    1 － （载入）已调用send()方法，正在发送请求
    
    2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
    
    3 － （交互）正在解析响应内容
    
    4 － （完成）响应内容解析完成，可以在客户端调用了

### 防抖和节流 ###

如今前端界面效果越来越复杂，有一些频繁操作会导致页面性能和用户体验度低。像：输入框搜索会频繁调端口接口、放大缩小窗口等。

> 防抖 - debounce 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

> 节流 - throttle 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

### 解析 URL 参数 ###

let url = 'https://www.baidu.com?username=%22tmc%22&password=%22123456%22&dutiy=%E5%89%8D%E7%AB%AF%E6%94%BB%E5%9F%8E%E7%8B%AE&flag';
    console.log(parseParam(url))
    
    { username: '"tmc"',
      password: '"123456"',
      dutiy: '前端攻城狮',
      flag: true 
    }

### Jsonp的原理 ###

function jsonp({url, params, cb}) { 
       return new Promise((resolve, reject) => {
         window[cb] = function (data) {  // 声明全局变量
            resolve(data)
            document.body.removeChild(script)
          }
          params = {...params, cb}
          let arrs = []
          for(let key in params) {
             arrs.push(`${key}=${params[key]}`)
          }
          let script = document.createElement('script')
          script.src = `${url}?${arrs.join('&')}`
          document.body.appendChild(script)
       })
    }

**jsonp的缺点**：

1.  只能发送Get请求 不支持post put delete
2.  不安全 xss攻击

### apply的原理 ###

**apply** 的实现原理和 **call** 的实现原理差不多，只是参数形式不一样。— 数组

Function.prototype.apply = function(content = window) {
        content.fn = this;
        let result;
        // 判断是否有第二个参数
        if(arguments[1]) {
            result = content.fn(...arguments[1]);
        } else {
            result = content.fn();
        }
        delete content.fn;
        return result;
    }

**注意**：当apply传入的第一个参数为null时，函数体内的this会指向window。

### bind的原理 ###

> bind 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

Function.prototype.bind = function(content) {
       if(typeof this != 'function') {
          throw Error('not a function');
       }
       let _this = this;
       let args = [...arguments].slice(1);
       return function F() {
          // 判断是否被当做构造函数使用
          if(this instanceof F) {
             return _this.apply(this, args.concat([...arguments]))
          }
          return _this.apply(content, args.concat([...arguments]))
       }
    }

### call的原理 ###

> call语法：fun.call(thisArg, arg1, arg2, arg3, …)

**call** 的核心原理：

*  将函数设为对象的属性
 *  执行和删除这个函数
 *  指定this到函数并传入给定参数执行函数
 *  如果不传参数，默认指向window

Function.prototype.call2 = function(content = window) {
        // 判断是否是underfine和null
        // if(typeof content === 'undefined' || typeof content === null){
        //     content = window
        // }
        content.fn = this;
        let args = [...arguments].slice(1);
        let result = content.fn(...args);
        delete content.fn;
        return result;
    }

**注意**：当call传入的第一个参数为null时，函数体内的this会指向window。

### new的原理 ###

> 实现一个new操作符的具体实现步骤：

*  首先函数接受不定量的参数，第一个参数为构造函数，接下来的参数被构造函数使用
 *  然后内部创建一个空对象 obj
 *  因为 obj 对象需要访问到构造函数原型链上的属性，所以我们通过 setPrototypeOf 将两者联系起来。这段代码等同于 obj.**proto** = Con.prototype
 *  将 obj 绑定到构造函数上，并且传入剩余的参数
 *  判断构造函数返回值是否为对象，如果为对象就使用构造函数返回的值，否则使用 obj，这样就实现了忽略构造函数返回的原始值

/**
     * 创建一个new操作符
     * @param {*} Con 构造函数
     * @param  {...any} args 忘构造函数中传的参数
     */
      function createNew(Con, ...args) {
        let obj = {} // 创建一个对象，因为new操作符会返回一个对象
        Object.setPrototypeOf(obj, Con.prototype) // 将对象与构造函数原型链接起来
        // obj.__proto__ = Con.prototype // 等价于上面的写法
        let result = Con.apply(obj, args) // 将构造函数中的this指向这个对象，并传递参数
        return result instanceof Object ? result : obj
    }

**注意**：

一、new操作符的几个作用：

1.  new操作符返回一个对象，所以我们需要在内部创建一个对象
2.  这个对象，也就是构造函数中的this，可以访问到挂载在this上的任意属性
3.  这个对象可以访问到构造函数原型链上的属性，所以需要将对象与构造函数链接起来
4.  返回原始值需要忽略，返回对象需要正常处理

二、new操作符的特点：

1.  new通过构造函数Test创建处理的实例可以访问构造函数中的属性也可以访问构造函数原型链上的属性，所以：通过new操作符，实例与构造函数通过原型链连接了起来
2.  构造函数如果返回原始值，那么这个返回值毫无意义
3.  构造函数如果返回对象，那么这个返回值会被正常的使用，导致new操作符没有作用

### instanceof的原理 ###

> instanceof 用来检测一个对象在其原型链中是否存在一个构造函数的 prototype 属性

function instanceOf(left,right) {
        let proto = left.__proto__;
        let prototype = right.prototype
        while(true) {
            if(proto === null) return false
            if(proto === prototype) return true
            proto = proto.__proto__;
        }
    }

### Promise A+规范原理 ###

在面试中高级前端时。要求被手写Promise A+规范源码是必考题了。如果想详细了解，请参考 [一步步教你实现Promise/A+ 规范 完整版][Promise_A_ _]

class Promise {
        constructor(executor) {
            this.status = 'pending' // 初始化状态
            this.value = undefined // 初始化成功返回的值
            this.reason = undefined // 初始化失败返回的原因
    
            // 解决处理异步的resolve
            this.onResolvedCallbacks = [] // 存放所有成功的resolve
            this.onRejectedCallbacks = [] // 存放所有失败的reject
    
            /**
             * @param {*} value 成功返回值
             * 定义resolve方法
             * 注意：状态只能从pending->fulfilled和pending->rejected两个
             */
            const resolve = (value) => { 
                if(this.status === 'pending') {
                    this.status = 'fulfilled' // 成功时将状态转换为成功态fulfilled
                    this.value = value // 将成功返回的值赋值给promise
                    // 为了解决异步resolve以及返回多层promise
                    this.onResolvedCallbacks.forEach(fn => {
                        fn() // 当状态变为成功态依次执行所有的resolve函数
                    })
                }
            }
            const reject = (reason) => {
                if(this.status === 'pending') {
                    this.status = 'rejected' // 失败时将状态转换为成功态失败态rejected
                    this.reason = reason // 将失败返回的原因赋值给promise
                    this.onRejectedCallbacks.forEach(fn => {
                        fn() // 当状态变为失败态依次执行所有的reject函数
                    })
                }
            }
            executor(resolve, reject) // 执行promise传的回调函数
        }
        /**
         * 定义promise的then方法 
         * @param {*} onFulfilled 成功的回调
         * @param {*} onRejected 失败的回调
         */
        then(onFulfilled, onRejected) {
            // 为了解决then方法返回Promise的情况
            const promise2 = new Promise((resolve, reject) => {
                if(this.status === 'fulfilled') { // 如果状态为fulfilled时则将值传给这个成功的回调
                    setTimeout(() => {
                        const x = onFulfilled(this.value) // x的值有可能为 promise || 123 || '123'...
                        // 注意：此时调用promise2时还没有返回值，要用setTimeout模拟进入第二次事件循环；先有鸡先有蛋
                        resolvePromise(promise2, x, resolve, reject) 
                    }, 0)
                }
                if(this.status === 'rejected') {
                    setTimeout(() => {
                        const x = onRejected(this.reason) // 如果状态为rejected时则将视频的原因传给失败的回调
                        resolvePromise(promise2, x, resolve, reject) 
                    }, 0)
                }
                if(this.status === 'pending') { // 记录-》解决异步
                    this.onResolvedCallbacks.push(() => {
                        setTimeout(() => {
                            const x = onFulfilled(this.value)
                            resolvePromise(promise2, x, resolve, reject) 
                        }, 0)
                    })
                    this.onRejectedCallbacks.push(() => {
                        setTimeout(() => {
                            const x = onRejected(this.reason)
                            resolvePromise(promise2, x, resolve, reject) 
                        }, 0)
                    })
                }
            })
            return promise2; // 解决多次链式调用的问题
        }
    }
    
    const resolvePromise = (promise2, x, resolve, reject) => {
        // console.log(promise2, x, resolve, reject)
        if(promise2 === x) { // 如果返回的值与then方法返回的值相同时
            throw TypeError('循环引用')
        }
        // 判断x是不是promise;注意：null的typeof也是object要排除
        if(typeof x === 'function' || (typeof x === 'object' && x !== null)) {
            try {
                const then = x.then // 获取返回值x上的then方法；注意方法会报错要捕获异常；原因111
                if(typeof then === 'function') { // 就认为是promise
                    then.call(x, y => {
                        // resolve(y)
                        // 递归解析 ; 有可能返回多个嵌套的promise
                        resolvePromise(promise2, y, resolve, reject)
                    }, r => {
                        reject(r)
                    })
                }
            } catch(e) {
                reject(e)
            }
        } else {
            resolve(x);
        }
    }
    module.exports = Promise;

### JS数组 ###

#### 去重 ####

> 普通项

let arr2 = \[1, 2, 3, 2, 33, 55, 66, 3, 55\];

第一种：

let newArr = [];
       arr2.forEach(item => {
           if(newArr.indexOf(item) == '-1') {
               newArr.push(item);
           }
       })
    console.log(newArr);
    
    // (6) [1, 2, 3, 33, 55, 66]

第二种：

let newArr = [...new Set(arr2)];
    console.log(newArr);
    
    // (6) [1, 2, 3, 33, 55, 66]

**注意**：Array.from()、filter()、for()等方法都可以完成上面数组去重。

> 对象项

let arr1 = [
        {id: 1, name: '汤小梦'},
        {id: 2, name: '石小明'},
        {id: 3, name: '前端开发'},
        {id: 1, name: 'web前端'}
    ];

实现方法：

const unique = (arr, key) => {
        return [...new Map(arr.map(item => [item[key], item])).values()]
    }
    console.log(unique(arr1, 'id'));
    
    // [
    	{id: 1, name: "web前端"},
    	{id: 2, name: "石小明"},
    	{id: 3, name: "前端开发"}
    ]

#### 合并 ####

let arr3 = ['a', 'b']
    let arr4 = ['c', 'd']

方法一：**ES5**

let arr5 = arr3.concat(arr4);
    console.log(arr5);
    
    // ['a', 'b', 'c', 'd']

方法一：**ES6**

let arr6 = [...arr3, ...arr4];
    console.log(arr6);
    
    // ['a', 'b', 'c', 'd']

#### 展平 ####

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

第一种：

let arrNew = arr7.flat(Infinity);
    console.log(arrNew);
    
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

第二种：

let arrNew = arr7.join().split(',').map(Number);
    console.log(arrNew);
    
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

第三种：

let arrNew = arr7.toString().split(',').map(Number);
    console.log(arrNew);
    
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

第四种：

const flattern = (arr) => {
         const result = []
         arr.forEach((item) => {
             if (Array.isArray(item)) {
                  result.push(...flattern(item))
             } else {
                  result.push(item)
             }
        })
        return result
    }
    flattern(arr7);
    
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

第五种：

function flatten(arr) {
        return [].concat(
            ...arr.map(x => Array.isArray(x) ? flatten(x) : x)
        )
    }
    flattern(arr7);
    
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

#### 是否为数组 ####

let arr = []

第一种：`instanceof`

console.log(arr instanceof Array)

第二种：`constructor`

console.log(arr.constructor === Array)

第三种：`判断对象是否有 push 等数组的一些方法`

console.log(!!arr.push && !!arr.concat)

第四种：`toString`

console.log(Object.prototype.toString.call(arr) === '[object Array]')

第五种：`Array.isArray`

console.log(Array.isArray(arr))

**注意**：第五种方式最优~

#### 冒泡排序 ####

let arr = [1, 44, 6, 77, 3, 7, 99, 12];

*  冒泡排序算法的原理如下：

1.  比较两个相邻的元素，若前一个比后一个大，则交换位置
2.  第一轮的时候最后一个元素应该是最大的一个
3.  对所有的元素重复以上的步骤，除了最后一个

**注意**：最后一个元素不用比较。

#### 快速排序 ####

let arr = [1, 44, 6, 77, 3, 7, 99, 12];

*  快速排序算法的原理如下：

1.  找基准（一般是以中间项为基准）
2.  遍历数组，小于基准的放在left，大于基准的放在right
3.  递归

## 总结 ##

上面总结我面试或面试别人常见的CSS、JS部分手写原理题。希望有小伙伴需要的请认真思考阅读，必有收获。希望您取得满意的offer~❤️

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][]

[format_png]: /images/20230528/32bfddfab2544a158d33944048944448.png
[format_png 1]: /images/20230528/b6164e86cc5b44abb758707f1fdd48f1.png
[format_png 2]: /images/20230528/87897edb5e8c400bb55756992a178528.png
[format_png 3]: /images/20230528/c64ef256ef4c492791b7fd3563f2ffec.png
[format_png 4]: /images/20230528/66213dc9d4db456c80ab230ae6e340c1.png
[format_png 5]: /images/20230528/f4b2f0e282924d0bbcc30b1511e4cbe6.png
[format_png 6]: /images/20230528/14899c85ed0c43138b71e0530ea0a9cb.png
[format_png 7]: /images/20230528/52017d2a862c4bbb828284b1a195f6c5.png
[Promise_A_ _]: https://juejin.im/post/5e2168626fb9a0300d619c9e
[cmd-markdown-logo]: /images/20230528/161ce5a8f56144b492fea57e48beeb97.png