MFWSCQ的博客

并发可以直接使用 Promise.all 进行多个 Promise 并发执行按顺序执行：1.可以使用 async 函数里面的 for of 进行迭代2.可以使用 reduce 函数进行迭代调用调用的promiseconst sleep = () => { return new Promise((resolve, reject) => { setTimeout(function(){ console.log('sleep') ...

两次返回结果const promise1 = new Promise((resolve, reject) => { resolve('promise1') })const promise2 = new Promise((resolve, reject) => { resolve('promise2') })promise1 .then(function () { return promise2 }) .then(function (val) { cons

var promise1 = new Promise((resolve, reject) => {reject();});promise1 .then(null, function() { return 123; }) .then(null, null) .then(null, null) .then( (val) => { console.log('promise2 已完成:' + val); }, (val) => { console.log('promise.

一、什么是 AST抽象语法树（Abstract Syntax Tree）简称 AST，是源代码的抽象语法结构的树状表现形式。webpack、eslint 等很多工具库的核心都是通过抽象语法树这个概念来实现对代码的检查、分析等操作。像我们常用的浏览器就是通过将 js 代码转化为抽象语法树来进行下一步的分析等其他操作。所以将 js 转化为抽象语法树更利于程序的分析。如上图中变量声明语句，转换为 AST 之后就是右图中显示的样式左图中对应的：var 是一个关键字 AST 是一个定义者

这里约定一个规则，实现一个方法decodeStr,输入一个字符串，根据约定规则输出编码结果。约定规则如下：str="2[a]1[bc]",返回"aabc".str="2[e2[d]]",返回"eddedd".str="3[abc]2[cd]ff",返回"abcabcabccdcdff".可以看出:N[string]，表示string正好重复N次。假设字符串一定是有效正确的字符串；但是你需要考虑其他可能出现的入参错误场景。...

实现一个打点计时器：1.从start至end，每隔100msconsole.log一个数字，每次数字增幅为12.返回的对象中需要包含一个cancel方法，用于停止定时操作3.第一个数字需要立即输出1、简单直接const count = (start,end)=>{ console.lo...

javaScript 中如何模拟实现方法的重载，动手实现下一、背景知识JavaScript 不支持重载的语法，它没有重载所需要的的函数签名。ECMAScript 函数不能向传统意义上那样实现重载。而在其他语言（如Java）中，可以为一个函数编写多个定义，只要这两个定义的签名（接受的参数的类型和数量）不同即可。如前所述，ECMAScript 函数没有签名，因为其参数是由包含零活多个值得数组来表示...

如何封装一个 localStorage，保证数据的时效性localStorageHTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。localStorage 是 HTML5 本地存储的 API ，使用键值对的方式进行存...

说一下 escape、encodeURI、encodeURLComponents 有什么区别？具体的使用场景？一、区别一、escape 和 unescapeJavascript 语言用于编码的函数，一共有三个，最古老的一个就是 escape。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从他讲起。escape() 不能直接用于 URL 编码，...

BFC 是什么？触发 BFC 的条件是什么？有哪些应用场景？1.概念BFC（Box Formatting context）：box 是 CSS 布局的对象和基本单位，BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此。块级格式化上下文布局规则：内部的 BOX 会在垂直方向一个接一个的防止；属于同一个 BFC 的两个相邻 Box 的 margin ...

说说浏览器渲染流程，分层之后再什么时候合成，什么是重排、重绘，怎样避免一、浏览器渲染流程详细版1.1 DOM 树构建渲染进程接收到的数据也就是 HMTL 。渲染器进程的核心任务就是把 html、css、js、image 等资源渲染成用户可以交互的 web 页面。渲染器进程的主线程将 html 进行解析，构造 DOM 数据结构。DOM 也就是文档对象模型，是浏览器对页面在其内部的表示形式，...

从输入 URL 到页面加载全过程回答思路回答问题的时候，关键要抓住核心的要点，把要点说全面，然后稍微加一些解析，要简明扼要，思路清晰，不能拖沓。1.首先回答加载的流程，回答要点浏览器根据 DNS 服务器得到域名的 IP 地址向这个 IP 的机器发送 HTTP 请求服务器收到、处理并返回 HTTP 请求浏览器得到返回内容2.稍加分析例如在浏览器输入 http:...

说下 V8 引擎解释执行 js 代码的大致流程一、前置知识1.1编程语言是如何运行的？众所周知，我们通过编程语言完成的程序是通过处理器运行的。但是处理器不能直接理解我们通过高级语言（如 C++、Go、JavaScript等）编写的代码，只能理解机器码，所以在执行程序之前，需要经过一系列的步骤，将我们编写的代码翻译成机器语言。这个过程一般是由编译器（Compiler）或者解释器（...

for...in 和 Object.keys 的区别for-in 是 JavaScript 中最常见的迭代语句，常常用来枚举对象的属性。某些情况下，可能按照随机顺序遍历数组元素；而 Object 构造器有一个实例属性 keys ，则可以返回以对象的属性为元素的数组。数组中属性名的顺序跟使用 for-in 遍历返回的顺序是一样的。for-in 循环会枚举对象原型链上的可枚举属性，而 Ob...

数组转树将数组形式的数据结构转为树形的数据结构，例如let arr= [ {id:1,name:'节点1',pid:null}, {id:2,name:'节点2',pid:null}, {id:3,name:'节点3',pid:1}, {id:4,name:'节点4',pid:2}, {id:5,name:'节点5',pid:1}, {id:6,name:'节点6',pid:3}, {id:7,name:'节点7',pid:4}, {

浏览器为什么要阻止跨域请求？如何解决跨域？每次跨域请求都需要到达服务端吗？一、什么是跨域跨域是针对浏览器的“同源策略”提出的说法，之所有有“同源策略”这种模式是基于网络安全方面的考虑。所有的同源策略关注三点：1.协议（http://www.baidu.com & https://www.baidu.com，...

如何记录前端在用户浏览器上发生的错误并汇报给服务器？一、代码执行的错误捕获1、try……catch使用 try……catch包裹，影响代码的可读性。无法处理异步中的错误，无法处理语法错误2、window.onerror比 try catch 要强那么一丢丢。无论是异步还是非异步错误，onerror 都能捕获到运行时错误缺点：监听不到...

nextTick 是在本次循环执行，还是在下次，setTimeout(()=>{},0)呢nextTick 在本次循环执行，且全部执行，setTimeout 在下次循环执行由于 js 是单线程，js 设计者吧任务分为同步任务和异步任务，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待；异步任务则是挂在一个任务队列里，等待主线程所有任务执行完...

Promise.all 中任何一个 Promise 出现错误的时候都会执行 reject，导致其他正常返回的数据也无法使用。你有什么解决办法吗1.在单个的 catch 中对失败的 Promise 请求做处理2.把 reject 操作换成 resolve(new Error("...")) 处理3.引入 Promise.allSettledconst promises = [ fecth...

Promise.resolve(obj) obj 有几种可能Promise.resolve 方法的参数分为四种情况1.参数是一个 Promise 实例如果参数是一个 Promise 实例，那么 Promise.resolve 将不做任何修改，原封不动的返回这个实例。2.如果参数是一个 thenable 兑现thenable 对象值得是具有 then 方法...

Promise.allSettled 了解吗？动手实现以下 Promise.allSettledPromise.allSettled(iterable) 概念const resolved = Promise.resolve(42);const...

实现 Promise.all一、核心思路1.接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数2.这个方法返回一个新的 Promise 对象3.遍历传入的参数，用 Promise.resolve() 将参数“包裹一层”，使其变成一个 Promise 对象4.参数所有回调成功才是成功，返回值数组与参数顺序一致5.参数数组其中一个失败，则触发...

介绍下 Promise 的特性、优缺点，内部是如何实现的，动手实现 Promise答案：一、Promise 基本特性1. Promise 有三种状态：pending (进行中)，fulfilled (已成功)，rejected (已失败)2. Pro...

Promise 构造函数是同步还是异步执行，then 呢Promise 构造函数时同步执行的，then 方法是异步执行的示例：new Promise(res=>{ console.log(1); resolve(3);}).then(res=>{ console.log(res);});conso...

手动实现 call，bind答案：call：Function.prototype.myCall = function(context,...args){ //谁调用的call,谁就是这个this，必须是一个function,比如：fn.call...

Promise 有没有解决异步问题Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一的接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层一层的嵌套回调函数。Promise ...

写出输出结果：const p1 = () => (new Promise((resolve, reject) => { console.log(1); let p2 = new Promise((resolve, reject) => { console.log(2); const timeOut1 = setTimeout(() => { console.log(3); resol

微任务和宏任务的区别答案：微任务和宏任务是异步任务的两个分类。宏任务：当前调用栈中执行的代码成为宏任务。（主代码块，定时器等）。微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。（Promise.then，proness....

说下 offsetWidth 和 clientWidth、offsetHeight 和 clientHeight 的区别，说说 offsetTop，offsetLeft，scrollWidth，scrollHeight 属性作用扩展offset 相关：offsetWidth offsetHeight offsetTop offsetLeftclient 相关：clientWidth clientHeight clientTop clientLeftscroll 相关：scrollWidth

对闭包的看法，为什么要使用闭包，说一下闭包的原理以及应用场景答案：一、什么是闭包闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，...

原生实现 ES5 的 Object.create() 方法答案：Object.create() 方法创建一个新的对象，使用现有对象来提供新创建的对象的 __proto__ 属性。返回一个新对象，带着指定的原型对象和属性。Object.c...

项目中如何进行异常捕获答案：一、代码执行的异常捕获1.try ...... catch能捕获到代码执行的错误捕获不到语法的错误无法处理异步中的错误使用 try......catch 包裹影响代码的可读性2.window.onerror无论是异步还是非异步错误，onerror 都...

对虚拟 DOM 的理解，虚拟 DOM 主要做了什么，虚拟 DOM 本身是什么答案：一、什么是 虚拟 DOM从本质上来说，Virtual DOM 是一个 JavaScript 对象，通过对象的方式来表示 DOM 结构。将页面的状态抽象为 JS 对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次 DOM 修改的结果一次性的更新到页...

问：简述 import 原理，与 require 有什么不同答案：import 原理（实际上就是 ES6 module 的原理）1.简单来说就是闭包的运用2.为了创建 Module 的内部作用域，会调用一个包装函数3.包装函数的返回值也就是 Module 向外公开的 API，也就是所有 export 出去的变量4.import 也就是拿到 module ...

function capture(re,str){ var match = re.exec(str); return match && match[1];}var numRe = /num=(\d+)/ig, wordRe = /leo=(\w+)/i, a1 = capture(numRe,"num=1"), a2 = capture(wordRe,"leo=1"), a3 = capture(numRe,"NUM=2"), .

Object.seal 和 Object.freeze 方法之间有什么区别答案：这两种方法之间的区别在于，但我们对一个对象使用 Object.freeze 方法时，该对象的属性是不可变的，这意味着我们不能更改或者编辑这些属性的值。而在 Object.seal...

写出代码执行的打印结果var arr1 = "ab".split('');var arr2 = arr1.reverse();var arr3 = "abc".split('');arr2.push(arr3);console.log(arr1.length);console.log(arr1.slice(-1));console.log(arr2.length);console.log(arr2.slice(-1));...

写出正确的打印结果并解释原因：const a = [1,2,3], b = [1,2,3], c = [1,2,4], d = "2", e = "11";console.log([a==b,a===b,a>c,a<c,d>e]);...

给定一个只包含 "("，"{"，"["，")"，"}"，"]" 的字符串，判断字符串是否是有效字符串需要满足：1、左括号必须用相同类型的有括号闭合2、左括号必须以正确的方式闭合注意：空字符串被认为是有效字符串示例1：输入："()"输出：true示例2：输入："()[]{}"输出：true示例3：输入："(]"输出：false示例4：输入："([)]"输出：false示例5：输入："{([])}"输出：true...

完成一个 safeGet 函数，可以安全的获取无限多层次的数据，一旦数据不存在不会报错，会返回 undefined，例如：var data = {a:{b:{c:'aaa'}}}safeGet(data,'a.b.c'); //'aaa'safeGet(data,'a.b.c.d'); //undeifnedsafeGet(data,'a.b.c.d.e.f'); //undeifned...