小滴课堂22年新版互联网大厂前端高频面试题（1）~持续更新中

原创已于 2022-08-11 14:23:41 修改 · 306 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #开发语言

于 2022-07-21 17:58:08 首次发布

小滴课堂前端面试题专栏收录该内容

12 篇文章

订阅专栏

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、JavaScript有几种类型的值？

回答

（一）栈：

原始数据类型（Undefifined，Null，Boolean，Number、String）

（二）堆：

引用数据类型（对象、数组和函数

（三）区别：

1、原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、⼤小固定，属于被频繁使用数据，所以放⼊栈中存储

2、引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会⾸先检索其在栈中的地址，取得地址后从堆中获得实体

（四）传递⽅式：

原始类型是按值传递，引⽤类型是按共享传递，即传的是指针。

（五）设计原因：

JS 中这种设计的原因是：按值传递的类型，复制⼀份存入栈内存，这类类型⼀般不占用太多内存，而且按值传递保证了其访问速度。按共享传递的类型，是复制其引用，而不是整个复制其值（C 语⾔中的指针），保证过大的对象等不会因为不停复制内容而造成内存的浪费

（六）图解js的内存模型：

二、JS闭包究竟为何物，为何面试总逃不过这个问题

回答

（一）闭包究竟是什么？

1、闭包是⼀种函数，它是⼀个可以访问其他函数内部变量的函数，闭包⼀般以函数作为返回值

2、闭包的特点：

（1）函数嵌套函数

（2）内部函数可以访问外部函数的变量

（3）参数和变量不会被回收。

（二）看⼀个经典的闭包例⼦结合理解‘’

（三）⼀句话总结：闭包就是⼀个可以访问其他函数内部变量的函数

三、5分钟带你攻破原型、构造函数及实例之间的关系

回答

实例._proto_ === 原型
实例.constructor === 构造函数
原型.constructor === 构造函数
构造函数.prototype === 原型
const obj = new Object()
obj._proto_ === Object.prototype
obj.constructor === Object

只要记住以上的关系是对等的，那么⾯试中这三者的关系就没问题了

四、react中的高阶组件是什么？

回答

（一）思路

1、定义

⾼阶组件就是⼀个函数，且该函数接受⼀个组件作为参数，并返回⼀个新的组件

2、应用场景

业务开发过程中可能会遇到⼀些个性化的需求，此时如果再去重新开发⼀个组件，会让后续的维护成本变高。

3、代码示例

4、原始组件

（1）父组件

import GeneralComponents from './GeneralComponents';

const ComponentOne = () => {
  return (
    <div>
      组件⼀
      <GeneralComponents />
    </div>
  );
};

export default ComponentOne;

（2）通用组件

const GeneralComponents = () => {
  return (
    <div style={{ backgroundColor: 'red', width: '200px' }}>通⽤的组件</div>
  );
};

export default GeneralComponents;

5、新增/改造原有组件逻辑

（1）新增的组件⼆

import HigherOrderComponent from './HigherOrderComponent';
import GeneralComponents from './GeneralComponents';

const ComponentTwo = () => {
  return (
    <div>
      组件⼆
      <HigherOrderComponent Subcomponent={<GeneralComponents />} />
    </div>
  );
};

export default ComponentTwo;

（2）高阶组件（增加计数器）

import { useState } from 'react';

const HigherOrderComponent = ({ Subcomponent }) => {
  const [xd, setXd] = useState(1);
  return (
    <div>
      <h1 onClick={() => setXd(xd + 1)}>{xd}</h1>
      {Subcomponent}
    </div>
  );
};

export default HigherOrderComponent;

五、var、let 及 const 区别

回答

（一）前置知识

1、变量提升

console.log(a) // undefined
var a = 1

解析：上述代码中，输出了a，此时a还未声明，但是我们却可以正常输出这个未被声明的变量，这就是我们所说的变量提升，提升的仅仅是声明变量的操作

实际执⾏效果：

var a
console.log(a) a = 1

不仅声明变量会提升，声明函数也会被提升

console.log(a) // ƒ a() {}
function a() {}
var a = 1

并且函数声明优先于变量声明，这段代码实际的执⾏效果如下

var a
function a() {}
console.log(a) // ƒ a() {}
a = 1
// 优先的意思就是函数声明会覆盖变量声明

说完了这些，想必⼤家也知道 var 存在的问题了，使用 var 声明的变量会被提升到作用域的顶部，接下来我们再来看 let 和 const 。

var a = 1
let b = 1
const c = 1
console.log(window.a) // 1
console.log(window.b) // undefined
console.log(window.c) // undefined
function test(){
console.log(a)
let a }
test() // 报错，a is not defined

（二）总结：

1、首先在全局作用域下使⽤用let 和 const 声明变量，变量并不会被挂载到 window上，而var会

2、let和const会生成个块级作用域，变量只能在块级作用域中使用。如在函数⾥使⽤let和const，则块级作用域就是函数作用域

3、let和const有个特点，叫暂时性死区，变量在作用域内如未被声明，则不能使用

4、let和const不能重复声明，const初始化时就要进行赋值，并且中途不允许修改值，可以修改对象的属性值，因为const声明变量时只是保证指向这个对象的指针不变而已