关于前端:2022秋招前端面试题四附答案

代码输入后果

async function async1() {console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {console.log("async2");
}
async1();
console.log('start')
复制代码

输入后果如下：

async1 start
async2
start
async1 end
复制代码

代码的执行过程如下：

1. 首先执行函数中的同步代码 async1 start，之后遇到了await，它会阻塞async1 前面代码的执行，因而会先去执行 async2 中的同步代码async2，而后跳出async1；
2. 跳出 async1 函数后，执行同步代码start；
3. 在一轮宏工作全副执行完之后，再来执行 await 前面的内容async1 end。

这里能够了解为 await 前面的语句相当于放到了 new Promise 中，下一行及之后的语句相当于放在 Promise.then 中。

实现数组原型办法

forEach

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

参数：

callback：为数组中每个元素执行的函数，该函数承受 1 - 3 个参数currentValue: 数组中正在解决的以后元素index(可选): 数组中正在解决的以后元素的索引array(可选): forEach() 办法正在操作的数组 thisArg(可选): 当执行回调函数 callback 时，用作 this 的值。

返回值：undefined

Array.prototype.forEach1 = 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');
    }
    // 创立一个新的 Object 对象。该对象将会包裹 (wrapper) 传入的参数 this(以后数组)。const O = Object(this);
    // O.length >>> 0 无符号右移 0 位
    // 意义：为了保障转换后的值为正整数。// 其实底层做了 2 层转换，第一是非 number 转成 number 类型，第二是将 number 转成 Uint32 类型
    const len = O.length >>> 0;
    let k = 0;
    while(k < len) {if(k in O) {callback.call(thisArg, O[k], k, O);
        }
        k++;
    }
}
复制代码

map

语法：arr.map(callback(currentValue [, index [, array]])[, thisArg])

参数：与 forEach() 办法一样

返回值：一个由原数组每个元素执行回调函数的后果组成的新数组。

Array.prototype.map1 = 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 newArr = [];  // 返回的新数组
    let k = 0;
    while(k < len) {if(k in O) {newArr[k] = callback.call(thisArg, O[k], k, O);
        }
        k++;
    }
    return newArr;
}
复制代码

filter

语法：arr.filter(callback(element [, index [, array]])[, thisArg])

参数：

callback: 用来测试数组的每个元素的函数。返回 true 示意该元素通过测试，保留该元素，false 则不保留。它承受以下三个参数：element、index、array，参数的意义与 forEach 一样。

thisArg(可选): 执行 callback 时，用于 this 的值。

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

Array.prototype.filter1 = 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 newArr = [];  // 返回的新数组
    let k = 0;
    while(k < len) {if(k in O) {if(callback.call(thisArg, O[k], k, O)) {newArr.push(O[k]);
            }
        }
        k++;
    }
    return newArr;
}
复制代码

some

语法：arr.some(callback(element [, index [, array]])[, thisArg])

参数：

callback: 用来测试数组的每个元素的函数。承受以下三个参数：element、index、array，参数的意义与 forEach 一样。

thisArg(可选): 执行 callback 时，用于 this 的值。
返回值：数组中有至多一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

Array.prototype.some1 = 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) {if(callback.call(thisArg, O[k], k, O)) {return true}
        }
        k++;
    }
    return false;
}
复制代码

reduce

语法：arr.reduce(callback(preVal, curVal[, curIndex [, array]])[, initialValue])

参数：

callback: 一个“reducer”函数，蕴含四个参数：

preVal：上一次调用 callback 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。

curVal：数组中正在解决的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。

curIndex(可选)：数组中正在解决的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。

array(可选)：用于遍历的数组。
initialValue(可选): 作为第一次调用 callback 函数时参数 preVal 的值。若指定了初始值 initialValue，则 curVal 则将应用数组第一个元素；否则 preVal 将应用数组第一个元素，而 curVal 将应用数组第二个元素。
返回值：应用“reducer”回调函数遍历整个数组后的后果。

Array.prototype.reduce1 = function(callback, initialValue) {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;
    let accumulator = initialValue;
    // 如果第二个参数为 undefined 的状况下，则数组的第一个有效值（非 empty）作为累加器的初始值
    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(accumulator, O[k], k, O);
        }
        k++;
    }
    return accumulator;
}
复制代码

z-index 属性在什么状况下会生效

通常 z-index 的应用是在有两个重叠的标签，在肯定的状况下管制其中一个在另一个的上方或者下方呈现。z-index 值越大就越是在下层。z-index 元素的 position 属性须要是 relative，absolute 或是 fixed。

z-index 属性在下列状况下会生效：

• 父元素 position 为 relative 时，子元素的 z -index 生效。解决：父元素 position 改为 absolute 或 static；
• 元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
• 元素在设置 z -index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；

写代码：实现函数可能深度克隆根本类型

浅克隆：

function shallowClone(obj) {let cloneObj = {};

  for (let i in obj) {cloneObj[i] = obj[i];
  }

  return cloneObj;
}
复制代码

深克隆：

• 思考根底类型

• 援用类型

  • RegExp、Date、函数 不是 JSON 平安的
  • 会失落 constructor，所有的构造函数都指向 Object
  • 破解循环援用

function deepCopy(obj) {if (typeof obj === 'object') {var result = obj.constructor === Array ? [] : {};

    for (var i in obj) {result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
    }
  } else {var result = obj;}

  return result;
}
复制代码

px、em、rem 的区别及应用场景

三者的区别：

• px 是固定的像素，一旦设置了就无奈因为适应页面大小而扭转。
• em 和 rem 绝对于 px 更具备灵活性，他们是绝对长度单位，其长度不是固定的，更实用于响应式布局。
• em 是绝对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能须要晓得他父元素的大小。而 rem 是绝对于根元素，这样就意味着，只须要在根元素确定一个参考值。

应用场景：

• 对于只须要适配少部分挪动设施，且分辨率对页面影响不大的，应用 px 即可。
• 对于须要适配各种挪动设施，应用 rem，例如须要适配 iPhone 和 iPad 等分辨率差异比拟挺大的设施。

什么状况会阻塞渲染？

首先渲染的前提是生成渲染树，所以 HTML 和 CSS 必定会阻塞渲染。如果你想渲染的越快，你越应该升高一开始须要渲染的文件大小，并且扁平层级，优化选择器。而后当浏览器在解析到 script 标签时，会暂停构建 DOM，实现后才会从暂停的中央从新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都倡议将 script 标签放在 body 标签底部的起因。

当然在当下，并不是说 script 标签必须放在底部，因为你能够给 script 标签增加 defer 或者 async 属性。当 script 标签加上 defer 属性当前，示意该 JS 文件会并行下载，然而会放到 HTML 解析实现后程序执行，所以对于这种状况你能够把 script 标签放在任意地位。对于没有任何依赖的 JS 文件能够加上 async 属性，示意 JS 文件下载和解析不会阻塞渲染。

什么是闭包，闭包的作用是什么

当一个外部函数被调用，就会造成闭包，闭包就是可能读取其余函数外部变量的函数。闭包作用：局部变量无奈共享和短暂的保留，而全局变量可能造成变量净化，所以咱们心愿有一种机制既能够短暂的保留变量又不会造成全局净化。复制代码

Virtual Dom 的劣势在哪里？

Virtual Dom 的劣势」其实这道题目面试官更想听到的答案不是上来就说「间接操作 / 频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不至于活到明天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。

首先咱们须要晓得：

DOM 引擎、JS 引擎 互相独立，但又工作在同一线程（主线程）JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最初激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量解决”优化，引擎间切换的单位代价将迅速积攒若其中有强制重绘的 DOM API 调用，从新计算布局、从新绘制图像会引起更大的性能耗费。

其次是 VDOM 和实在 DOM 的区别和优化：

1. 虚构 DOM 不会立马进行排版与重绘操作
2. 虚构 DOM 进行频繁批改，而后一次性比拟并批改实在 DOM 中须要改的局部，最初在实在 DOM 中进行排版与重绘，缩小过多 DOM 节点排版与重绘损耗
3. 虚构 DOM 无效升高大面积实在 DOM 的重绘与排版，因为最终与实在 DOM 比拟差别，能够只渲染部分

个别如何产生闭包

• 返回函数
• 函数当做参数传递

如何进攻 XSS 攻打？

能够看到 XSS 危害如此之大，那么在开发网站时就要做好进攻措施，具体措施如下：

• 能够从浏览器的执行来进行预防，一种是应用纯前端的形式，不必服务器端拼接后返回（不应用服务端渲染）。另一种是对须要插入到 HTML 中的代码做好充沛的本义。对于 DOM 型的攻打，次要是前端脚本的不牢靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能呈现的恶意代码状况进行判断。
• 应用 CSP，CSP 的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行，从而避免恶意代码的注入攻打。

1. CSP 指的是内容安全策略，它的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行。咱们只须要配置规定，如何拦挡由浏览器本人来实现。
2. 通常有两种形式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的形式

• 对一些敏感信息进行爱护，比方 cookie 应用 http-only，使得脚本无奈获取。也能够应用验证码，防止脚本伪装成用户执行一些操作。

僵尸过程和孤儿过程是什么？

• 孤儿过程 ：父过程退出了，而它的一个或多个过程还在运行，那这些子过程都会成为孤儿过程。孤儿过程将被 init 过程(过程号为 1) 所收养，并由 init 过程对它们实现状态收集工作。
• 僵尸过程：子过程比父过程先完结，而父过程又没有开释子过程占用的资源，那么子过程的过程描述符依然保留在零碎中，这种过程称之为僵死过程。

数组去重

ES5 实现：

function unique(arr) {var res = arr.filter(function(item, index, array) {return array.indexOf(item) === index
    })
    return res
}
复制代码

ES6 实现：

var unique = arr => [...new Set(arr)]
复制代码

函数防抖

触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会从新计时。

简略版：函数外部反对应用 this 和 event 对象；

function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){func.apply(context, args)
        }, wait);
    }
}
复制代码

应用：

var node = document.getElementById('layout')
function getUserAction(e) {console.log(this, e)  // 别离打印：node 这个节点 和 MouseEvent
    node.innerHTML = count++;
};
node.onmousemove = debounce(getUserAction, 1000)
复制代码

最终版：除了反对 this 和 event 外，还反对以下性能：

• 反对立刻执行；
• 函数可能有返回值；
• 反对勾销性能；

function debounce(func, wait, immediate) {
    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果曾经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){timeout = null;}, wait)
            if (callNow) result = func.apply(context, args)
        } else {timeout = setTimeout(function(){func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}
复制代码

应用：

var setUseAction = debounce(getUserAction, 10000, true);
// 应用防抖
node.onmousemove = setUseAction

// 勾销防抖
setUseAction.cancel()
复制代码

死锁产生的起因？如果解决死锁的问题？

所谓死锁，是指多个过程在运行过程中因抢夺资源而造成的一种僵局，当过程处于这种僵持状态时，若无外力作用，它们都将无奈再向前推动。

零碎中的资源能够分为两类：

• 可剥夺资源，是指某过程在取得这类资源后，该资源能够再被其余过程或零碎剥夺，CPU 和主存均属于可剥夺性资源；
• 不可剥夺资源，当零碎把这类资源分配给某过程后，再不能强行发出，只能在过程用完后自行开释，如磁带机、打印机等。

产生死锁的起因：

（1）竞争资源

• 产生死锁中的竞争资源之一指的是 竞争不可剥夺资源（例如：零碎中只有一台打印机，可供过程 P1 应用，假设 P1 已占用了打印机，若 P2 持续要求打印机打印将阻塞）
• 产生死锁中的竞争资源另外一种资源指的是 竞争长期资源（长期资源包含硬件中断、信号、音讯、缓冲区内的音讯等），通常音讯通信程序进行不当，则会产生死锁

（2）过程间推动程序非法

若 P1 放弃了资源 R1，P2 放弃了资源 R2，零碎处于不平安状态，因为这两个过程再向前推动，便可能产生死锁。例如，当 P1 运行到 P1：Request（R2）时，将因 R2 已被 P2 占用而阻塞；当 P2 运行到 P2：Request（R1）时，也将因 R1 已被 P1 占用而阻塞，于是产生过程死锁

产生死锁的必要条件：

• 互斥条件：过程要求对所调配的资源进行排它性管制，即在一段时间内某资源仅为一过程所占用。
• 申请和放弃条件：当过程因申请资源而阻塞时，对已取得的资源放弃不放。
• 不剥夺条件：过程已取得的资源在未应用完之前，不能剥夺，只能在应用完时由本人开释。
• 环路期待条件：在产生死锁时，必然存在一个过程——资源的环形链。

预防死锁的办法：

• 资源一次性调配：一次性调配所有资源，这样就不会再有申请了（毁坏申请条件）
• 只有有一个资源得不到调配，也不给这个过程调配其余的资源（毁坏请放弃条件）
• 可剥夺资源：即当某过程取得了局部资源，但得不到其它资源，则开释已占有的资源（毁坏不可剥夺条件）
• 资源有序调配法：零碎给每类资源赋予一个编号，每一个过程按编号递增的程序申请资源，开释则相同（毁坏环路期待条件）

柯里化

题目形容: 柯里化（Currying），又称局部求值（Partial Evaluation），是把承受多个参数的函数变换成承受一个繁多参数（最后函数的第一个参数）的函数，并且返回承受余下的参数而且返回后果的新函数的技术。核心思想是把多参数传入的函数拆成单参数（或局部）函数，外部再返回调用下一个单参数（或局部）函数，顺次解决残余的参数。

实现代码如下:

function currying(fn, ...args) {
  const length = fn.length;
  let allArgs = [...args];
  const res = (...newArgs) => {allArgs = [...allArgs, ...newArgs];
    if (allArgs.length === length) {return fn(...allArgs);
    } else {return res;}
  };
  return res;
}

// 用法如下：// const add = (a, b, c) => a + b + c;
// const a = currying(add, 1);
// console.log(a(2,3))
复制代码

浏览器是如何对 HTML5 的离线贮存资源进行治理和加载？

• 在线的状况下，浏览器发现 html 头部有 manifest 属性，它会申请 manifest 文件，如果是第一次拜访页面，那么浏览器就会依据 manifest 文件的内容下载相应的资源并且进行离线存储。如果曾经拜访过页面并且资源曾经进行离线存储了，那么浏览器就会应用离线的资源加载页面，而后浏览器会比照新的 manifest 文件与旧的 manifest 文件，如果文件没有产生扭转，就不做任何操作，如果文件扭转了，就会从新下载文件中的资源并进行离线存储。
• 离线的状况下，浏览器会间接应用离线存储的资源。