模板引擎实现
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
name: '姓名',
age: 18
}
render(template, data); // 我是姓名，年龄 18，性别 undefined
function render(template, data) {const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
if (reg.test(template)) { // 判断模板里是否有模板字符串
const name = reg.exec(template)[1]; // 查找以后模板里第一个模板字符串的字段
template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
return render(template, data); // 递归的渲染并返回渲染后的构造
}
return template; // 如果模板没有模板字符串间接返回
}
原型继承
这里只写寄生组合继承了，两头还有几个演变过去的继承但都有一些缺点
function Parent() {this.name = 'parent';}
function Child() {Parent.call(this);
this.type = 'children';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
手写 Promise.race
该办法的参数是 Promise 实例数组, 而后其 then 注册的回调办法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态 只能扭转一次, 那么咱们只须要把 Promise.race 中产生的 Promise 对象的 resolve 办法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.
Promise.race = function (args) {return new Promise((resolve, reject) => {for (let i = 0, len = args.length; i < len; i++) {args[i].then(resolve, reject)
}
})
}
实现 AJAX 申请
AJAX 是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新以后网页的对应局部，而不必刷新整个网页。
创立 AJAX 申请的步骤：
- 创立一个 XMLHttpRequest 对象。
- 在这个对象上 应用 open 办法创立一个 HTTP 申请，open 办法所须要的参数是申请的办法、申请的地址、是否异步和用户的认证信息。
- 在发动申请前，能够为这个对象 增加一些信息和监听函数。比如说能够通过 setRequestHeader 办法来为申请增加头信息。还能够为这个对象增加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变动时会触发 onreadystatechange 事件，能够通过设置监听函数，来解决申请胜利后的后果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接管实现，这个时候能够通过判断申请的状态，如果状态是 2xx 或者 304 的话则代表返回失常。这个时候就能够通过 response 中的数据来对页面进行更新了。
- 当对象的属性和监听函数设置实现后，最初调 用 sent 办法来向服务器发动申请，能够传入参数作为发送的数据体。
const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创立 Http 申请
xhr.open("GET", SERVER_URL, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {if (this.readyState !== 4) return;
// 当申请胜利时
if (this.status === 200) {handle(this.response);
} else {console.error(this.statusText);
}
};
// 设置申请失败时的监听函数
xhr.onerror = function() {console.error(this.statusText);
};
// 设置申请头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 申请
xhr.send(null);
参考：前端手写面试题具体解答
手写 Promise.then
then 办法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，咱们应用一个 callbacks 数组先把传给 then 的函数暂存起来，等状态扭转时再调用。
那么，怎么保障后一个 **then** 里的办法在前一个 **then**（可能是异步）完结之后再执行呢？ 咱们能够将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的成果：
- 承前：以后一个
promise实现后，调用其resolve变更状态，在这个resolve里会顺次调用callbacks里的回调，这样就执行了then里的办法了 - 启后：上一步中，当
then里的办法执行实现后，返回一个后果，如果这个后果是个简略的值，就间接调用新promise的resolve，让其状态变更，这又会顺次调用新promise的callbacks数组里的办法，周而复始。。如果返回的后果是个promise，则须要等它实现之后再触发新promise的resolve，所以能够在其后果的then里调用新promise的resolve
then(onFulfilled, onReject){
// 保留前一个 promise 的 this
const self = this;
return new MyPromise((resolve, reject) => {
// 封装前一个 promise 胜利时执行的函数
let fulfilled = () => {
try{const result = onFulfilled(self.value); // 承前
return result instanceof MyPromise? result.then(resolve, reject) : resolve(result); // 启后
}catch(err){reject(err)
}
}
// 封装前一个 promise 失败时执行的函数
let rejected = () => {
try{const result = onReject(self.reason);
return result instanceof MyPromise? result.then(resolve, reject) : reject(result);
}catch(err){reject(err)
}
}
switch(self.status){
case PENDING:
self.onFulfilledCallbacks.push(fulfilled);
self.onRejectedCallbacks.push(rejected);
break;
case FULFILLED:
fulfilled();
break;
case REJECT:
rejected();
break;
}
})
}
留神：
- 间断多个
then里的回调办法是同步注册的，但注册到了不同的callbacks数组中，因为每次then都返回新的promise实例（参考下面的例子和图） - 注册实现后开始执行构造函数中的异步事件，异步实现之后顺次调用
callbacks数组中提前注册的回调
手写防抖函数
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则从新计时。这能够应用在一些点击申请的事件上，防止因为用户的屡次点击向后端发送屡次申请。
// 函数防抖的实现
function debounce(fn, wait) {
let timer = null;
return function() {
let context = this,
args = arguments;
// 如果此时存在定时器的话，则勾销之前的定时器从新记时
if (timer) {clearTimeout(timer);
timer = null;
}
// 设置定时器，使事件间隔指定事件后执行
timer = setTimeout(() => {fn.apply(context, args);
}, wait);
};
}
实现数组的 map 办法
Array.prototype._map = function(fn) {if (typeof fn !== "function") {throw Error('参数必须是一个函数');
}
const res = [];
for (let i = 0, len = this.length; i < len; i++) {res.push(fn(this[i]));
}
return res;
}
实现节流函数（throttle）
防抖函数原理: 规定在一个单位工夫内，只能触发一次函数。如果这个单位工夫内触发屡次函数，只有一次失效。
// 手写简化版
// 节流函数
const throttle = (fn, delay = 500) => {
let flag = true;
return (...args) => {if (!flag) return;
flag = false;
setTimeout(() => {fn.apply(this, args);
flag = true;
}, delay);
};
};
实用场景：
- 拖拽场景：固定工夫内只执行一次，避免超高频次触发地位变动
- 缩放场景：监控浏览器 resize
- 动画场景：防止短时间内屡次触发动画引起性能问题
实现 Event(event bus)
event bus 既是 node 中各个模块的基石，又是前端组件通信的依赖伎俩之一，同时波及了订阅 - 公布设计模式，是十分重要的根底。
简略版：
class EventEmeitter {constructor() {this._events = this._events || new Map(); // 贮存事件 / 回调键值对
this._maxListeners = this._maxListeners || 10; // 设立监听下限
}
}
// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
let handler;
// 从贮存事件键值对的 this._events 中获取对应事件回调函数
handler = this._events.get(type);
if (args.length > 0) {handler.apply(this, args);
} else {handler.call(this);
}
return true;
};
// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {
// 将 type 事件以及对应的 fn 函数放入 this._events 中贮存
if (!this._events.get(type)) {this._events.set(type, fn);
}
};
面试版：
class EventEmeitter {constructor() {this._events = this._events || new Map(); // 贮存事件 / 回调键值对
this._maxListeners = this._maxListeners || 10; // 设立监听下限
}
}
// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
let handler;
// 从贮存事件键值对的 this._events 中获取对应事件回调函数
handler = this._events.get(type);
if (args.length > 0) {handler.apply(this, args);
} else {handler.call(this);
}
return true;
};
// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {
// 将 type 事件以及对应的 fn 函数放入 this._events 中贮存
if (!this._events.get(type)) {this._events.set(type, fn);
}
};
// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
let handler;
handler = this._events.get(type);
if (Array.isArray(handler)) {
// 如果是一个数组阐明有多个监听者, 须要顺次此触发外面的函数
for (let i = 0; i < handler.length; i++) {if (args.length > 0) {handler[i].apply(this, args);
} else {handler[i].call(this);
}
}
} else {
// 单个函数的状况咱们间接触发即可
if (args.length > 0) {handler.apply(this, args);
} else {handler.call(this);
}
}
return true;
};
// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {const handler = this._events.get(type); // 获取对应事件名称的函数清单
if (!handler) {this._events.set(type, fn);
} else if (handler && typeof handler === "function") {
// 如果 handler 是函数阐明只有一个监听者
this._events.set(type, [handler, fn]); // 多个监听者咱们须要用数组贮存
} else {handler.push(fn); // 曾经有多个监听者, 那么间接往数组里 push 函数即可
}
};
EventEmeitter.prototype.removeListener = function(type, fn) {const handler = this._events.get(type); // 获取对应事件名称的函数清单
// 如果是函数, 阐明只被监听了一次
if (handler && typeof handler === "function") {this._events.delete(type, fn);
} else {
let postion;
// 如果 handler 是数组, 阐明被监听屡次要找到对应的函数
for (let i = 0; i < handler.length; i++) {if (handler[i] === fn) {postion = i;} else {postion = -1;}
}
// 如果找到匹配的函数, 从数组中革除
if (postion !== -1) {
// 找到数组对应的地位, 间接革除此回调
handler.splice(postion, 1);
// 如果革除后只有一个函数, 那么勾销数组, 以函数模式保留
if (handler.length === 1) {this._events.set(type, handler[0]);
}
} else {return this;}
}
};
实现具体过程和思路见实现 event
实现有并行限度的 Promise 调度器
题目形容:JS 实现一个带并发限度的异步调度器 Scheduler，保障同时运行的工作最多有两个
addTask(1000,"1");
addTask(500,"2");
addTask(300,"3");
addTask(400,"4");
的输入程序是：2 3 1 4
整个的残缺执行流程：一开始 1、2 两个工作开始执行
500ms 时，2 工作执行结束，输入 2，工作 3 开始执行
800ms 时，3 工作执行结束，输入 3，工作 4 开始执行
1000ms 时，1 工作执行结束，输入 1，此时只剩下 4 工作在执行
1200ms 时，4 工作执行结束，输入 4 实现代码如下:
class Scheduler {constructor(limit) {this.queue = [];
this.maxCount = limit;
this.runCounts = 0;
}
add(time, order) {const promiseCreator = () => {return new Promise((resolve, reject) => {setTimeout(() => {console.log(order);
resolve();}, time);
});
};
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 scheduler = new Scheduler(2);
const addTask = (time, order) => {scheduler.add(time, order);
};
addTask(1000, "1");
addTask(500, "2");
addTask(300, "3");
addTask(400, "4");
scheduler.taskStart();实现防抖函数（debounce）
防抖函数原理：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则从新计时。
那么与节流函数的区别间接看这个动画实现即可。
手写简化版:
// 防抖函数
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {clearTimeout(timer);
timer = setTimeout(() => {fn.apply(this, args);
}, delay);
};
};
实用场景：
- 按钮提交场景：避免屡次提交按钮，只执行最初提交的一次
- 服务端验证场景：表单验证须要服务端配合，只执行一段间断的输出事件的最初一次，还有搜寻联想词性能相似
生存环境请用 lodash.debounce
实现一个治理本地缓存过期的函数
封装一个能够设置过期工夫的
localStorage存储函数
class Storage{constructor(name){this.name = 'storage';}
// 设置缓存
setItem(params){
let obj = {
name:'', // 存入数据 属性
value:'',// 属性值
expires:"", // 过期工夫
startTime:new Date().getTime()// 记录何时将值存入缓存，毫秒级
}
let options = {};
// 将 obj 和传进来的 params 合并
Object.assign(options,obj,params);
if(options.expires){
// 如果 options.expires 设置了的话
// 以 options.name 为 key，options 为值放进去
localStorage.setItem(options.name,JSON.stringify(options));
}else{
// 如果 options.expires 没有设置，就判断一下 value 的类型
let type = Object.prototype.toString.call(options.value);
// 如果 value 是对象或者数组对象的类型，就先用 JSON.stringify 转一下，再存进去
if(Object.prototype.toString.call(options.value) == '[object Object]'){options.value = JSON.stringify(options.value);
}
if(Object.prototype.toString.call(options.value) == '[object Array]'){options.value = JSON.stringify(options.value);
}
localStorage.setItem(options.name,options.value);
}
}
// 拿到缓存
getItem(name){let item = localStorage.getItem(name);
// 先将拿到的试着进行 json 转为对象的模式
try{item = JSON.parse(item);
}catch(error){
// 如果不行就不是 json 的字符串，就间接返回
item = item;
}
// 如果有 startTime 的值，阐明设置了生效工夫
if(item.startTime){let date = new Date().getTime();
// 何时将值取出减去刚存入的工夫，与 item.expires 比拟，如果大于就是过期了，如果小于或等于就还没过期
if(date - item.startTime > item.expires){
// 缓存过期，革除缓存，返回 false
localStorage.removeItem(name);
return false;
}else{
// 缓存未过期，返回值
return item.value;
}
}else{
// 如果没有设置生效工夫，间接返回值
return item;
}
}
// 移出缓存
removeItem(name){localStorage.removeItem(name);
}
// 移出全副缓存
clear(){localStorage.clear();
}
}用法
let storage = new Storage();
storage.setItem({
name:"name",
value:"ppp"
})上面我把值取出来
let value = storage.getItem('name');
console.log('我是 value',value);设置 5 秒过期
let storage = new Storage();
storage.setItem({
name:"name",
value:"ppp",
expires: 5000
})// 过期后再取出来会变为 false
let value = storage.getItem('name');
console.log('我是 value',value);树形构造转成列表（解决菜单）
[
{
id: 1,
text: '节点 1',
parentId: 0,
children: [
{
id:2,
text: '节点 1_1',
parentId:1
}
]
}
]
转成
[
{
id: 1,
text: '节点 1',
parentId: 0 // 这里用 0 示意为顶级节点
},
{
id: 2,
text: '节点 1_1',
parentId: 1 // 通过这个字段来确定子父级
}
...
]实现代码如下:
function treeToList(data) {let res = [];
const dfs = (tree) => {tree.forEach((item) => {if (item.children) {dfs(item.children);
delete item.children;
}
res.push(item);
});
};
dfs(data);
return res;
}判断是否是电话号码
function isPhone(tel) {var regx = /^1[34578]\d{9}$/;
return regx.test(tel);
}字符串最长的不反复子串
题目形容
给定一个字符串 s，请你找出其中不含有反复字符的 最长子串 的长度。示例 1:
输出: s = "abcabcbb"
输入: 3
解释: 因为无反复字符的最长子串是 "abc"，所以其长度为 3。示例 2:
输出: s = "bbbbb"
输入: 1
解释: 因为无反复字符的最长子串是 "b"，所以其长度为 1。示例 3:
输出: s = "pwwkew"
输入: 3
解释: 因为无反复字符的最长子串是 "wke"，所以其长度为 3。请留神，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。示例 4:
输出: s = ""
输入: 0答案
const lengthOfLongestSubstring = function (s) {if (s.length === 0) {return 0;}
let left = 0;
let right = 1;
let max = 0;
while (right <= s.length) {let lr = s.slice(left, right);
const index = lr.indexOf(s[right]);
if (index > -1) {left = index + left + 1;} else {lr = s.slice(left, right + 1);
max = Math.max(max, lr.length);
}
right++;
}
return max;
};实现数组的扁平化
（1）递归实现
一般的递归思路很容易了解，就是通过循环递归的形式，一项一项地去遍历，如果每一项还是一个数组，那么就持续往下遍历，利用递归程序的办法，来实现数组的每一项的连贯：
let arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {let result = [];
for(let i = 0; i < arr.length; i++) {if(Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));
} else {result.push(arr[i]);
}
}
return result;
}
flatten(arr); // [1, 2, 3, 4，5]
（2）reduce 函数迭代
从下面一般的递归函数中能够看出，其实就是对数组的每一项进行解决，那么其实也能够用 reduce 来实现数组的拼接，从而简化第一种办法的代码，革新后的代码如下所示：
let arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.reduce(function(prev, next){return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
console.log(flatten(arr));// [1, 2, 3, 4，5]
（3）扩大运算符实现
这个办法的实现，采纳了扩大运算符和 some 的办法，两者独特应用，达到数组扁平化的目标：
let arr = [1, [2, [3, 4]]];
function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
（4）split 和 toString
能够通过 split 和 toString 两个办法来独特实现数组扁平化，因为数组会默认带一个 toString 的办法，所以能够把数组间接转换成逗号分隔的字符串，而后再用 split 办法把字符串从新转换为数组，如上面的代码所示：
let arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.toString().split(',');
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
通过这两个办法能够将多维数组间接转换成逗号连贯的字符串，而后再从新分隔成数组。
（5）ES6 中的 flat
咱们还能够间接调用 ES6 中的 flat 办法来实现数组扁平化。flat 办法的语法：arr.flat([depth])
其中 depth 是 flat 的参数，depth 是能够传递数组的开展深度（默认不填、数值是 1），即开展一层数组。如果层数不确定，参数能够传进 Infinity，代表不管多少层都要开展：
let arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.flat(Infinity);
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
能够看出，一个嵌套了两层的数组，通过将 flat 办法的参数设置为 Infinity，达到了咱们预期的成果。其实同样也能够设置成 2，也能实现这样的成果。在编程过程中，如果数组的嵌套层数不确定，最好间接应用 Infinity，能够达到扁平化。（6）正则和 JSON 办法 在第 4 种办法中曾经应用 toString 办法，其中依然采纳了将 JSON.stringify 的办法先转换为字符串，而后通过正则表达式过滤掉字符串中的数组的方括号，最初再利用 JSON.parse 把它转换成数组：
let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {let str = JSON.stringify(arr);
str = str.replace(/(\[|\])/g, '');
str = '[' + str + ']';
return JSON.parse(str);
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
对象数组列表转成树形构造（解决菜单）
[
{
id: 1,
text: '节点 1',
parentId: 0 // 这里用 0 示意为顶级节点
},
{
id: 2,
text: '节点 1_1',
parentId: 1 // 通过这个字段来确定子父级
}
...
]
转成
[
{
id: 1,
text: '节点 1',
parentId: 0,
children: [
{
id:2,
text: '节点 1_1',
parentId:1
}
]
}
]实现代码如下:
function listToTree(data) {let temp = {};
let treeData = [];
for (let i = 0; i < data.length; i++) {temp[data[i].id] = data[i];
}
for (let i in temp) {if (+temp[i].parentId != 0) {if (!temp[temp[i].parentId].children) {temp[temp[i].parentId].children = [];}
temp[temp[i].parentId].children.push(temp[i]);
} else {treeData.push(temp[i]);
}
}
return treeData;
}判断是否是电话号码
function isPhone(tel) {var regx = /^1[34578]\d{9}$/;
return regx.test(tel);
}
实现 bind 办法
bind的实现比照其余两个函数稍微地简单了一点，波及到参数合并(相似函数柯里化)，因为bind须要返回一个函数，须要判断一些边界问题，以下是bind的实现
bind返回了一个函数，对于函数来说有两种形式调用，一种是间接调用，一种是通过new的形式，咱们先来说间接调用的形式- 对于间接调用来说，这里抉择了
apply的形式实现，然而对于参数须要留神以下状况：因为bind能够实现相似这样的代码f.bind(obj, 1)(2)，所以咱们须要将两边的参数拼接起来 - 最初来说通过
new的形式，对于new的状况来说，不会被任何形式扭转this，所以对于这种状况咱们须要疏忽传入的this
简洁版本
- 对于一般函数，绑定
this指向 - 对于构造函数，要保障原函数的原型对象上的属性不能失落
Function.prototype.myBind = function(context = window, ...args) {
// this 示意调用 bind 的函数
let self = this;
// 返回了一个函数，...innerArgs 为理论调用时传入的参数
let fBound = function(...innerArgs) {//this instanceof fBound 为 true 示意构造函数的状况。如 new func.bind(obj)
// 当作为构造函数时，this 指向实例，此时 this instanceof fBound 后果为 true，能够让实例取得来自绑定函数的值
// 当作为一般函数时，this 指向 window，此时后果为 false，将绑定函数的 this 指向 context
return self.apply(
this instanceof fBound ? this : context,
args.concat(innerArgs)
);
}
// 如果绑定的是构造函数，那么须要继承构造函数原型属性和办法：保障原函数的原型对象上的属性不失落
// 实现继承的形式: 应用 Object.create
fBound.prototype = Object.create(this.prototype);
return fBound;
}// 测试用例
function Person(name, age) {console.log('Person name：', name);
console.log('Person age：', age);
console.log('Person this：', this); // 构造函数 this 指向实例对象
}
// 构造函数原型的办法
Person.prototype.say = function() {console.log('person say');
}
// 一般函数
function normalFun(name, age) {console.log('一般函数 name：', name);
console.log('一般函数 age：', age);
console.log('一般函数 this：', this); // 一般函数 this 指向绑定 bind 的第一个参数 也就是例子中的 obj
}
var obj = {
name: 'poetries',
age: 18
}
// 先测试作为结构函数调用
var bindFun = Person.myBind(obj, 'poetry1') // undefined
var a = new bindFun(10) // Person name: poetry1、Person age: 10、Person this: fBound {}
a.say() // person say
// 再测试作为一般函数调用
var bindNormalFun = normalFun.myBind(obj, 'poetry2') // undefined
bindNormalFun(12) // 一般函数 name: poetry2 一般函数 age: 12 一般函数 this: {name: 'poetries', age: 18}留神：
bind之后不能再次批改this的指向，bind屡次后执行，函数this还是指向第一次bind的对象
实现模板字符串解析性能
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
name: '姓名',
age: 18
}
render(template, data); // 我是姓名，年龄 18，性别 undefinedfunction render(template, data) {const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
if (reg.test(template)) { // 判断模板里是否有模板字符串
const name = reg.exec(template)[1]; // 查找以后模板里第一个模板字符串的字段
template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
return render(template, data); // 递归的渲染并返回渲染后的构造
}
return template; // 如果模板没有模板字符串间接返回
}