（面试篇）二.补充

模块一

1.var 和 let const的区别？

答：

1).var是ES5语法，let const是ES6语法；var有变量提升 【PS：变量提升自己理解】

2).var和let是变量，可修改；const是常量，不可修改

3).let const有块级作用域，var没有

 

2.typeof返回哪些类型？

答：

1).undefined string number boolean symbol

2).object(注意，typeof null === 'object')

3).function

 

3.列举强制类型转换和隐式类型转换？

答：

1).强制：parseInt parseFloat toString等

2).隐式：if、逻辑运算、==、+拼接字符串

 

模块二

1.手写深度比较，模拟lodash isEqual

答：

 

2.split()和join()的区别

答：split是将字符串切分成一个数组，join是将一个数组拼接成字符串

 

3.数组的pop、push、unshift、shift分别做什么

答：

1).pop 后结果是：返回该数组的最后一个元素，原数组去掉最后一个元素

2).push后结果是：返回添加数据之后的数组长度，原数组会在最后加上这个元素

3).unshift后结果是：返回在首位添加元素后的数组长度，原数组会在首位加上这个元素

4).shift后结果是：返回该数组的第一个元素，原数组去掉最后一个元素

 

扩展：数组的API有哪些是纯函数？

PS:1.不改变原数组（没有副作用） 2.返回一个数组

concat 拼接，不影响原数组

map 数组操作   例：arr.map(num => num * 10)

filter 过滤    例arr.filter(num => num > 25)

slice 类似于深拷贝

 

非纯函数

push pop shift unshift 

forEach

some every

reduce

 

模块三

1.数组slice和splice的区别

答：

1).功能区别（slice-切片，splice-剪接）

2).参数和返回值

3).是否纯函数

 

2.[10, 20, 30].map(parseInt)返回结果是什么

答：map的参数和返回值

parseInt参数和返回值

结果: [10, NaN, NaN]

分析：

 

3.ajax请求get和post区别是什么

答：

1).get一般用于查询操作，post一般用户提交操作

2).get参数拼接在url上，post放在请求体内（数据体积可更大）

3).安全性：post易于防止CSRF

 

模块四

1.函数call和apply的区别？

答：

1).两者用途都是在特定的作用域中调用函数，等于重新设置了函数体内this对象的值。

2).两者的区别仅在于接收参数方式不同，call方法第一个参数是作为函数上下文的对象，但是后面传入的是个参数列表，而不是单个数组。apply方法传入两个参数，一个是作为函数上下文的对象，另一个是作为函数参数所组成的数组。

fn.call(this, p1, p2, p3)

fn.apply(this, arguments)

 

2.事件代理（委托）是什么？

答：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

举例

<ul id="parent">

    <li id="child">危险</li>

    <li id="child">危险</li>

    <li id="child">危险</li>

</ul>

window.onload = function(){

    var dangerDom = document.getElementById('parent');

    dangerDom.onclick = function(){

        alert('危险');

    }

}

 

3.闭包是什么，有什么特性？有什么负面影响

答：

1).闭包就是能访问其他函数内部变量的函数，本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

（PS：作用域链中，函数内部变量对象优先级最高，然后，由最近的外部函数依次向后排）

2).封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

持久性：一般的函数调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在。

3).负面影响：变量会常驻内存，得不到释放。闭包不要乱用。

PS：优点：减少创建全局变量，减少传递给函数的参数量 封闭性

 

模块五

1.如何组织事件冒泡和默认行为？

答：

1).event.stopPropagation()

2).event.preventDefault()

 

2.查找、添加、删除、移动DOM节点的方法？

答：

1).查找

document.getElementById('div1')  

document.getElementsByClassName('container')

document.getElementsByTagName('div')

document.querySelectorAll('p')

获取dom之后

// property形式

p1.style.width = '100px'

p1.className = 'red'

// attribute

p1.setAttribute('data-name', 'mamba')

p1.setAttribute('style', 'font-size: 50px;')

2).新建节点

const newP = document.createElement('p')

newP.innerHTML = 'this is newP'

插入节点

const div1 = document.getElementById('div1')  

div1.appendChild(newP)

3).移动节点

const p1 = document.getElementById('p1')

const div2 = document.getElementById('div2')  

div2.appendChild(p1)

// 获取父元素

console.log(p1.parentNode)

// 获取子元素列表

const div1ChildNodes = div1.childNodes

console.log(div1.childNodes)

4).删除节点

removeChild

 

3.如何减少DOM操作？

答：

1).缓存DOM查询结果

2).多次DOM操作，合并到一次插入

 

模块六

1.解释jsonp的原理，为何它不是真正的ajax？

答：

1).jsonp的原理：就是利用浏览器可以动态地插入一段js并执行的特点完成的。

2).ajax的核心是：通过XmlHttpRequest获取非本页内容

jsonp的核心：动态添加<script>标签来调用服务器提供的js脚本

3).ajax通过服务端代理一样的跨域

jsonp也并不排斥同域的数据的获取

4).jsonp是一种方式或者说非强制性的协议

ajax也不一定非要用json格式来传递数据

5).jsonp只支持get请求，ajax支持get、post等。

 

 

2.document load和ready的区别？

答：

1).document load即DOM渲染完即可执行，此时图片、视频还可能没有加载完

2).ready必须页面的全部资源加载完才会执行，包含图片视频的执行完成

 

3.==和===的不同？

答：

1).==会尝试类型转换

2).===严格相等

PS：啥时候才会用==   答：除了==null之外都用===

 

模块七

1.函数声明和函数表达式的区别？

答：

1).函数声明 function fn(){...}

2).函数表达式 const fn = function(){...}

3).函数声明会在代码执行前预加载，而函数表达式不会

（变量提升）

 

2.new Object()和Object.create()的区别？

答：{}等同于new Object()，原型Object.prototype

Object.create(null)没有原型

Object.create({...})可指定原型

Object.create()创建了一个空对象，里面传值指向的是该对象的原型

 

3.this场景题

答：1   undefined    （PS：this对象获取的是执行的时候所在位置的值）

 

模块八（正则表达式）

1.关于作用域和自由变量的场景题-1

答：4 4 4 4

 

2.判断字符串以字母开头，后面字母数字下划线，长度6-30

答：const reg = /^[a-zA-Z]\w{5,29}$/

（PS：推荐正则表达式30分钟   学习资料）

 

3.关于作用域和自由变量的场景题-2

答：

// 100 10 10

 

模块九

1.手写字符串trim方法，保证浏览器兼容性

答：

 

2.如何获取多个数字中的最大值

答：Math.max(10, 30, 20, 50, 40)

最小值Math.min...

 

3.如何用JS实现继承？

答：

class继承

prototype继承（不推荐使用了）

 

模块十

1.如何捕获JS程序中的异常？

答：

1).try{   

        // todo 

     }catch(ex){ // 手动捕获

         ...

     }finally{

        // todo    

     }

2).自动捕获

window.onerror = function(message, source, lineNom, colNom, error){

    // 第一，对跨域的js，如CDN的，不会有详细的报错信息

    // 第二，对于压缩的js，还要配合sourceMap反查到未压缩代码的行、列

}

 

2.什么是JSON？

答：

1).json是一种数据格式，本质是一段字符串。

2).json格式和JS对象结构一致，对JS语言更友好

3).window.JSON是一个全局对象：JSON.stringify  JSON.parse

 

3.获取当前页面url参数？

答：

1).传统方式，查找location.search

2).新API，URLSearchParams

 

模块十一

1.将url参数解析为JS对象

答：

 

2.手写数组flatern，考虑多层级 【不管多深级别的数组都可以变成一个层级的数组】

答：

 

3.数组去重？

答：

1).传统方式，遍历元素挨个比较、去重

2).使用Set

3).考虑计算效率

 

模块十二

1.手写深拷贝

答：

PS：Object.assign()不是深拷贝

 

2.介绍一下RAF requestAnimateFrame

答：

1).要想动画流畅，更新频率要60帧/s，即16.67ms更新一次视图

2).setTimeout要手动控制频率，而RAF浏览器会自动控制

3).后台标签或隐藏iframe中，RAF会暂停，而setTimeout依然执行

 

3.前端性能如何优化？一般从哪几个方面考虑？

答：

1).原则：多使用内存、缓存、减少计算、减少网络请求

2).方向：加载页面，页面渲染，页面操作流畅度