模块一
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).方向:加载页面,页面渲染,页面操作流畅度