【牛客刷题】大厂真题 | 前端面试篇（一）

🍳作者：$贤蛋大眼萌，一名很普通但不想普通的程序媛$🤳

🙊语录：$多一些不为什么的坚持$

📓 专栏：牛客刷题–斩获offer

💭$眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台--牛客网$

👉🏻点击跳转刷题网免费注册学习

🧨 前言

🚀 $牛客网$ 是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站，更是一个专注于程序员的学习和成长的平台。

🪓自学是一个程序员必备的能力，而提高自己的编程能力最好方法就是通过刷题。一次偶然的机会让我发现牛客网这个新大陆，开启自己IT之旅。

这里有个大厂的面试真题，知己知彼百战百胜。

更有在线编程调试功能，提高编程效率。

​

🎁 正文

题1：说一说cookie sessionStorage localStorage 区别？

解题思路：

​ 数据存储位置、生命周期、存储大小、写入方式、数据共享、发送请求时是否携带、应用场景 标准回答 Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。

正确题解：

• 共同点：都是存储在浏览器本地；

• 不同：

  1. cookie 服务器端写入； S，L 由前端写入； 生命周期
  2. cookie由服务器端在写入的时候就设置好的；L写入就一直存在，除非手动清除；S 页面关闭就自动清除； 存储大小
  3. cookie最小，4kb； S，L大约5M； 数据共享
  4. 数据共享都遵循同源原则，S还限制必须是同一个页面；前端向后端发送请求的时候会自动携带Cookie中的数据； 应用场景
  5. Cookie一般用于存储登录验证信息SessionID或者token; L存储不易变动的数据，减轻服务器的压力；S可以用来检测用户是否是刷新进入 页面

题2：说一说你对闭包的理解？

解题思路：

变量背包、作用域链、局部变量不销毁、函数体外访问函数的内部变量、内存泄漏、内存溢出、形成块级作用域、柯里化、构造函数中定义特权方法、Vue中数据响应式Observer 标准回答

正确题解：

• 闭包 一个函数和词法环境的引用捆绑在一起，这样的组合就是闭包（closure）。
• 一般就是一个函数A，return其内部的函数B，被return出去的B函数能够在外部访问A函数内部的变量，这时候就形成了一个B函数的变量背包，A函数执行结束后这个变量背包也不会被销毁，并且这个变量背包在A函数外部只能通过B函数访问。
• 闭包形成的原理：作用域链，当前作用域可以访问上级作用域中的变量
• 闭包解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。
• 闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。
• 加分回答 闭包的应用，能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。

题3：说一说JS数据类型有哪些,区别是什么？

解题思路：

Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种

正确题解：

• JS数据类型分为两类：一类是基本数据类型，也叫简单数据类型，包含7种类型，分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型，通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object。

• 数据分成两大类的本质区别：基本数据类型和引用数据类型它们在内存中的存储方式不同。

  1. 基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
  2. 引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

• 加分回答：

  1. Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key。

     let key = Symbol('key');
     let obj = { [key]: 'symbol'};
     let keyArray = Object.getOwnPropertySymbols(obj); // 返回一个数组[Symbol('key')]
     obj[keyArray[0]] // 'symbol'
     

  2. BigInt也是ES6新出的一种数据类型，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题

题4：说一说JavaScript有几种方法判断变量的类型？

解题思路：

typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)

正确题解：

• JavaScript有4种方法判断变量的类型，分别是typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)
  1. typeof：常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object’。
  2. instanceof：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。
  3. constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。
  4. Object.prototype.toString.call()：适用于所有类型的判断检测，检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。 这四种判断数据类型的方法中，各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()这种方法。
• 加分回答
  1. instanceof的实现原理：验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为true。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，找到返回true，未找到返回false。
  2. Object.prototype.toString.call()原理：Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变this的指向，那么把Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果

题5：说一说promise是什么与使用方法？

解题思路：

pendding、rejected、resolved、微任务、then、catch、Promise.resolve()、Promise.reject()、Promise.all() Promise.any()、Promise.race()

正确题解：

• Promise的作用：Promise是异步微任务，解决了异步多层嵌套回调的问题，让代码的可读性更高，更容易维护
• Promise使用：Promise是ES6提供的一个构造函数，可以使用Promise构造函数new一个实例，Promise构造函数接收一个函数作为参数，这个函数有两个参数，分别是两个函数 resolve和reject，resolve将Promise的状态由等待变为成功，将异步操作的结果作为参数传递过去；reject则将状态由等待转变为失败，在异步操作失败时调用，将异步操作报出的错误作为参数传递过去。实例创建完成后，可以使用then方法分别指定成功或失败的回调函数，也可以使用catch捕获失败，then和catch最终返回的也是一个Promise，所以可以链式调用。
• Promise的特点：
  1. 对象的状态不受外界影响（Promise对象代表一个异步操作，有三种状态）。 pending（执行中 Resolved（成功，又称Fulfilled） rejected（拒绝） 其中pending为初始状态，fulfilled和rejected为结束状态（结束状态表示promise的生命周期已结束）。
  2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise对象的状态改变，只有两种可能（状态凝固了，就不会再变了，会一直保持这个结果）：
     • 从Pending变为Resolved
     • 从Pending变为Rejected
  3. resolve 方法的参数是then中回调函数的参数，reject 方法中的参数是catch中的参数
  4. then 方法和 catch方法 只要不报错，返回的都是一个fullfilled状态的promise
• 加分回答 Promise的其他方法：
  • Promise.resolve() :返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。
  • Promise.reject()：返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法。
  • Promise.all()：返回一个新的promise对象，该promise对象在参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
  • Promise.any()：接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。
  • Promise.race()：当参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。

🎉 总结

求知无坦途，学问无捷径。👣$一步一个脚印，你走过的路，每一步都算数。$ 每一次进步都是对自己努力的肯定。如果读了文章有收获，不如一起来学习，一起进步吧。传送门🚪刷题神器