2024年前端面试题加答案，成功入职阿里_前端面试题2024

不要使用全局函数；

Switch语句必须带有default分支；

if语句必须使用大括号；

for-in循环中的变量应该使用var 关键字明确限定作用域，从而避免作用域污染。

26、eval是做什么的？

eval可以把字符串解析成JS代码并运行；

避免使用eval,不安全，非常消耗性能；

把JSON字符串传换成JSON对象时可以使用eval。

27、null和underfined的区别？

null表示定义了一个对象，值为“空值”；

underfined表示这个不存在这个值。

28、说说同步和异步的区别？

同步：在同一时间内不允许出现别的操作。

异步：在同一时间内允许不同的操作。

29、defer和async的区别？

defer：按顺序执行标签的顺序执行。

30、[1,2,3].map(parseInt)的输出结果是什么？

[1,NaN,NaN],因为parseInt需要两个参数(val,radix)。

31、use strict的理解和作用？

use strict是ES5新增的一种严格运行模式。可以使得JS代码在严格模式下运行，使得编码更加规范更加严谨，消除了一些怪异行为。

32、说说严格模式的限制？

变量必须先声明后再使用；

函数的参数不能出现同名属性，否则报错；

不能使用with语句；

禁止this指向全局对象。

33、说说对JSON的理解？

JSON是一种轻量级的数据交换格式；

基于javascript的一个子库，数据格式简单，易于读写，占用带宽小；

JSON字符串可以转换成JSON对象；

JSON对象可以转换成JSON字符串。

34、说说JS延迟加载的方式有哪些？

defer和async，动态创建DOM(用得最多),异步加载JS。

35、说说attribute和property的区别？

attribute是DOM节点自带的属性；

property是这个DOM元素作为对象，其附加的内容。

36、说说let的区别是什么？

不支持变量名提升；

使用let声明变量会形成块级作用域；

不允许重复声明，也就是在函数内部不允许重复声明参数。

37、如何通过JS判断一个数组？

使用instanceof方法；

使用constructor方法；

使用ES5新增的方法isArray()

38、说说let、var、const的理解？

let允许声明具有块级作用域的变量、语句或表达式，不支持变量名提升。

var用来声明全局变量，支持变量名提升。

const用来声明只读引用(即指针)，当被改变时就会报错。

39、正则表达式的使用？

使用RegExp()函数的时候，不仅需要使用转义引号，而且还需要使用双反斜杠。使用正则表达式字面量的效率更高。

40、javascript中caller和callee的使用？

caller返回的一个对函数的引用，该函数调用了当前函数。

callee返回一个正在执行的function函数，也就是所指定的function对象的正文。

41、说说window.load()和$(document).ready的区别？

window.load()必须等到页面上包括图片在内的所有元素加载完成才能执行；

$(document).ready()等到DOM结构绘制完成就可以执行，不必等到所有元素加载完成。

42、javascript数组去重的方法汇总？

使用for嵌套for循环，利用splice去重；

使用ES6的set方法去重；

使用indexOf去重；

使用sort()去重；

利用对象的属性不能相同的特点进行去重；

利用includes去重。

43、浏览器缓存？

分为强缓存和协商缓存。

44、防抖、节流的理解？

防抖：当滚动事件中需要进行复杂计算或实现一个按钮的防二次点击操作，可以通过函数防抖来实现；

节流：节流与防抖的本质上不一样。防抖是把多次操作当作一次来执行，节流是间隔一段时间执行操作。

45、javaScript变量提升？

在生成执行环境时，会有两个阶段。第一个阶段是创建阶段，JS解释器会找出需要提升的变量和函数，并且会给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为underfined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。

46、实现Storage，使得该对象为单例，以及使用方式。

var instance = null;

class Storage{

static getInstance(){

if(!instance){

instance = new Storage();

}

return instance;

}

setItem = (key,value) => localStorage.setItem(key,value),

getItem = key => localStorage.getItem(key);

}

47、说说你对事件流的理解？

事件流分为两种：捕获事件流和冒泡事件流。

48、说说从输入URL到看到页面发生的全过程？

（1）浏览器主进程接管，开了一个下载进程；

（2）进行http请求；

（3）将下载完成的内容交给Renderer进程管理；

（4）Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的；

（5）当浏览器遇到link标签或者script、img标签，就会去下载这些内容，遇到需要缓存的时候就使用缓存，不适用缓存的重新下载资源；

（6）css rule tree和dom tree 生成完了之后，开始合成render tree，这个时候浏览器会进行layout,开始计算每个节点的位置，然后进行绘制；

（7）绘制结束后，关闭TCP连接，过程有四次握手。

49、做一个dialog组件，说说你的设计思路？它有什么功能？

该组件需要提供hook指定渲染位置，默认渲染在body下面；

然后该组件可以指定外层样式，如宽度等；

组件外层需要一层mask来遮住底层内容，点击mask可以执行传过来的onCancel函数关闭dialog；

另外组件是可控的，需要外层传入visible表示是否可见；

然后dialog可以自定义头head和底部footer，默认有头部和底部，底部有一个确认和取消按钮，确认按钮会执行外部传进来的onOk事件，然后取消按钮会执行外部传进来的onCancel事件；

当组件的visble为true时候，设置body的overflow为hidden，隐藏body的滚动条，反之显示滚动条；

组件高度可能大于页面的高度，组件内部需要滚动条；

只有组件的visible有变化且为true时候，才重新渲染组件内的所有内容。

50、说说ajax、fetch、axiox之间的区别？

ajax基于原生XHR开发；

fetch默认不会带cookie，需要添加配置项；

axios支持promise。

51、说说内存泄漏？

dom清空时，还存在引用；

ie中使用闭包；

定时器未清除；

子元素存在引起的内存泄漏。

52、javascript自定义事件？

document.createEvent();

event.initEvent();

element.dispatchEvent();

53、javascript数组排序的几种方式？

冒泡排序；

快速排序；

54、javascript数组一行代码去重方法？

set方法去重。

55、javascript如何判断一个对象是否为数组？

Array.isArray();

最后

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/635177