2022年前端面试题

1. Js的基本数据类型

  1. null
  2. undefined
  3. string
  4. symbol
  5. bigint
  6. boolean
  7. number
  8. object
【2022年前端面试题】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)); //falseconsole.log(NaN === NaN); // false console.log(Object.is(NaN, NaN)); //trueconsole.log(Number.NaN === Number.NaN); // false console.log(Object.is(Number.NaN, Number.NaN)); // trueconsole.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多平台发布

    推荐阅读