前端面试题

最新推荐文章于 2024-05-12 17:24:39 发布

妳头发乱了噢

最新推荐文章于 2024-05-12 17:24:39 发布

阅读量1k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44688479/article/details/114142165

版权

1.js事件捕获和事件冒泡？

事件捕获：外部元素想内部元素传递

事件冒泡：内部元素向外部元素传递

阻止事件冒泡或者捕获：event.stopPropagation();

2.map和forEach区别？

map会返回一个新数组，forEach不会；

3.HTML5 应用程序缓存和浏览器缓存有什么区别？

离线缓存：用户可在离线时使用它们

速度：加载速度更快

减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源

实现借助manifest文件

4.什么是防抖和节流？有什么区别？如何实现？

在前端开发中，会遇到频繁触发的事件，比如鼠标移入移出，键盘按下松开等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

区别：

防抖就是设定了一个时间，在这个时间内如果再次触发时间，那么这个时间就会重置，直到一段时间没有触发才回执行此函数；

节流是规定时间执行一次

如何实现:

防抖：

维护一个计时器，规定在延时时间后触发函数，但是在延时时间内再次被触发的话，就取消之前的计时器而重新设置，这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行，并且只有最后一次操作是有效操作。

节流：

通过判断是否达到一定时间来触发函数，使得一定时间内只触发一次函数

参考：什么是防抖和节流？有什么区别？如何实现？_Benjamin的博客-CSDN博客_什么是防抖和节流?有什么区别?如何实现

5.介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

set：类似与数组，但成员的值都是唯一的，没有重复的

weakSet：WeakSet 结构与 Set 类似，也是不重复的值的集合；

set和WeakSet区别：1.WeakSet的成员只能是对象，而不能是其他类型的值； 2.WeakSet 不可遍历。原因是因为WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。而遍历必须保证这个值存在；

Map：类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键；

WeakMap：WeakMap结构与Map结构类似，也是用于生成键值对的集合。

Map和WeakMap区别：1.WeakMap只接受对象作为键名，不接受其他类型的值作为键名；2.WeakMap不可遍历

参考：ES6 入门教程

6.介绍下深度优先遍历和广度优先遍历，如何实现？

区别：

对于算法来说无非就是时间换空间空间换时间

深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大
深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点

深度优先采用的是堆栈的形式, 即先进后出
广度优先则采用的是队列的形式, 即先进先出

7.普通函数和箭头函数的区别

1.普通函数

普通函数可以通过bind改变this指向；

普通函数可以使用new

2.箭头函数

箭头函数本身没有this指向，它的this是继承外层第一个普通函数的this，外层没有普通函数时，this指向window；

箭头函数使用new会报错；

箭头函数不能通过bind改变this指向

8.js哪些操作会造成内存泄漏？

1.意外的变量

2.没有清理的dom与元素引用

3.闭包

4.被遗忘的定时器或者回调

怎样避免内存泄露？

1.减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2.注意程序逻辑，避免死循环

示例：JS哪些操作会造成内存泄漏？ - 简书

5.react中离开确定自定义？

Prompt 组件

message: string 当用户离开当前页面时，设置的提示信息。
message: func 当用户离开当前页面时，设置的回掉函数 <Prompt message={location => ( Are you sue you want to go to ${location.pathname}? )} />
when: bool 通过设置一定条件要决定是否启用 Prompt，属性值为true时启用防止转换；

6.es6新增基础数据类型Symbol？

概念：创建独一无二的变量，防止属性名冲突；

Symbol 值通过Symbol函数生成，但他前面不可以加new，因为Symbol是原始类型，并不是对象；

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分；

Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

Symbol 值不能与其他类型的值进行运算

属性description，直接返回 Symbol 的描述：

const sym = Symbol('foo');

sym.description // "foo"

用途：（1）作为对象属性当一个复杂对象中含有多个属性的时候，很容易将某个属性名覆盖掉，利用 Symbol 值作为属性名可以很好的避免这一现象。

(2)

7.loader和plugin的区别?

对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。

Loaders是在打包构建过程中用来处理源文件的，例如把JSX，Scss，Less..这些文件转换为js和css文件，是单纯的文件转换过程；

plugin是用来拓展整个webpack功能的，不直接操作单个文件；

常用的plugin：1.html-webpack-plugin（自动生成一个html文件，并且引用相关的js，css文件）2.opy-webpack-plugin：复制文件到dist文件下面

8.如何理解noed中间件？

中间件是用来处理处理客户端请求的函数，当接受到客户端i请求时，首先会将请求交给中间件，中间件中有一个next（）回调函数，用来继续执行这个请求。我们可以通过中间件来定义请求头，返回码以及标签内容等

9.如何理解服务端渲染？

简单来说就是客户端需要做的事情放到了服务端，减少了客户端压力，使首屏加载速度很快，利于seo；

优缺点：

优：1.利于首屏渲染 2.利于SEO（网络爬虫）

缺：1.服务端压力过大 2.学习成本比较高

10.Vue中computed和watch的区别？

computed是计算属性，他相当于是一个有缓存的watch，简单来说，computed的性能更佳；

watch是监听属性，watch提供两个参数，第一个是新值，第二个是输入之前的值

区别：

computed：

1.computed支持缓存，只有依赖数据发生改变，才会重新计算

2.computed不支持异步

watch：

1.watch不支持缓存，数据变，直接会触发相应的操作

2.watch支持异步

11.Vue中复杂数据类型怎么监听？

深度监听deep: true

首次赋值监听immediate：true

12.你有对 Vue 项目进行哪些优化？

v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染

13谈谈src和href的区别？

1.src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系

14.如何判断数组类型？

1.obj instanceof Array

2.Array.isArray(obj)

3.Array.prototype.isprototypeof(obj)

4.Object.prototype.toString().call(obj)

15.instanceof和typeof区别？

1.typeof返回的是string、function、bool、number、object、undefined而instanceof返回的是一个true和false

2.typeof用来判断变量类型，instanceof用来判断对象，判断xxx是否是某个对象的实例

16.百度地图API绘制点、线、面？

1.绘制点：首先new一个点，let point=new marker(点坐标)，然后通过addoverlay方法将点添加到地图中，map.addOverlay(point)

可以自定义更改点的icon，通过setIcon方法或者属性来修改，var marker = new BMapGL.Marker(point, {icon: myIcon});

2.绘制线：画线是通过polyline方法实现的，polyline方法中第一个参数是个数组，数组里面是所有的点，这些点构成的线，第二个参数是一个对象，可以改变线的颜色、粗细等，创建完polyline后还是通过addoverliay方法添加到map中

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

3.绘制多边形：绘制多边形其实和绘制线差不多，但他会将这些点按照顺序一次连接，最终围成一个多边形；他是通过polygon实现的

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

4.绘制圆：绘制圆是通过Circle方法来实现的，他有三个参数，第一个是圆的中心点，第二个是圆的半径，第三个是一个对象，可以设置圆的颜色、粗细等

var circle = new BMapGL.Circle(point, 500, {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});

17.百度地图有几种坐标系？怎么把其他坐标系转为百度坐标系？

1.百度地图有两种坐标系（1)经纬度坐标系，以度为单位（2）墨卡托坐标系，以米为单位

转换：

18.React面试题？

2019年17道高频React面试题及详解 - 掘金

19.点云、矢量、轨迹是什么？

点云：通过激光雷达采集到的数据集合，可以还原显示世界

矢量：是包含红绿灯，斑马线、十字路口、人行道等的一个数据集合

轨迹：轨迹就是采集车辆运行的路线数据

20.react中resf的理解和用法？

refs对元素进行标记，便于获取并修改dom元素

ref在原生dom和组件上是不同的，在原生dom元素上是获取的dom元素本身，在组件上获取到的是他的子组件

refs的使用当时主要有两种：

1.通过回调函数

2.通过createRef方式

3.通过hooks中useRef声明

21.

妳头发乱了噢

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

1.js事件捕获和事件冒泡？事件捕获：外部元素想内部元素传递事件冒泡：内部元素向外部元素传递阻止事件冒泡或者捕获：event.stopPropagation();2.map和forEach区别？map会返回一个新数组，forEach不会；...
复制链接

扫一扫