探究 JavaScript 前端热点面试题 (三):让你在面试中游刃有余!
前言
系列首发于公众号『前端进阶圈』 ,若不想错过更多精彩内容,请“星标”一下,敬请关注公众号最新消息。
探究 JavaScript 前端热点面试题(三):让你在面试中游刃有余!
1. 什么是 BOM 和 DOM?
DOM:文档对象模型,指把文档当做了一个对象,这个对象中包含了处理网页的方法和接口
BOM:浏览器对象模型,把浏览器当成了一个对象,这个对象主要定义了与浏览器交互的方法和接口,BOM 的核心是 window, 而 window 具有双重角色,既是通过 js 调用浏览器窗口的一个接口,也是一个 Global 对象。这也就意味着在网页中定义的任何对象,变量和函数,都会作为全局对象的一个属性或方法存在。
2. for...in 和 for...of 的区别?
for...of 是 ES6 新增的遍历方式,可遍历数组和对象等。for...in 是 ES3 出现的。
对于数组来说:for in 和 for of 都可以循环数组,for…in 输出数组的索引 index。for...of 输出数组每一项的值。
对于对象来说:for in 可以遍历对象,for of 不能遍历对象,只能遍历带有 iterator 接口的,例如 Set,Map,String,Array
总结:
for...in 主要遍历对象,不适用于遍历数组。for...of 可用来遍历数组,类数组,字符串,Set, Map 以及 Generator 对象。
主要区别在于他们的迭代方式不同
3. ajax, axios, fetch 的区别?
ajax: 一个 JavaScript 技术,内部基于 XHRHttpRequest 来实现
axios: 一个请求框架,也是基于 XHRHttpRequest 封装和 promise 对象,支持同步和异步,提供了较多方法
fetch: 一个原生请求 API,基于 Promise 来实现
ajax 没有自动转换数据类型的机制,而 axios 和 fetch 支持自动将返回的数据转换为 JSON 数据格式或其他类型
ajax: 一种创建交互式网页的开发技术,可做到无需重新加载整个网页的情况下,更新部分网页,也叫局部更新。
缺点:
原生支持 XHR,但 XHR 架构不清晰
不符合分离原则
配置和调用费用混乱,基于事件的异步模型处理不友好
axios: 一个基于 promise 的 HTTP 库,可用在浏览器和 node.js 中。
特点:
浏览器端发起 XMLHttpRequests 请求
node 端发起 http 请求
支持 promise API
监听请求和返回
取消请求
自动转换 json 数据
客户端抵御 XSRF 攻击
fetch: 不是基于 ajax 的封装,而是原生 js, 没有使用 XMLHttpRequests 对象
优点:
语法简洁,更加语义化
基于 promise 实现,支持 async/await
更加底层,API 丰富
脱离 XMLHttpRequest
缺点:
只对网络请求报错,对 400,500 都当做成功的请求,不会进行 reject 处理,只有网络错误导致请求错误,才会被 reject。
默认不携带 cookie, 不支持超时控制,使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
没有办法检测请求的进度,而 XHR 可以。
4. 常见的位运算?
判断一个数的奇偶性
奇数:返回 1
偶数:返回 0
向下取整
取中间值
判断一个数是否等于目标数
判断一个数是不是 2 的整数次幂, 如果是 0,则说明这个数是 2 的整数次幂
判断一个值是否存在
求一个数的相反数
求一个数的倍数
求一个数的平方
求一个数的立方
5. 模块化 ESM, CMJ?
参考:https://juejin.cn/post/6938581764432461854
CMJ: 使用
module.exports
导出变量和函数,可导出任意类型的值,使用require
来导入导出:
module.exports、exports
导入:
导入值的变化:CommonJs 导入的值是拷贝的,所以可以修改拷贝值,但这会引起变量污染,一不小心就重名。
ESM:导出分两种:单个导出 export
,默认导出 export default
, 导入使用 import...from
导出:
导入:
导入值的变化:export 导出的值是值的引用,并且内部有映射关系,这是 export 关键字的作用。而且导入的值,不能进行修改也就是只读状态。
区别:
CMJ:
可动态加载,代码发生在运行时
可混合导出
导出的值是拷贝,可修改导出的值。
ESM:
ESM 是静态的,不可以动态导入,只能声明在文件最顶部
可混合导出,单个导出,默认导出,完全不受影响
导出的值之间存在映射关系,所有值都只是可读的,不可修改。
6. forEach 与 map 方法的区别?
相同点:
都是用来遍历数组的
都支持三个参数: item 当前每一项, index 索引值, arr 原数组
不同点:
forEach 对每一个元素都执行操作,会改变原数组,没有返回值
map 不改变原数组,返回一个新数组
总的速度来说,map 的速度优先于 forEach,性能上来说:for > forEach > map
特殊字符描述:
问题标注
Q:(question)
答案标注
R:(result)
注意事项标准:
A:(attention matters)
详情描述标注:
D:(detail info)
总结标注:
S:(summary)
分析标注:
Ana:(analysis)
提示标注:
T:(tips)
往期推荐:
最后:
版权声明: 本文为 InfoQ 作者【控心つcrazy】的原创文章。
原文链接:【http://xie.infoq.cn/article/a0a84ad2e485c59e3c885349f】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论