关于前端:2022年前端面试题

1. Js 的根本数据类型

1. null
2. undefined
3. string
4. symbol
5. bigint
6. boolean
7. number
8. object

Es6 新增了 symbol 和 bigint 两种类型，symbol 个别罕用能够联合 redux 的 action 的 type 进行应用；bigint 是大数解决，个别除非我的项目中波及到很大的数才会用到。

2. 数据类型检测的形式有哪些

1. typeof，然而在判断 Array null 为 object
2. instanceof，通过 prototype 判断构造函数
3. construct，通过构造函数来判断
4. Object.prototype.toString()

个别我的项目中罕用的判断形式可能是应用 typeof，typeof null === “object” 是一个历史遗留问题.

3 null 和 undefined 区别

两者都是根本数据类型
undefined 在 JavaScript 中不是一个保留字，这意味着能够应用 undefined 来作为一个变量名，然而这样的做法是十分危险的，它会 影响对 undefined 值的判断。咱们能够通过一些办法取得平安的 undefined 值，比如说 void 0。

然而当初大多数浏览器应该是都无奈应用 undefined 作为一个变量名。

5 intanceof 操作符的实现原理及实现

intanceof 是判断构造函数的 prototype 是否存在于对象的原型链上，始终找到 Object.prototype.

晓得了原理，实现就很简略了，就是有限循环递归

function myInstanceOf(left:object, right:object) {// Object.getPrototypeOf() 返回对象的原型
  const leftPrototype = Object.getPrototypeOf(left);
  const rightPrototype = right.prototype;
  while(leftPrototype) {if(leftPrototype === rightPrototype) return true;
    if(!rightPrototype) return false;
    leftPrototype = Object.getPrototypeOf(leftPrototype);
  }
  return fasle;
}

6 Object.is() 与比拟操作符“===”、“==”的区别?

=== 判断两边类型和值都相等才返回 true

== 会进行隐士类型转换，转换之后才判断，我的项目中不举荐 == 进行判断

Object.is() 基本上和 === 应用相似，这两者的区别在于如何判断 + 0 和 -0，以及 NaN 的解决

console.log(+0 === -0); //true
console.log(Object.is(+0, -0)); //false

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); //true

console.log(Number.NaN === Number.NaN); // false
console.log(Object.is(Number.NaN, Number.NaN)); // true

console.log(NaN === Number.NaN); // false
console.log(Object.is(NaN, Number.NaN)); // true

7 什么是 BigInt

JavaScript 中 Number.MAX_SAFE_INTEGER 示意最大平安数字，计算 后果是 9007199254740991，即在这个数范畴内不会呈现精度失落(小 数除外)。

8 如何判断一个对象是一个空对象

function isEmptyObject(obj={}) {return Object.keys(obj).length > 0;
}
console.log(isEmptyObject({}));
console.log(isEmptyObject({'a':1}));

9 new 一个类的时候产生了什么？

1. 创立一个对象
2. 把该对象的__proto__指向类的原型
3. 应用 apply 执行构造函数，如果返回是一个对象就返回，如果不是就返回方才创立的对象。

10 Proxy 能够实现什么性能

在 Vue3.0 中通过 Proxy 来替换本来的 Object.defineProperty 来实现数据响应式。

之所以 Vue3.0 要应用 Proxy 替换本来的 API 起因在于 Proxy 无需一层层递归为每个属性增加代理，一次即可实现以上操作，性能上更好，并且本来的实现 有一些数据更新不能监听到，比方数组的 push 和 pop 等，然而 Proxy 能够完满监听到任何形式的数据扭转，惟一缺点就是浏览器的兼容性不好。

Proxy 是 Es6 中增加的，根本应用如下：

const target1 = {
  message1: "hello",
  message2: "everyone"
};

const handler2 = {
  // target 原始对象，这里是指 target1，prop 传入的属性，receiv   // er 示意是承受的对象，这里是 handle2
  get(target, prop, receiver) {return "world";}
};

const proxy2 = new Proxy(target1, handler2);

11 Js 文件提早加载办法有哪些？

1. defer:js 文件下载会和浏览器的解析同时执行，当浏览器解析结束后，而后再执行 js 文件。
2. async：js 文件下载会和浏览器的解析同时执行，当 js 文件下载结束后，会立刻执行 js 文件。
3. 如果没有 defer 和 async，文件会立刻下载和立刻执行，并且会阻塞浏览器的解析。

12 ES6 模块与 CommonJS 模块的区别

相同点：
ES6 和 CommonJS 都能够对引入的对象外部从新赋值

不同点：
CommonJS 模块输入的是一个值的拷贝，ES6 模块输入的是值的援用；
也就是说 ComonnJS 是援用的一个值的拷贝，如果当咱们引入之后，批改了原来文件的内容，咱们援用的值不会扭转，比方上面的例子，test.js 中输入的值都是 3,3

// lib.js
let counter = 3;
function incCounter() {counter++;}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// test.js
const mod = require("./lib");
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

ES6 是导入的援用，有点相似指针，所以当引入的文件内容扭转后，会跟着扭转。

能够看下上面的例子

// lib.js
export let counter = 3;
export function incCounter() {counter++;}

// test.js
export let counter = 3;
export function incCounter() {counter++;}

13 for…in 和 for…of 的区别

for…of 是 ES6 新增的遍历形式，容许遍历一个含有 iterator 接口 的数据结构 (数组、对象等) 并且返回各项的值

for…in 次要是遍历对象，并且会沿着原型链向上查找

for…of 能够遍历实现了 iterator 接口 的数据结构(数组、对象等)

例子如下：

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

const iterable = [3, 5, 7];
iterable.foo = 'hello';

for (const i in iterable) {console.log(i); // logs "0", "1", "2", "foo", "arrCustom", "objCustom"
}

for (const i in iterable) {if (Object.hasOwn(iterable, i)) {console.log(i); // logs "0", "1", "2", "foo"
  }
}

for (const i of iterable) {console.log(i); // logs 3, 5, 7
}

本文由 mdnice 多平台公布