关于javascript:探究-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
总结：
1. for...in 次要遍历对象，不适用于遍历数组。for...of 可用来遍历数组，类数组，字符串，Set, Map 以及 Generator 对象。
2. 次要区别在于他们的迭代形式不同

3. ajax, axios, fetch 的区别？

ajax: 一个 JavaScript 技术，外部基于 XHRHttpRequest 来实现
axios: 一个申请框架，也是基于 XHRHttpRequest 封装和 promise 对象，反对同步和异步，提供了较多办法
fetch: 一个原生申请 API，基于 Promise 来实现
ajax 没有主动转换数据类型的机制，而 axios 和 fetch 反对主动将返回的数据转换为 JSON 数据格式或其余类型
ajax: 一种创立交互式网页的开发技术，可做到无需从新加载整个网页的状况下，更新局部网页，也叫部分更新。
- 毛病：
  1. 原生反对 XHR，但 XHR 架构不清晰
  2. 不合乎拆散准则
  3. 配置和调用费用凌乱，基于事件的异步模型解决不敌对
axios: 一个基于 promise 的 HTTP 库，可用在浏览器和 node.js 中。
- 特点：
  1. 浏览器端发动 XMLHttpRequests 申请
  2. node 端发动 http 申请
  3. 反对 promise API
  4. 监听申请和返回
  5. 勾销申请
  6. 主动转换 json 数据
  7. 客户端抵挡 XSRF 攻打
fetch: 不是基于 ajax 的封装，而是原生 js, 没有应用 XMLHttpRequests 对象
- 长处：
  1. 语法简洁，更加语义化
  2. 基于 promise 实现，反对 async/await
  3. 更加底层，API 丰盛
  4. 脱离 XMLHttpRequest
- 毛病：
  1. 只对网络申请报错，对 400，500 都当做胜利的申请，不会进行 reject 解决，只有网络谬误导致申请谬误，才会被 reject。
  2. 默认不携带 cookie, 不反对超时管制，应用 setTimeout 及 Promise.reject 的实现的超时管制并不能阻止申请过程持续在后盾运行，造成了流量的节约
  3. 没有方法检测申请的进度，而 XHR 能够。

4. 常见的位运算？

判断一个数的奇偶性
- 奇数：返回 1
- 偶数：返回 0

console.log(7 & 1); // 1console.log(8 & 1); // 0

向下取整

// 不能对正数取整console.log(~~11.71); // 11console.log(11.71 >> 0); // 11console.log(11.71 << 0); // 11console.log(11.71 | 0); // 11console.log(6.83 >>> 0); // 6

取两头值

console.log(12 >> 1); // 6

判断一个数是否等于指标数

let a = 4654;// 如何和指标数相等，则等于 0，否则等于其余数if (a ^ 1171) {    // 不等于的状况    console.log(12);} else {    // 等于的状况    console.log(34);}

判断一个数是不是 2 的整数次幂, 如果是 0,则阐明这个数是 2 的整数次幂

n & (n - 1);// 是 0 则是 2 的整数次幂，不是则返回其余数console.log(16 & (16 - 1)); // 0console.log(15 & (15 - 1));

判断一个值是否存在

// beforeif (arr.indexOf(item) > -1) {    // code}// 按位非：item 将会转换为 string 类型进行查找if (~arr.indexOf(item)) {    // code}

求一个数的相反数

// 求正数的相反数console.log(~-n + 1); // n// 求负数的相反数console.log(~n + 1); // -n

求一个数的倍数

console.log(8 << 1); // 16console.log(7 << 1); // 14

求一个数的平方

console.log(2 << 2); // 8

求一个数的立方

console.log(2 << 4); // 16

5. 模块化 ESM, CMJ？

参考：https://juejin.cn/post/6938581764432461854

CMJ: 应用 module.exports 导出变量和函数，可导出任意类型的值，应用 require 来导入
- 导出：module.exports、exports

// 导出一个对象module.exports = {    name: '蛙人',    age: 24,    sex: 'male',};// 导出任意值module.exports.name = '蛙人';module.exports.sex = null;module.exports.age = undefined;// 间接导出，省略 module 关键字exports.name = '蛙人';exports.sex = 'male';exports = {    name: '蛙人',};

导入：

// 间接导入let data = require('./index.js');let { name, age } = require('./index.js');console.log(data); // { name: "蛙人", age: 24 }console.log(name, age); // 蛙人，24// 动静导入let lists = ['./index.js', './config.js'];lists.forEach(url => require(url)); // 动静导入if (lists.length) {    require(lists[0]); // 动静导入}

导入值的变动：CommonJs 导入的值是拷贝的，所以能够批改拷贝值，但这会引起变量净化，一不小心就重名。

// index.jslet num = 0;module.exports = {    num,    add() {},};let { num, add } = require('./index.js');console.log(num); // 0add();console.log(num); // 0num = 10;

ESM：导出分两种：单个导出 export，默认导出 export default, 导入应用 import...from

导出：

// 导出变量export const name = "蛙人"export const age = 24// 导出函数也能够export function fn() {}export const test = () => {}// 如果有多个的话const name = "蛙人"const sex = "male"export { name, sex }// 混合导出export const name = "蛙人"export const age = 24export default {    fn() {}，    msg: "hello 蛙人"}

导入：

// index,jsexport const name = '蛙人';export const age = 24;import { name, age } from './index.js';console.log(name, age); // "蛙人" 24// 如果外面全是单个导出，咱们就想全副间接导入则能够这样写import * as all from './index.js';console.log(all); // {name: "蛙人", age: 24}// 混合导入// index,jsexport const name = '蛙人';export const age = 24;export default {    msg: '蛙人',};// index2.jsimport msg, { name, age } from './index.js';// 起别名import { default as all, name, age } from './index.js';console.log(msg); // { msg: "蛙人" }

导入值的变动：export 导出的值是值的援用，并且外部有映射关系，这是 export 关键字的作用。而且导入的值，不能进行批改也就是只读状态。

// index.jsexport let num = 0;export function add() {    ++num;}import { num, add } from './index.js';console.log(num); // 0add();console.log(num); // 1num = 10; // 抛出谬误// ESM 中的 import 在文件最顶部，不可动静加载

区别：
- CMJ:
  1. 可动静加载，代码产生在运行时
  2. 可混合导出
  3. 导出的值是拷贝，可批改导出的值。
- ESM:
  1. ESM 是动态的，不能够动静导入，只能申明在文件最顶部
  2. 可混合导出，单个导出，默认导出，齐全不受影响
  3. 导出的值之间存在映射关系，所有值都只是可读的，不可批改。

6. forEach 与 map 办法的区别？

相同点：
1. 都是用来遍历数组的
2. 都反对三个参数: item 以后每一项, index 索引值, arr 原数组
不同点：
1. forEach 对每一个元素都执行操作，会扭转原数组，没有返回值
2. map 不扭转原数组，返回一个新数组
3. 总的速度来说，map 的速度优先于 forEach，性能上来说：for > forEach > map

特殊字符形容：

问题标注 Q:(question)
答案标注 R:(result)
注意事项规范：A:(attention matters)
详情形容标注：D:(detail info)
总结标注：S:(summary)
剖析标注：Ana:(analysis)
提醒标注：T:(tips)
往期举荐：
前端面试实录HTML篇
前端面试实录CSS篇
JS 如何判断一个元素是否在可视区域内？
Vue2、3 生命周期及作用？
排序算法：QuickSort
箭头函数与一般函数的区别？
这是你了解的CSS选择器权重吗？
JS 中 call, apply, bind 概念、用法、区别及实现？
罕用位运算办法？
Vue数据监听Object.definedProperty()办法的实现
为什么 0.1+ 0.2 != 0.3，如何让其相等？
聊聊对 this 的了解？
JavaScript 为什么要进行变量晋升，它导致了什么问题？
最初：
欢送关注『前端进阶圈』公众号，一起摸索学习前端技术......
公众号回复加群或扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习......
公众号回复加好友，即可添加为好友

前言

探索 JavaScript 前端热点面试题(三)：让你在面试中熟能生巧！

1. 什么是 BOM 和 DOM？

2. for...in 和 for...of 的区别？

3. ajax, axios, fetch 的区别？

4. 常见的位运算？

5. 模块化 ESM, CMJ？

6. forEach 与 map 办法的区别？

特殊字符形容：

往期举荐：

最初：