2023高频前端面试题(带答案/持续更新中)

没有头发的战斗暴龙兽

已于 2024-06-22 10:30:25 修改

阅读量1.4k

点赞数

文章标签：前端 vue.js react.js javascript css

于 2023-02-15 14:55:57 首次发布

本文链接：https://blog.csdn.net/weixin_42069587/article/details/129042605

版权

JavaScript部分

1.ES6的新特性

(1)let: 块级作用域

(2)const: 常量; 块级作用域; 一旦声明则无法进行更改

(3)模板字符串: 使用 `${}` 可以将字符串和其它变量进行拼接, 比使用 + 进行拼接更方便

(4)解构赋值: let { name, age } = { name: '小明', age: 18 }

(5)箭头函数: let fun = ()=>{} 没有属于自己的this, 其this是继承了其所在上下文中的this, 也不能进行实例化(对象的创建)

(6)Promise: 异步编程的一种方案, 用来解决原生 AJAX的回调地狱, 但是其 then 的链式调用还是会形成多层的嵌套

(7)ES6模块: 是对外部的引用，CommonJS是对外部的复制

2.闭包

闭包函数: 声明在一个函数中的函数, 叫做闭包函数(即形成函数的嵌套)

闭包: 内部函数可以访问外部函数中声明的变量

特点: 1) 函数中的变量会长期存在内存当中

2) 避免全局变量的污染

3) 由于其长期存在内存当中, 会增大内存的使用量

4) 使用不当会造成内存泄漏

3.对Promise的理解

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，Promise解决了原生AJAX回调地狱的问题。

(1)Promise的实例有三个状态: pending(进行中)、Resolved(已完成)、Rejected(已拒绝)。

当把一个事件交给Promise时，它的状态就是pending，任务成功完成就是Resolved。

(2)Promise实例有两个状态的改变：

pending -> resolve // 成功返回结果

pending -> reject // 没有成功返回结果

Promise从一个状态已经变成另一种状态时，其状态就不可能再发生改变。结果成果返回时就会执行resolve回调，没有成功返回结果就会执行rejected回调。

(3)Promise的缺点：

无法中途进行取消，Promise一旦建立就必定会执行成功或者失败结果的回调

如果不在Promise内部设置回调函数，则其内部抛出的错误并不会反应到外部

当处于pending状态时，无法得知目前事件进展到了哪一步（是刚刚开始还是即将完成）

4.async/await

带有async关键字的函数其返回值是一个promise对象

其原理就是用迭代器将promise进行了再一次的封装，使得promise可以中间暂停。当函数内部执行到一个await语句的时候，如果语句返回一个promise对象，那么函数将会等待promise对象的状态变为resolve后再继续向下执行。

因此async/await可以将异步逻转化为同步的顺序来进行书写，使得代码更具有可读性。

5.for...in和for...of的区别

(1)for...in是遍历对象的键名; for...of是遍历对象的键值

(2)for...in会遍历整个对象的原型链, 所以for...in的性能要比for...of差

一般对对象的遍历使用for...in，对数组的遍历使用for...of

6.遍历对象的方法

(1)for...in: 遍历对象的键名

(2)for...of: 遍历对象的键值

(3)Object.keys(): 该方法返回一个包含对象自身的所有可枚举属性的数组

(4)Object.values(): 该方法返回一个包含对象自身的所有可枚举属性的值的数组

(5)Object.entries(): 该方法返回一个包含对象自身的所有可枚举属性的键值对数组

7.get与post的区别

get：

(1)一般用于数据资源获取；

(2)浏览器会对get进行缓存；

(3)参数会暴露在url中并且url会被保存在历史记录当中，所以不安全；

(4)对请求的长度有限制(不同浏览器的最长上限不一样)，所以不能进行大文件的上传

(5)在历史回退时get并不会向服务器重心发送请求

(6)请求速度比post更快，因为get请求会把header和data一起发送过去，而post会先发送header当服务器响应100的时候再把data发送过去

post：

(1)一般用于对服务器资源产生影响的情景

(2)对请求长度没有限制，其参数是放在request body中，所以相对于get会更加安全

(3)在历史回退时会重新向服务器发送请求

8.箭头函数

箭头函数并没有属于自己this，其当中的this是捕获所在上下文当中this作为自己this的值；

箭头函数不能new出一个对象

9.内存泄漏

1.原理：是指不再使用的内存(变量)，未能释放；

2.常见内存泄漏情况：

(1) 意外的全局变量：使用了未声明的变量，而意外创建了一个全局变量，这个变量就会一直留在内存当中无法被收回；

(2) 被遗忘的定时器：在开启了一个定时器用完之后没有清除定时器(setTimeout会自动清除，但是setInterval需要手动进行清除);

(3) DOM元素的引用：当引用了一个DOM元素，后面将DOM元素被删除，但是由于引用一直存在所以此内存也不会被自动收回；

(4) 闭包：闭包会一直常驻于内存当中，用完不清除也会造成内存泄漏；

10.防抖与节流

节流：如果事件在规定时间内多次触发，并不会重新计时，只要达到了规定时间就会被触发，并且只触发一次。

防抖：如果事件是在规定的时间内再次被触发，则计时器会重新计时，并且只会执行最后一次。

CSS部分

1.文字默认最小为12px，怎么比12px更小

使用缩放：transform: scale(0.5) // 缩小50%,变成6px

2.translate有什么用

根据当前的元素的位置移动元素(根据X轴和Y轴进行移动)

3.transition有什么用

transition是过渡, 元素从一个位置到另一个位置的过渡(并不会直接闪现到终点位置, 而是有动画样的平滑过渡到终点位置)

Vue部分

1.Vue3中父组件调用子组件中的方法

在子组件标签中设置添加ref属性 --> 定义一个ref响应式数据，变量名必须与上一步设置ref的属性值相同 --> 变量名.value.子组件中的方法

在子组件中：


<script setup>
function childFun(){
  alert('子组件中的内容被调用了')
}

defineExpose({  // 在子组件中需要用 defineExpose 将需要被调用的变量或方法暴露出去
  childFun
})
</script>

在父组件中：


<template>
  <div>
    <Child ref="child"/>
    <button @click="handleClick">点我调用子组件中的方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './components/Child.vue';

const child = ref()  // 变量名必须与 ref 的值相同（获取DOM元素）

function handleClick(){
  child.value.childFun()  // 调用子组件中的方法
}
</script>