关于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); // 1
console.log(8 & 1); // 0

• 向下取整

// 不能对正数取整
console.log(~~11.71); // 11
console.log(11.71 >> 0); // 11
console.log(11.71 << 0); // 11
console.log(11.71 | 0); // 11
console.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)); // 0
console.log(15 & (15 - 1));

• 判断一个值是否存在

// before
if (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); // 16
console.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.js
let num = 0;
module.exports = {
    num,
    add() {},
};
let {num, add} = require('./index.js');
console.log(num); // 0
add();
console.log(num); // 0
num = 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 = 24
export default {fn() {}，msg: "hello 蛙人"
}

• 导入：

// index,js
export 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,js
export const name = '蛙人';
export const age = 24;
export default {msg: '蛙人',};
// index2.js
import msg, {name, age} from './index.js';
// 起别名
import {default as all, name, age} from './index.js';
console.log(msg); // {msg: "蛙人"}

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

// index.js
export let num = 0;
export function add() {++num;}
import {num, add} from './index.js';
console.log(num); // 0
add();
console.log(num); // 1
num = 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

特殊字符形容：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项规范：A:(attention matters)
4. 详情形容标注：D:(detail info)
5. 总结标注：S:(summary)
6. 剖析标注：Ana:(analysis)

7. 提醒标注：T:(tips)

   往期举荐：

8. 前端面试实录 HTML 篇
9. 前端面试实录 CSS 篇
10. JS 如何判断一个元素是否在可视区域内？
11. Vue2、3 生命周期及作用？
12. 排序算法：QuickSort
13. 箭头函数与一般函数的区别？
14. 这是你了解的 CSS 选择器权重吗？
15. JS 中 call, apply, bind 概念、用法、区别及实现？
16. 罕用位运算办法？
17. Vue 数据监听 Object.definedProperty() 办法的实现
18. 为什么 0.1+ 0.2 != 0.3，如何让其相等？
19. 聊聊对 this 的了解？

20. JavaScript 为什么要进行变量晋升，它导致了什么问题？

    最初：

21. 欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……
22. 公众号回复 加群 或 扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习 ……
23. 公众号回复 加好友，即可添加为好友