1.说一说cookie sessionStorage localStorage 区别？ 得分点 数据存储位置、生命周期、存储大小、写入方式、数据共享、发送请求时是否携带、应用场景 标准回答 Cookie、SessionStorage、 LocalStorage都是浏览器本地存储。 它们的共同点： 都存储在浏览器本地 区别： cookie它是由服务器端写入的SessionStorage、 LocalStorage都是前端写的， cookie服务器端在写入时设置了生命周期，LocalStorage除非手动清除，否则写入总是存在的，SessionStorage页面关闭时会自动清除。 cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间相对较大，约5M。 Cookie、SessionStorage、LocalStorage数据共享遵循同源原则，SessionStorage限制必须是同一页。 当前端向后端发送请求时，将自动携带Cookie但是SessionStorage、 LocalStorage不会 加分回答 应用场景也不同， Cookie一般用于存储登录验证信息SessionID或者token， LocalStorage存储不易变化的数据，降低服务器压力， SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。
2.说一说JS有哪些类型的数据，有什么区别？ 得分点 Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种 标准回答 JS数据类型分为两类： 一种是基本数据类型，又称简单数据类型，分别包括7种类型Number、String、Boolean、BigInt、Symbol、Null、Undefined。 另一种是引用数据类型，也称为复杂数据类型，通常使用Object代表，普通对象，数组，正则，日期，Math属于数学函数Object。 数据分为两类： 基本数据类型和引用数据类型它们在内存中的存储方式不同。 基本数据类型是直接存储在栈中的简单数据段，占用空间小，属于频繁使用的数据。 引用的数据类型储在堆内存中，占用空间大。 参考数据类型存储在堆栈中的指针，指向堆中实体的起始地址。当解释器找到参考值时，将检索堆栈中的地址，并从堆中获得实体。 加分回答 Symbol是ES6新数据类型，其特点是无重复数据，可用作object的key。 创建数据的方法Symbol()由于其结构函数不完整，不能使用new Symbol()创建数据。 由于Symbol()创建数据是独一无二的，所以 Symbol() !== Symbol(), 同时使用Symbol数据作为key不能使用for获取到这个key，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。 let key = Symbol('key'); let obj = { [key]: 'symbol'}; let keyArray = Object.getOwnPropertySymbols(obj); // 返回数组[Symbol('key')] obj[keyArray[0]] // 'symbol' BigInt也是ES一种新的数据类型，其特点是数据覆盖范围大，可以解决超出普通数据类型范围的错误报告问题。 使用方法： -直接结束整数 n：647326483767797n -调用BigInt()构造函数：BigInt("647326483767797") 注意：BigInt和Number不能混合 4.说说你对闭包的理解？ 得分点 内部变量、内存泄漏、内存溢出、变量背包、功能域链、局部变量不销毁、函数体外访问函数形成块级功能域、柯里化、构造函数定义特权方法、Vue中数据响应式Observer 标准回答 闭包 函数与词法环境的引用捆绑在一起，这种组合是封闭的（closure）。 一般是函数A，return其内部函数B，被returnB函数可以在外部访问A函数内部的变量，此时形成B函数的变量闭包， A函数执行后，变量闭包不会被销毁，变量闭包只能通过B函数在A函数外面访问。 闭包形成原理： 作用域链，当前作用域可以访问上级作用域的变量 闭包问题： 函数执行后，函数作用域中的变量不会被销毁，函数内的局部变量也可以在函数外部访问。 闭包问题： 由于垃圾回收器不会破坏闭包中的变量，因此会导致内存泄漏。如果内存泄漏积累过多，很容易导致内存溢出。 加分回答 可模仿块级作用域，实现柯里化，在构造函数中定义特权方法，Vue中数据响应式Observer使用闭包等。 5.说一说promise使用方法是什么？ 得分点 pendding、rejected、resolved、微任务、then、catch、Promise.resolve()、Promise.reject()、Promise.all() Promise.any()、Promise.race() 标准回答 Promise的作用： Promise异步微任务解决了异步多层嵌套回调的问题，使代码更具可读性，更容易维护 Promise使用： Promise是ES可以使用6提供的构造函数Promise构造函数new一个实例， Promise构造函数接收一个函数作为参数，分别有两个参数 `resolve`和`reject`， `resolve`将Promise状态待到成功，将异步操作的结果作为参数传递到过去； `reject`将状态从等待变为失败，在异步操作失败时调用，将异步操作报告的错误作为参数传递过去。 实例创建完成后，可以使用`then`该方法还可用于指定成功或失败的回调函数catch捕获失败，then和catch最后还有一个返回Promise，所以可以链式调用。 Promise的特点： 1. 对象的状态不受外界影响（Promise对象代表三种状态的异步操作。 - pending（执行中） - Resolved(成功，又称Fulfilled） - rejected（拒绝） 其中pendig为初始状态，fulfilled和rejected为结束状态（结束状态表示promise的生命周期已结束）。 2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise对象的状态改变，只有两种可能（状态凝固了，就不会再变了，会一直保持这个结果）： - 从Pending变为Resolved - 从Pending变为Rejected 3. resolve 方法的参数是then中回调函数的参数，reject 方法中的参数是catch中的参数 4. then 方法和 catch方法 只要不报错，返回的都是一个fullfilled状态的promise 加分回答 Promise的其他方法： Promise.resolve(): 返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。 Promise.reject()：返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法。 Promise.all()： 返回一个新的promise对象，该promise对象在参数对象里所有的promise对象都成功的时候才会触发成功， 一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。 Promise.any()：接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。 Promise.race()： 当参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。 是什么： 是异步编程的一种解决方案， Promise是异步微任务 有什么用： 解决了回调地狱的问题，让代码看起来更加优雅。 怎么用： new Promise((resolve,reject) => { resolve（）; reject（）; })里面有多个resovle或者reject只执行第一个。 调用resolve()会执行then部分，出现错误会执行catch部分，此外promise.all([]).then(rs=>{})还支持顺序执行多个请求,rs的结果是一个请求结果数组 特点： 有三种状态pending,resolved,rejectd。其中pending为起始状态，resolved,rejectd是结束状态。一旦结束状态确定，就不能再变了。 6.说一说跨域是什么？如何解决跨域问题？ 得分点 同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage 标准回答 跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。 跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。 跨域报错信息： 跨域解决方案 cors：目前最常用的一种解决办法，通过设置后端允许跨域实现。 res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST"); node中间件、nginx反向代理： 跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器， 静态页面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。 JSONP： 利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。 后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。 postmessage： H5新增API，通过发送和接收API实现跨域通信。 加分回答 跨域场景：前后端分离式开发、调用第三方接口
7.说一说BFC 得分点 块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display 标准回答 BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。 BFC布局规则 -内部盒子会在垂直方向，一个接一个地放置。 -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 -每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 -BFC的区域不会与float box重叠。 -BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 -计算BFC的高度时，浮动元素也参与计算。 BFC形成的条件 -`float `设置成 `left `或 `right` -`position `是`absolute`或者`fixed` -`overflow `不是`visible`，为 `auto`、`scroll`、`hidden` -`display`是`flex`或者`inline-block` 等 BFC解决能的问题： 清除浮动 加分回答 BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有`overflow:hidden`, 原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。 如果设置父级为`display:flex`，内部的浮动就会失效。 所以通常只使用`overflow: hidden`清除浮动。 IFC（Inline formatting contexts）： 内联格式上下文。 IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而 扰乱。 GFC（GrideLayout formatting contexts）： 网格布局格式化上下文。 当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。 FFC（Flex formatting contexts）： 自适应格式上下文。 display值为flex或者inline-flex的元素将会生成自适应容器。 8.说一说JavaScript有几种方法判断变量的类型？ 得分点 typeof、 instanceof、 Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型) 标准回答 JavaScript有4种方法判断变量的类型，分别是typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型) typeof： 常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object'。 instanceof： 主要用于区分引用数据类型， 检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true， 不太适合用于简单数据类型的检测， 检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。 constructor： 用于检测引用数据类型， 检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的， 这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。 Object.prototype.toString.call()： 适用于所有类型的判断检测， 检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。 这四种判断数据类型的方法中，各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()这种方法。 加分回答 instanceof的实现原理： 验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为true。 因此，`instanceof` 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 `prototype`，找到返回true，未找到返回false。 Object.prototype.toString.call()原理： Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变this的指向， 那么把Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果 JavaScript有4种方法判断变量的类型，分别是 typeof：常用于判断基本数据类型（基础类型）（根据底层数据存储的二进制判断） instanceof：主要用于区分引用数据类型（引用类型）（根据原型链判断） constructor (用于引用数据类型)（根据构造器判断） Object.prototype.toString.call()（对象原型链判断方法）（通用）（每个对象上记载的属性名称） 这四种判断数据类型的方法中，各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()这种方法。
9.说一说样式优先级的规则是什么？ 得分点 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式 标准回答 CSS样式的优先级应该分成四大类 -第一类`!important`，无论引入方式是什么，选择器是什么，它的优先级都是最高的。 -第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。 -第三类选择器， 选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。 -第四类继承样式，是所有样式中优先级比较低的。 -第五类浏览器默认样式优先级最低。 加分回答 使用!important要谨慎 - 一定要优先考虑使用样式规则的优先级来解决问题而不是 `!important` - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 `!important` - 永远不要在你的插件中使用 `!important` - 永远不要在全站范围的 CSS 代码中使用 `!important` 优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效， 比如：在设置`max-width`时注意，已经给元素的`max-width`设置了`!important`但是还不生效，很有可能就是被width覆盖了 举例： `div`最终的宽度还是`200px` div { max-width: 400px !important; height: 200px; background-color: tomato; width: 200px; } !important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器
10.说一说JS实现异步的方法？ 得分点 回调函数、事件监听、setTimeout、Promise、生成器Generators/yield、async/awt 标准回答 所有异步任务都是在同步任务执行结束之后，从任务队列中依次取出执行。 回调函数是异步操作最基本的方法，比如AJAX回调， 回调函数的优点是简单、容易理解和实现， 缺点是不利于代码的阅读和维护， 各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。 此外它不能使用 try catch 捕获错误，不能直接 return Promise包装了一个异步调用并生成一个Promise实例， 当异步调用返回的时候根据调用的结果分别调用实例化时传入的resolve 和 reject方法，then接收到对应的数据，做出相应的处理。 Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题， 缺点是无法取消 Promise，错误需要通过回调函数捕获。 Generator 函数是 ES6 提供的一种异步编程解决方案， Generator 函数是一个状态机，封装了多个内部状态，可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。 优点是异步语义清晰， 缺点是手动迭代`Generator` 函数很麻烦，实现逻辑有点绕 async/awt是基于Promise实现的，async/awt使得异步代码看起来像同步代码， 所以优点是，使用方法清晰明了， 缺点是awt 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 awt 会导致性能上的降低， 代码没有依赖性的话，完全可以使用 Promise.all 的方式。 加分回答 JS 异步编程进化史：callback -> promise -> generator/yield -> async/awt。 async/awt函数对 Generator 函数的改进，体现在以下三点： - 内置执行器。 Generator 函数的执行必须靠执行器，而 async 函数自带执行器。 也就是说，async 函数的执行，与普通函数一模一样，只要一行。 - 更广的适用性。 yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 awt 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。 - 更好的语义。 async 和 awt，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，awt 表示紧跟在后面的表达式需要等待结果。 目前使用很广泛的就是promise和async/awt 所有异步任务都是在同步任务执行完成后，从任务队列中取出依次执行。settimeout 事件监听，回调函数，promise, generator, async/await JS 异步编程进化史：callback -> promise -> generator/yield -> async/awt。
11.说一说数组去重都有哪些方法？ 得分点 对象属性、new Set() 、indexOf、hasOwnProperty、reduce+includes、filter 标准回答 第一种方法：利用对象属性key排除重复项： 遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中， 并且把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。 这个方法的优点是效率较高， 缺点是占用了较多空间，使用的额外空间有一个查询对象和一个新的数组 第二种方法：利用Set类型数据无重复项： new 一个 Set，参数为需要去重的数组，Set 会自动删除重复的元素，再将 Set 转为数组返回。 这个方法的优点是效率更高，代码简单，思路清晰， 缺点是可能会有兼容性问题 第三种方法：filter+indexof 去重： 这个方法和第一种方法类似，利用 Array 自带的 filter 方法，返回 arr.indexOf(num) 等于 index 的num。 原理就是 indexOf 会返回最先找到的数字的索引，假设数组是 [1, 1]，在对第二个1使用 indexOf 方法时，返回的是第一个1的索引0。 这个方法的优点是可以在去重的时候插入对元素的操作，可拓展性强。 第四种方法：这个方法比较巧妙， 从头遍历数组，如果元素在前面出现过，则将当前元素挪到最后面，继续遍历，直到遍历完所有元素，之后将那些被挪到后面的元素抛弃。 这个方法因为是直接操作数组，占用内存较少。 第五种方法：reduce +includes去重： 这个方法就是利用reduce遍历和传入一个空数组作为去重后的新数组， 然后内部判断新数组中是否存在当前遍历的元素，不存在就插入到新数组中。 这种方法时间消耗多，内存空间也有额外占用。 方法还有很多，常用的、了解的这些就可以 加分回答 以上五个方法中，在数据低于10000条的时候没有明显的差别， 高于10000条，第一种和第二种的时间消耗最少，后面三种时间消耗依次增加， 由于第一种内存空间消耗比较多，且现在很多项目不再考虑低版本浏览器的兼容性问题， 所以建议使用第二种去重方法，简洁方便。 12.说一说null 和 undefined 的区别，如何让一个属性变为null 得分点 操作的变量没有被赋值、全局对象的一个属性、函数没有return返回值、值 `null` 特指对象的值未设置 undefined == null、undefined !== null 标准回答 undefind 是全局对象的一个属性， 当一个变量没有被赋值 或者一个函数没有返回值 或者某个对象不存在某个属性却去访问 或者函数定义了形参但没有传递实参，这时候都是undefined。 undefined通过typeof判断类型是'undefined'。undefined == undefined undefined === undefined 。 null 代表对象的值未设置，相当于一个对象没有设置指针地址就是null。 null通过typeof判断类型是'object'。null === null null == null null == undefined null !== undefined undefined 表示一个变量初始状态值，而 null 则表示一个变量被人为的设置为空对象，而不是原始状态。 在实际使用过程中，不需要对一个变量显式的赋值 undefined，当需要释放一个对象时，直接赋值为 null 即可。 让一个变量为null，直接给该变量赋值为null即可。 加分回答 null 其实属于自己的类型 Null，而不属于Object类型， typeof 之所以会判定为 Object 类型， 是因为JavaScript 数据类型在底层都是以二进制的形式表示的， 二进制的前三位为 0 会被 typeof 判断为对象类型， 而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。 对象被赋值了null 以后，对象对应的堆内存中的值就是游离状态了，GC 会择机回收该值并释放内存。 因此，需要释放某个对象，就将变量设置为 null，即表示该对象已经被清空，目前无效状态。
13.说一下浮动？ 得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法 标准回答 浮动的作用，设置浮动的图片，可以实现文字环绕图片， 设置了浮动的块级元素可以排列在同一行， 设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。 设置浮动元素的特点： -设置了浮动，该元素脱标。元素不占位置 -浮动可以进行模式转换（行内块元素） 浮动造成的影响， 使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了， 同时也会造成父级盒子后面的兄弟盒子布局受到影响。 如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。 清除浮动的方法： -伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`：给浮动元素父级增加`overflow：hidden`属性 额外标签法：给浮动元素父级增加标签 加分回答 三种清除浮动的特点和影响 -伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法 -`overflow：hidden`：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏， 在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁 -标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用 14.说一说es6中箭头函数？ 得分点 没有this、this是从外部获取、不能使用new、没有arguments、没有原型和super 标准回答 箭头函数相当于匿名函数，简化了函数定义。 箭头函数最大的特点就是没有this，所以this是从外部获取，就是继承外部的执行上下文中的this， 由于没有this关键字所以箭头函数也不能作为构造函数 加分回答 箭头函数的不适用场景： -定义对象上的方法 不适合做事件处理程序 此时触发点击事件 箭头函数函数适用场景： -简单的函数表达式，内部没有this引用，没有递归、事件绑定、解绑定，适用于map、filter等方法中
15.说一说call apply bind的作用和区别？ 得分点 bind改变this指向不直接调用、 call和apply改变this指向直接调用、 apply接收第二个参数为数组 、 call用于对象的继承 、伪数组转换成真数组、 apply用于找出数组中的最大值和最小值以及数组合并、 bind用于vue或者react框架中改变函数的this指向 标准回答 call、apply、bind的作用都是改变函数运行时的this指向。 bind和call、apply在使用上有所不同， bind在改变this指向的时候，返回一个改变执行上下文的函数，不会立即执行函数，而是需要调用该函数的时候再调用即可， 但是call和apply在改变this指向的同时执行了该函数。 bind只接收一个参数，就是this指向的执行上文。 call、apply接收多个参数，第一个参数都是this指向的执行上文，后面的参数都是作为改变this指向的函数的参数。 但是call和apply参数的格式不同，call是一个参数对应一个原函数的参数，但是apply第二个参数是数组， 数组中每个元素代表函数接收的参数，数组有几个元素函数就接收几个元素。 加分回答 call的应用场景： 对象的继承，在子构造函数这种调用父构造函数，但是改变this指向，就可以继承父的属性 function superClass () { this.a = 1; this.print = function () { console.log(this.a); } } function subClass () { superClass.call(this); // 执行superClass，并将superClass方法中的this指向subClass this.print(); } subClass(); 借用Array原型链上的slice方法，把伪数组转换成真数组 let domNodes = Array.prototype.slice.call(document.getElementsByTagName("div")); apply的应用场景： Math.max，获取数组中最大、最小的一项 let max = Math.max.apply(null, array); let min = Math.min.apply(null, array); 实现两个数组合并 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); // [1, 2, 3, 4, 5, 6] bind的应用场景 在vue或者react框架中，使用bind将定义的方法中的this指向当前类 16.说一说HTML语义化？ 得分点 语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读 标准回答 HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签 17.说一说this指向（普通函数、箭头函数）？ 得分点 全局执行上下文、函数执行上下文、this严格模式下undefined、非严格模式window、构造函数新对象本身、普通函数不继承this、箭头函数无this，可继承 标准回答 this关键字由来： 在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。 但是 JavaScript 的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。 this存在的场景有三种全局执行上下文和函数执行上下文和eval执行上下文，eval这种不讨论。 在全局执行环境中无论是否在严格模式下，（在任何函数体外部）`this` 都指向全局对象。 在函数执行上下文中访问this，函数的调用方式决定了 `this` 的值。 在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window， 通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。 普通函数this指向： 当函数被正常调用时， 在严格模式下，this 值是 undefined， 非严格模式下 this 指向的是全局对象 window； 通过一个对象来调用其内部的一个方法， 该方法的执行上下文中的 this 指向对象本身。 new 关键字构建好了一个新对象，并且构造函数中的 this 其实就是新对象本身。 嵌套函数中的 this 不会继承外层函数的 this 值。 箭头函数this指向： 箭头函数并不会创建其自身的执行上下文，所以箭头函数中的 this 取决于它的外部函数。 加分回答 箭头函数因为没有this，所以也不能作为构造函数， 但是需要继承函数外部this的时候，使用箭头函数比较方便 var myObj = { name : "闷倒驴", showThis:function(){ console.log(this); // myObj var bar = ()=>{ this.name = "王美丽"; console.log(this) // myObj } bar(); } }; myObj.showThis(); console.log(myObj.name); // "王美丽" console.log(window.name); // '' 普通函数执行指向window，箭头函数中的this指向上一级作用域中的this。
18.说一说CSS尺寸设置的单位 px：绝对像素 2. rem：相对于根元素像素 3. em：相对于父元素像素 4. vw：视口宽度 5. vh：视口高度 得分点 px、rem、em、vw、vh 标准回答 px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。 em：相对长度单位，在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。 rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小。 vw：相对长度单位，相对于视窗宽度的1%。 vh：相对长度单位，相对于视窗高度的1%。 加分回答 rem应用： 在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。 原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小， 页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改 vw应用： 由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。 原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改， 无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。
19.说几个未知宽高元素水平垂直居中方法 标准回答 未知宽高元素水平垂直都居中的实现方法： 1. 设置元素相对父级定位`position:absolute;left:50%;right:50%`，让自身平移自身高度50% `transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式 2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中 3. 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持 4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `，这种方式兼容性较好
20.说一说JS变量提升？ 得分点 Var声明的变量声明提升、函数声明提升、let和const变量不提升 标准回答 变量提升是指JS的变量和函数声明会在代码编译期，提升到代码的最前面。 变量提升成立的前提是使用Var关键字进行声明的变量，并且变量提升的时候只有声明被提升，赋值并不会被提升，同时函数的声明提升会比变量的提升优先。 变量提升的结果，可以在变量初始化之前访问该变量，返回的是undefined。在函数声明前可以调用该函数。 加分回答 使用let和const声明的变量是创建提升，形成暂时性死区，在初始化之前访问let和const创建的变量会报错。 21.说一说 HashRouter 和 HistoryRouter的区别和原理？ 得分点 `#` `window.onhashchange` `history.pushState ` `window.onpopstate` 标准回答 HashRouter和 HistoryRouter的区别： 1.history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现 2. history的url没有'#'号，hash反之 3.相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。 HashRouter的原理： 通过`window.onhashchange`方法获取新URL中hash值，再做进一步处理 HistoryRouter的原理： 通过`history.pushState `使用它做页面跳转不会触发页面刷新，使用`window.onpopstate` 监听浏览器的前进和后退，再做其他处理 加分回答 hash模式下url会带有#，需要url更优雅时，可以使用history模式。 需要兼容低版本的浏览器时，建议使用hash模式。 需要添加任意类型数据到记录时，可以使用history模式。 22.说一说map 和 forEach 的区别？ 得分点 map创建新数组、map返回处理后的值、forEach()不修改原数组、forEach()方法返回undefined 标准回答 map 和 forEach 的区别： map有返回值，可以开辟新空间，return出来一个length和原数组一致的数组，即便数组元素是undefined或者是null。 forEach默认无返回值，返回结果为undefined，可以通过在函数体内部使用索引修改数组元素。 加分回答 map的处理速度比forEach快，而且返回一个新的数组，方便链式调用其他数组新方法， 比如filter、reduce let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(value => value * value).filter(value => value > 10); // arr2 = [16, 25] 23.说一说事件循环Event loop，宏任务与微任务？ 得分点 任务挂起、同步任务执行结束执行队列中的异步任务、执行script标签内部代码、 setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate、 I/O（Node.js）Promise、MutonObserver、Object.observe、process.nextTick（Node.js） 每个宏任务中都包含了一个微任务队列 标准回答 浏览器的事件循环： 执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起， 等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成， 将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。 异步任务又分为宏任务和微任务。 宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。 微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务 宏任务包含： 执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate，I/O（Node.js） 微任务包含： Promise、MutonObserver、Object.observe、process.nextTick（Node.js） 加分回答 浏览器和Node 环境下，microtask 任务队列的执行时机不同 - Node端，microtask 在事件循环的各个阶段之间执行 - 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行 24.说一说三栏布局的实现方案 得分点 圣杯布局、双飞翼布局、三栏高度不定、中间栏内容多先渲染 标准回答 三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多， 为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。 实现三栏布局的方法通常是圣杯布局和双飞翼布局。 圣杯布局的实现方案： 三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面， 父级盒子设置左右`padding`，三个盒子全部浮动， 设置中间盒子宽度100%，左右盒子设置固定宽度， 设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度， 右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 双飞翼布局的实现方案： 三个盒子对应三个元素，其中中间盒子套了两层， 中间盒子内部盒子设置`margin`,三个盒子全部浮动， 设置中间盒子宽度100%，左右盒子设置固定宽度, 设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度， 最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 加分回答 圣杯布局: - 优点：不需要添加dom节点 - 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。 双飞翼布局： - 优点：不会像圣杯布局那样变形，CSS样式代码更简洁 - 缺点：多加了一层dom节点
25.说一下浏览器垃圾回收机制？ 得分点 栈垃圾回收、堆垃圾回收、新生区老生区、Scavenge算法、标记-清除算法、标记-整理算法、全停顿、增量标记 标准回答 浏览器垃圾回收机制根据数据的存储方式分为栈垃圾回收和堆垃圾回收。 栈垃圾回收的方式非常简便，当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文，遵循先进后出的原则。 堆垃圾回收，当函数直接结束，栈空间处理完成了，但是堆空间的数据虽然没有被引用，但是还是存储在堆空间中，需要垃圾回收器将堆空间中的垃圾数据回收。为了使垃圾回收达到更好的效果，根据对象的生命周期不一样，使用不同的垃圾回收的算法。在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。新生区中使用Scavenge算法，老生区中使用标记-清除算法和标记-整理算法。 加分回答 Scavenge算法： 1. 标记：对对象区域中的垃圾进行标记 2. 清除垃圾数据和整理碎片化内存：副垃圾回收器会把这些存活的对象复制到空闲区域中，并且有序的排列起来，复制后空闲区域就没有内存碎片了 3. 角色翻转：完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域，这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去 标记-清除算法： 1. 标记：标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。 2. 清除：将垃圾数据进行清除。 3. 产生内存碎片：对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存。 标记-整理算法 1. 标记：和标记 - 清除的标记过程一样，从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素标记为活动对象。 2. 整理：让所有存活的对象都向内存的一端移动 3. 清除：清理掉端边界以外的内存 V8 是使用副垃圾回收器和主垃圾回收器处理垃圾回收的，不过由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿。 为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法 26.CSRF攻击是什么？ 1.概念：跨域请求伪造。2.原理：诱导用户跳转到新的页面，利用 服务器的验证漏洞 和 用户之前的登入状态，来模拟用户进行操作。3.防范：利用cookie的sameSize属性规定其他网站不能使用本网站的cookie。或者使用token验证，再去验证用户身份。 得分点 CSRF时跨站请求伪造、盗用用户身份发起请求 标准回答 CSRF跨站点请求伪造（Cross Site Request Forgery）和XSS攻击一样，有巨大的危害性，就是攻击者盗用了用户的身份，以用户的身份发送恶意请求，但是对服务器来说这个请求是合理的，这样就完成了攻击者的目标。 CSRF攻击的过程原理是： - 用户打开浏览器，访问目标网站A，输入用户名和密码请求登录 - 用户信息在通过认证后，网站A产生一个cookie信息返回给浏览器，这个时候用户以可正常发送请求到网站A - 用户在没有退出网站A之前在同一个浏览器打开了另一个新网站B。 - 新网站B收到用户请求之后返回一些攻击代码，并发出一个请求要求访问返回cookie的网站A - 浏览器收到这些攻击性代码之后根据新网站B的请求在用户不知道的情况下以用户的权限操作了cookie并向网站A服务器发起了合法的请求。 预防CSRF攻击主要有以下策略： - 使用验证码，在表单中添加一个随机的数字或者字母验证码，强制要求用户和应用进行直接的交互。 - HTTP中Referer字段，检查是不是从正确的域名访问过来，它记录了HTTP请求的来源地址。 - 使用token验证，在HTTP请求头中添加token字段，并且在服务器端建立一个拦截器验证这个token，如果token不对，就拒绝这个请求。 加分回答 验证HTTP Referer字段的好处就是实施起来特别简单，普通的网站开发不需要特别担心CSRF漏洞， 只需要在最后面设置一个拦截器来验证referer的值就可以了，不需要改变已有的代码逻辑，非常便捷。 但是这个方法也不是万无一失的，虽然referer是浏览器提供的，但是不同的浏览器可能在referer的实现上或多或少有自身的漏洞， 所以使用referer的安全保证是通过浏览器实现的。 使用token验证的方法要比referer更安全一些，需要把token放在一个HTTP自定义的请求头部中，解决了使用get或者post传参的不便性。 27.XSS攻击是什么？ 得分点 XSS是跨站脚本攻击、向目标网站插入恶意代码、大量用户访问网站时运行恶意脚本获取信息 标准回答 XSS是跨站脚本攻击(Cross Site Scripting)，不写为CSS是为了避免和层叠样式表（Cascading Style Sheets）的缩写混淆，所以将跨站脚本攻击写为XSS。 攻击者可以通过向Web页面里面插入script代码，当用户浏览这个页面时，就会运行被插入的script代码，达到攻击者的目的。 XSS的危害一般是泄露用户的登录信息cookie，攻击者可以通过cookie绕过登录步骤直接进入站点。 XSS的分类分为反射型和存储型。反射型就是临时通过url访问网站，网站服务端将恶意代码从url中取出，拼接在HTML中返回给浏览器，用户就会执行恶意代码。 存储型就是将恶意代码以留言的形式保存在服务器数据库，任何访问网站的人都会受到攻击。 预防XSS攻击的方案基本是对数据进行严格的输出编码，比如HTML元素的编码，JavaScript编码，css编码，url编码等等。 加分回答 XSS的危害： - 获取cookie：网站中的登录一般都是用cookie作为某个用户的身份证明，这是服务器端返回的一串字符。如果cookie被攻击者拿到，那么就可以绕过密码登录。当空间、论坛如果可以被插入script代码，那么进入空间或者论坛的人的账号就可以轻易被攻击者获取。 - 恶意跳转：直接在页面中插入window.location.href进行跳转。 XSS的分类： - 反射型XSS（非持久型XSS）：通过URL参数直接注入 - 存储型XSS（持久型XSS）：存储到数据库后读取时注入 XSS的预防： - 浏览器的防御和“X-XSS-Protection”有关，默认值为1，即默认打开XSS防御，可以防御反射型的XSS，不过作用有限，只能防御注入到HTML的节点内容或属性的XSS，例如URL参数中包含script标签。不建议只依赖此防御手段。 - 防御HTML节点内容，通过转义<为<以及>为>来实现防御HTML节点内容。 - 预防HTML属性，通过转义"->&quto来实现防御，一般不转义空格，但是这要求属性必须带引号。 - 预防JavaScript代码，通过将数据进行JSON序列化。 - 防御富文本是比较复杂的工程，因为富文本可以包含HTML和script，这些难以预测与防御，建议是通过白名单的方式来过滤允许的HTML标签和标签的属性来进行防御，大概的实现方式是： - 将HTML代码段转成树级结构的数据 - 遍历树的每一个节点，过滤节点的类型和属性，或进行特殊处理 - 处理完成后，将树级结构转化成HTML代码 - 开启浏览器XSS防御：Http Only cookie，禁止 JavaScript 读取某些敏感 Cookie，攻击者完成XSS注入后也无法窃取此 Cookie。 28.说一说js继承的方法和优缺点？ 得分点 原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、ES6 Class 标准回答 原型链继承： 让一个构造函数的原型是另一个类型的实例，那么这个构造函数new出来的实例就具有该实例的属性，原型链继承的。 优点：写法方便简洁，容易理解。 缺点：在父类型构造函数中定义的引用类型值的实例属性，会在子类型原型上变成原型属性被所有子类型实例所共享。 同时在创建子类型的实例时，不能向超类型的构造函数中传递参数。 借用构造函数继承： 在子类型构造函数的内部调用父类型构造函数；使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上。 优点：解决了原型链实现继承的不能传参的问题和父类的原型共享的问题。 缺点：借用构造函数的缺点是方法都在构造函数中定义，因此无法实现函数复用。在父类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。 组合继承： 将原型链和借用构造函数的组合到一块。 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。 这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。 &n