实现 JSONP 跨域
JSONP 核心原理：script 标签不受同源策略约束，所以可以用来进行跨域请求，优点是兼容性好，但是只能用于 GET 请求；
实现：
const jsonp = (url, params, callbackName) => { const generateUrl = () => { let dataSrc = ""; for(let key in params) { if(params.hasOwnProperty(key)) { dataSrc += `${key}=${params[key]}&` } } dataSrc += `callback=${callbackName}`; return `${url}?${dataSrc}`; } return new Promise((resolve, reject) => { const scriptEle = document.createElement('script'); scriptEle.src = generateUrl(); document.body.appendChild(scriptEle); window[callbackName] = data => { resolve(data); document.removeChild(scriptEle); } });}
复制代码
Unicode、UTF-8、UTF-16、UTF-32 的区别？
（1）Unicode
在说Unicode之前需要先了解一下ASCII码：ASCII 码（American Standard Code for Information Interchange）称为美国标准信息交换码。
ASCII码可以表示的编码有限，要想表示其他语言的编码，还是要使用Unicode来表示，可以说Unicode是ASCII 的超集。
Unicode全称 Unicode Translation Format，又叫做统一码、万国码、单一码。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
Unicode的实现方式（也就是编码方式）有很多种，常见的是 UTF-8、UTF-16、UTF-32 和 USC-2。
（2）UTF-8
UTF-8是使用最广泛的Unicode编码方式，它是一种可变长的编码方式，可以是 1—4 个字节不等，它可以完全兼容ASCII码的 128 个字符。
注意： UTF-8 是一种编码方式，Unicode是一个字符集合。
UTF-8的编码规则：
来看一下具体的Unicode编号范围与对应的UTF-8二进制格式 ：
那该如何通过具体的Unicode编码，进行具体的UTF-8编码呢？步骤如下：
找到该Unicode编码的所在的编号范围，进而找到与之对应的二进制格式
将Unicode编码转换为二进制数（去掉最高位的 0）
将二进制数从右往左一次填入二进制格式的X中，如果有X未填，就设为 0
来看一个实际的例子：“马” 字的Unicode编码是：0x9A6C，整数编号是39532 （1）首选确定了该字符在第三个范围内，它的格式是 1110xxxx 10xxxxxx 10xxxxxx （2）39532 对应的二进制数为1001 1010 0110 1100 （3）将二进制数填入 X 中，结果是：11101001 10101001 10101100
（3）UTF-16
1. 平面的概念
在了解UTF-16之前，先看一下平面的概念： Unicode编码中有很多很多的字符，它并不是一次性定义的，而是分区进行定义的，每个区存放 65536（216）个字符，这称为一个平面，目前总共有 17 个平面。
最前面的一个平面称为基本平面，它的码点从 0 — 216-1，写成 16 进制就是U+0000 — U+FFFF，那剩下的 16 个平面就是辅助平面，码点范围是 U+10000—U+10FFFF。
2. UTF-16 概念：
UTF-16也是Unicode编码集的一种编码形式，把Unicode字符集的抽象码位映射为 16 位长的整数（即码元）的序列，用于数据存储或传递。Unicode字符的码位需要 1 个或者 2 个 16 位长的码元来表示，因此UTF-16也是用变长字节表示的。
3. UTF-16 编码规则：
4. 编码识别
那么问题来了，当遇到两个字节时，怎么知道是把它当做一个字符还是和后面的两个字节一起当做一个字符呢？
UTF-16 编码肯定也考虑到了这个问题，在基本平面内，从 U+D800 — U+DFFF 是一个空段，也就是说这个区间的码点不对应任何的字符，因此这些空段就可以用来映射辅助平面的字符。
辅助平面共有 220 个字符位，因此表示这些字符至少需要 20 个二进制位。UTF-16 将这 20 个二进制位分成两半，前 10 位映射在 U+D800 — U+DBFF，称为高位（H），后 10 位映射在 U+DC00 — U+DFFF，称为低位（L）。这就相当于，将一个辅助平面的字符拆成了两个基本平面的字符来表示。
因此，当遇到两个字节时，发现它的码点在 U+D800 —U+DBFF之间，就可以知道，它后面的两个字节的码点应该在 U+DC00 — U+DFFF 之间，这四个字节必须放在一起进行解读。
5. 举例说明
以 "𡠀" 字为例，它的 Unicode 码点为 0x21800，该码点超出了基本平面的范围，因此需要用四个字节来表示，步骤如下：
首先计算超出部分的结果：0x21800 - 0x10000
将上面的计算结果转为 20 位的二进制数，不足 20 位就在前面补 0，结果为：0001000110 0000000000
将得到的两个 10 位二进制数分别对应到两个区间中
U+D800 对应的二进制数为 1101100000000000， 将0001000110填充在它的后 10 个二进制位，得到 1101100001000110，转成 16 进制数为 0xD846。同理，低位为 0xDC00，所以这个字的UTF-16 编码为 0xD846 0xDC00
（4） UTF-32
UTF-32 就是字符所对应编号的整数二进制形式，每个字符占四个字节，这个是直接进行转换的。该编码方式占用的储存空间较多，所以使用较少。
比如“马” 字的 Unicode 编号是：U+9A6C，整数编号是39532，直接转化为二进制：1001 1010 0110 1100，这就是它的 UTF-32 编码。
（5）总结
Unicode、UTF-8、UTF-16、UTF-32 有什么区别？
Unicode 是编码字符集（字符集），而UTF-8、UTF-16、UTF-32是字符集编码（编码规则）；
UTF-16 使用变长码元序列的编码方式，相较于定长码元序列的UTF-32算法更复杂，甚至比同样是变长码元序列的UTF-8也更为复杂，因为其引入了独特的代理对这样的代理机制；
UTF-8需要判断每个字节中的开头标志信息，所以如果某个字节在传送过程中出错了，就会导致后面的字节也会解析出错；而UTF-16不会判断开头标志，即使错也只会错一个字符，所以容错能力教强；
如果字符内容全部英文或英文与其他文字混合，但英文占绝大部分，那么用UTF-8就比UTF-16节省了很多空间；而如果字符内容全部是中文这样类似的字符或者混合字符中中文占绝大多数，那么UTF-16就占优势了，可以节省很多空间；
script 标签中 defer 和 async 的区别
如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：
执行顺序： 多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。
Promise 以及相关方法的实现
题目描述:手写 Promise 以及 Promise.all Promise.race 的实现
实现代码如下:
class Mypromise { constructor(fn) { // 表示状态 this.state = "pending"; // 表示then注册的成功函数 this.successFun = []; // 表示then注册的失败函数 this.failFun = [];
let resolve = (val) => { // 保持状态改变不可变（resolve和reject只准触发一种） if (this.state !== "pending") return;
// 成功触发时机 改变状态 同时执行在then注册的回调事件 this.state = "success"; // 为了保证then事件先注册（主要是考虑在promise里面写同步代码） promise规范 这里为模拟异步 setTimeout(() => { // 执行当前事件里面所有的注册函数 this.successFun.forEach((item) => item.call(this, val)); }); };
let reject = (err) => { if (this.state !== "pending") return; // 失败触发时机 改变状态 同时执行在then注册的回调事件 this.state = "fail"; // 为了保证then事件先注册（主要是考虑在promise里面写同步代码） promise规范 这里模拟异步 setTimeout(() => { this.failFun.forEach((item) => item.call(this, err)); }); }; // 调用函数 try { fn(resolve, reject); } catch (error) { reject(error); } }
// 实例方法 then
then(resolveCallback, rejectCallback) { // 判断回调是否是函数 resolveCallback = typeof resolveCallback !== "function" ? (v) => v : resolveCallback; rejectCallback = typeof rejectCallback !== "function" ? (err) => { throw err; } : rejectCallback; // 为了保持链式调用 继续返回promise return new Mypromise((resolve, reject) => { // 将回调注册到successFun事件集合里面去 this.successFun.push((val) => { try { // 执行回调函数 let x = resolveCallback(val); //（最难的一点） // 如果回调函数结果是普通值 那么就resolve出去给下一个then链式调用 如果是一个promise对象（代表又是一个异步） 那么调用x的then方法 将resolve和reject传进去 等到x内部的异步 执行完毕的时候（状态完成）就会自动执行传入的resolve 这样就控制了链式调用的顺序 x instanceof Mypromise ? x.then(resolve, reject) : resolve(x); } catch (error) { reject(error); } });
this.failFun.push((val) => { try { // 执行回调函数 let x = rejectCallback(val); x instanceof Mypromise ? x.then(resolve, reject) : reject(x); } catch (error) { reject(error); } }); }); } //静态方法 static all(promiseArr) { let result = []; //声明一个计数器 每一个promise返回就加一 let count = 0; return new Mypromise((resolve, reject) => { for (let i = 0; i < promiseArr.length; i++) { //这里用 Promise.resolve包装一下 防止不是Promise类型传进来 Promise.resolve(promiseArr[i]).then( (res) => { //这里不能直接push数组 因为要控制顺序一一对应(感谢评论区指正) result[i] = res; count++; //只有全部的promise执行成功之后才resolve出去 if (count === promiseArr.length) { resolve(result); } }, (err) => { reject(err); } ); } }); } //静态方法 static race(promiseArr) { return new Mypromise((resolve, reject) => { for (let i = 0; i < promiseArr.length; i++) { Promise.resolve(promiseArr[i]).then( (res) => { //promise数组只要有任何一个promise 状态变更 就可以返回 resolve(res); }, (err) => { reject(err); } ); } }); }}
// 使用// let promise1 = new Mypromise((resolve, reject) => {// setTimeout(() => {// resolve(123);// }, 2000);// });// let promise2 = new Mypromise((resolve, reject) => {// setTimeout(() => {// resolve(1234);// }, 1000);// });
// Mypromise.all([promise1,promise2]).then(res=>{// console.log(res);// })
// Mypromise.race([promise1, promise2]).then(res => {// console.log(res);// });
// promise1// .then(// res => {// console.log(res); //过两秒输出123// return new Mypromise((resolve, reject) => {// setTimeout(() => {// resolve("success");// }, 1000);// });// },// err => {// console.log(err);// }// )// .then(// res => {// console.log(res); //再过一秒输出success// },// err => {// console.log(err);// }// );
复制代码
扩展思考:如何取消 promise
Promise.race()方法可以用来竞争 Promise 可以借助这个特性 自己包装一个 空的 Promise 与要发起的 Promise 来实现
function wrap(pro) { let obj = {}; // 构造一个新的promise用来竞争 let p1 = new Promise((resolve, reject) => { obj.resolve = resolve; obj.reject = reject; });
obj.promise = Promise.race([p1, pro]); return obj;}
let testPro = new Promise((resolve, reject) => { setTimeout(() => { resolve(123); }, 1000);});
let wrapPro = wrap(testPro);wrapPro.promise.then((res) => { console.log(res);});wrapPro.resolve("被拦截了");
复制代码
树形结构转成列表
题目描述:
[ { 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;}
复制代码
Object.is 实现
题目描述:
Object.is不会转换被比较的两个值的类型，这点和===更为相似，他们之间也存在一些区别。 1. NaN在===中是不相等的，而在Object.is中是相等的 2. +0和-0在===中是相等的，而在Object.is中是不相等的
复制代码
实现代码如下:
Object.is = function (x, y) { if (x === y) { // 当前情况下，只有一种情况是特殊的，即 +0 -0 // 如果 x !== 0，则返回true // 如果 x === 0，则需要判断+0和-0，则可以直接使用 1/+0 === Infinity 和 1/-0 === -Infinity来进行判断 return x !== 0 || 1 / x === 1 / y; }
// x !== y 的情况下，只需要判断是否为NaN，如果x!==x，则说明x是NaN，同理y也一样 // x和y同时为NaN时，返回true return x !== x && y !== y;};
复制代码
instanceof
作用：判断对象的具体类型。可以区别 array 和 object， null 和 object 等。
语法：A instanceof B
如何判断的？: 如果 B 函数的显式原型对象在 A 对象的原型链上，返回true，否则返回false。
注意：如果检测原始值，则始终返回 false。
实现:
function myinstanceof(left, right) { // 基本数据类型都返回 false，注意 typeof 函数 返回"function" if((typeof left !== "object" && typeof left !== "function") || left === null) return false; let leftPro = left.__proto__; // 取左边的（隐式）原型 __proto__ // left.__proto__ 等价于 Object.getPrototypeOf(left) while(true) { // 判断是否到原型链顶端 if(leftPro === null) return false; // 判断右边的显式原型 prototype 对象是否在左边的原型链上 if(leftPro === right.prototype) return true; // 原型链查找 leftPro = leftPro.__proto__; }}
复制代码
偏函数
什么是偏函数？偏函数就是将一个 n 参的函数转换成固定 x 参的函数，剩余参数（n - x）将在下次调用全部传入。举个例子：
function add(a, b, c) { return a + b + c}let partialAdd = partial(add, 1)partialAdd(2, 3)
复制代码
发现没有，其实偏函数和函数柯里化有点像，所以根据函数柯里化的实现，能够能很快写出偏函数的实现：
function partial(fn, ...args) { return (...arg) => { return fn(...args, ...arg) }}
复制代码
如上这个功能比较简单，现在我们希望偏函数能和柯里化一样能实现占位功能，比如：
function clg(a, b, c) { console.log(a, b, c)}let partialClg = partial(clg, '_', 2)partialClg(1, 3) // 依次打印：1, 2, 3
复制代码
_ 占的位其实就是 1 的位置。相当于：partial(clg, 1, 2)，然后 partialClg(3)。明白了原理，我们就来写实现：
function partial(fn, ...args) { return (...arg) => { args[index] = return fn(...args, ...arg) }}
复制代码
LRU 算法
实现代码如下:
// 一个Map对象在迭代时会根据对象中元素的插入顺序来进行// 新添加的元素会被插入到map的末尾，整个栈倒序查看class LRUCache { constructor(capacity) { this.secretKey = new Map(); this.capacity = capacity; } get(key) { if (this.secretKey.has(key)) { let tempValue = this.secretKey.get(key); this.secretKey.delete(key); this.secretKey.set(key, tempValue); return tempValue; } else return -1; } put(key, value) { // key存在，仅修改值 if (this.secretKey.has(key)) { this.secretKey.delete(key); this.secretKey.set(key, value); } // key不存在，cache未满 else if (this.secretKey.size < this.capacity) { this.secretKey.set(key, value); } // 添加新key，删除旧key else { this.secretKey.set(key, value); // 删除map的第一个元素，即为最长未使用的 this.secretKey.delete(this.secretKey.keys().next().value); } }}// let cache = new LRUCache(2);// cache.put(1, 1);// cache.put(2, 2);// console.log("cache.get(1)", cache.get(1))// 返回 1// cache.put(3, 3);// 该操作会使得密钥 2 作废// console.log("cache.get(2)", cache.get(2))// 返回 -1 (未找到)// cache.put(4, 4);// 该操作会使得密钥 1 作废// console.log("cache.get(1)", cache.get(1))// 返回 -1 (未找到)// console.log("cache.get(3)", cache.get(3))// 返回 3// console.log("cache.get(4)", cache.get(4))// 返回 4
复制代码
参考：前端进阶面试题详细解答
图片懒加载
与普通的图片懒加载不同，如下这个多做了 2 个精心处理：
图片全部加载完成后移除事件监听；
加载完的图片，从 imgList 移除；
let imgList = [...document.querySelectorAll('img')]let length = imgList.length
// 修正错误，需要加上自执行- const imgLazyLoad = function() {+ const imgLazyLoad = (function() { let count = 0
return function() { let deleteIndexList = [] imgList.forEach((img, index) => { let rect = img.getBoundingClientRect() if (rect.top < window.innerHeight) { img.src = img.dataset.src deleteIndexList.push(index) count++ if (count === length) { document.removeEventListener('scroll', imgLazyLoad) } } }) imgList = imgList.filter((img, index) => !deleteIndexList.includes(index)) }- }+ })()
// 这里最好加上防抖处理document.addEventListener('scroll', imgLazyLoad)
复制代码
实现有并行限制的 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();
复制代码
详细说明 Event loop
众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。
JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。
console.log('script start');
setTimeout(function() { console.log('setTimeout');}, 0);
console.log('script end');
复制代码
以上代码虽然 setTimeout 延时为 0，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。所以 setTimeout 还是会在 script end 之后打印。
不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。
console.log('script start');
setTimeout(function() { console.log('setTimeout');}, 0);
new Promise((resolve) => { console.log('Promise') resolve()}).then(function() { console.log('promise1');}).then(function() { console.log('promise2');});
console.log('script end');// script start => Promise => script end => promise1 => promise2 => setTimeout
复制代码
以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。
微任务包括 process.nextTick ，promise ，Object.observe ，MutationObserver
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。
所以正确的一次 Event loop 顺序是这样的
执行同步代码，这属于宏任务
执行栈为空，查询是否有微任务需要执行
执行所有微任务
必要的话渲染 UI
然后开始下一轮 Event loop，执行宏任务中的异步代码
通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。
Node 中的 Event loop
Node 中的 Event loop 和浏览器中的不相同。
Node 的 Event loop 分为 6 个阶段，它们会按照顺序反复运行
┌───────────────────────┐┌─>│ timers ││ └──────────┬────────────┘│ ┌──────────┴────────────┐│ │ I/O callbacks ││ └──────────┬────────────┘│ ┌──────────┴────────────┐│ │ idle, prepare ││ └──────────┬────────────┘ ┌───────────────┐│ ┌──────────┴────────────┐ │ incoming: ││ │ poll │<──connections─── ││ └──────────┬────────────┘ │ data, etc. ││ ┌──────────┴────────────┐ └───────────────┘│ │ check ││ └──────────┬────────────┘│ ┌──────────┴────────────┐└──┤ close callbacks │ └───────────────────────┘
复制代码
timer
timers 阶段会执行 setTimeout 和 setInterval
一个 timer 指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟。
下限的时间有一个范围：[1, 2147483647] ，如果设定的时间不在这个范围，将被设置为 1。
I/O
I/O 阶段会执行除了 close 事件，定时器和 setImmediate 的回调
idle, prepare
idle, prepare 阶段内部实现
poll
poll 阶段很重要，这一阶段中，系统会做两件事情
执行到点的定时器
执行 poll 队列中的事件
并且当 poll 中没有定时器的情况下，会发现以下两件事情
如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制
如果 poll 队列为空，会有两件事发生
如果有 setImmediate 需要执行，poll 阶段会停止并且进入到 check 阶段执行 setImmediate
如果没有 setImmediate 需要执行，会等待回调被加入到队列中并立即执行回调
如果有别的定时器需要被执行，会回到 timer 阶段执行回调。
check
check 阶段执行 setImmediate
close callbacks
close callbacks 阶段执行 close 事件
并且在 Node 中，有些情况下的定时器执行顺序是随机的
setTimeout(() => { console.log('setTimeout');}, 0);setImmediate(() => { console.log('setImmediate');})// 这里可能会输出 setTimeout，setImmediate// 可能也会相反的输出，这取决于性能// 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate// 否则会执行 setTimeout
复制代码
当然在这种情况下，执行顺序是相同的
var fs = require('fs')
fs.readFile(__filename, () => { setTimeout(() => { console.log('timeout'); }, 0); setImmediate(() => { console.log('immediate'); });});// 因为 readFile 的回调在 poll 中执行// 发现有 setImmediate ，所以会立即跳到 check 阶段执行回调// 再去 timer 阶段执行 setTimeout// 所以以上输出一定是 setImmediate，setTimeout
复制代码
上面介绍的都是 macrotask 的执行情况，microtask 会在以上每个阶段完成后立即执行。
setTimeout(()=>{ console.log('timer1')
Promise.resolve().then(function() { console.log('promise1') })}, 0)
setTimeout(()=>{ console.log('timer2')
Promise.resolve().then(function() { console.log('promise2') })}, 0)
// 以上代码在浏览器和 node 中打印情况是不同的// 浏览器中打印 timer1, promise1, timer2, promise2// node 中打印 timer1, timer2, promise1, promise2
复制代码
Node 中的 process.nextTick 会先于其他 microtask 执行。
setTimeout(() => { console.log("timer1");
Promise.resolve().then(function() { console.log("promise1"); });}, 0);
process.nextTick(() => { console.log("nextTick");});// nextTick, timer1, promise1
复制代码
字符串模板
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; // 如果模板没有模板字符串直接返回}
复制代码
测试：
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let person = { name: '布兰', age: 12}render(template, person); // 我是布兰，年龄12，性别undefined
复制代码
数组扁平化
题目描述:实现一个方法使多维数组变成一维数组
最常见的递归版本如下：
function flatter(arr) { if (!arr.length) return; return arr.reduce( (pre, cur) => Array.isArray(cur) ? [...pre, ...flatter(cur)] : [...pre, cur], [] );}// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));
复制代码
扩展思考：能用迭代的思路去实现吗?
实现代码如下:
function flatter(arr) { if (!arr.length) return; while (arr.some((item) => Array.isArray(item))) { arr = [].concat(...arr); } return arr;}// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));
复制代码
事件总线（发布订阅模式）
class EventEmitter { constructor() { this.cache = {} } on(name, fn) { if (this.cache[name]) { this.cache[name].push(fn) } else { this.cache[name] = [fn] } } off(name, fn) { let tasks = this.cache[name] if (tasks) { const index = tasks.findIndex(f => f === fn || f.callback === fn) if (index >= 0) { tasks.splice(index, 1) } } } emit(name, once = false, ...args) { if (this.cache[name]) { // 创建副本，如果回调函数内继续注册相同事件，会造成死循环 let tasks = this.cache[name].slice() for (let fn of tasks) { fn(...args) } if (once) { delete this.cache[name] } } }}
// 测试let eventBus = new EventEmitter()let fn1 = function(name, age) { console.log(`${name} ${age}`)}let fn2 = function(name, age) { console.log(`hello, ${name} ${age}`)}eventBus.on('aaa', fn1)eventBus.on('aaa', fn2)eventBus.emit('aaa', false, '布兰', 12)// '布兰 12'// 'hello, 布兰 12'
复制代码
vue-router
vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度集成，让构建但页面应用变得易如反掌
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。
<keep-alive> 组件是一个用来缓存组件
router.beforeEach
router.afterEach
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
介绍了路由守卫及用法，在项目中路由守卫起到的作用等等
复制代码
IE 兼容
attchEvent('on' + type, handler)
detachEvent('on' + type, handler)
对事件循环的理解
因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中的任务。
Event Loop 执行顺序如下所示：
事件流
事件流是网页元素接收事件的顺序，"DOM2 级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡</title></head><body> <div> <p id="parEle">我是父元素 <span id="sonEle">我是子元素</span></p> </div></body></html><script type="text/javascript">var sonEle = document.getElementById('sonEle');var parEle = document.getElementById('parEle');parEle.addEventListener('click', function () { alert('父级 冒泡');}, false);parEle.addEventListener('click', function () { alert('父级 捕获');}, true);sonEle.addEventListener('click', function () { alert('子级冒泡');}, false);sonEle.addEventListener('click', function () { alert('子级捕获');}, true);
</script>
复制代码
当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按 DOM 事件流的顺序执行事件处理程序：
且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序，按上面的例子为，先调用冒泡阶段的事件处理程序，再调用捕获阶段的事件处理程序。依次 alert 出“子集冒泡”，“子集捕获”。
代码输出结果
function runAsync (x) { const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000)) return p}Promise.race([runAsync(1), runAsync(2), runAsync(3)]) .then(res => console.log('result: ', res)) .catch(err => console.log(err))
复制代码
输出结果如下：
then 只会捕获第一个成功的方法，其他的函数虽然还会继续执行，但是不是被 then 捕获了。
评论