当前位置: article > 正文

2023前端面试题（含答案）_前端面试题2023

作者：算法编织者 | 2024-02-06 11:31:04

踩

前端面试题2023

set，map区别

1.Map是键值对，Set是值的集合

2.Map可以通过get方法获取值，而set不能;因为它只有值；

3.都能通过迭代器进行for...of遍历；

4.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储

盒子水平垂直居中方法(常见)

四种方式：

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。


.div {
        position: absolute;
        width: 200px;height: 200px;
        left: 50%;top: 50%;
        transform: translate(-50%, -50%);
      }

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。


.div { position: absolute;
      width: 200px;height: 200px;
      left: 0;right: 0;
      top: 0;bottom: 0;
      margin: auto;
 
}

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。


.div {
        position: absolute;
        width: 200px;height: 200px;
        left: 50%; top: 50%;
        margin-left: calc(-200px / 2);
        margin-top: calc(-200px / 2);
      }

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。


.div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center;
      }

隐藏元素的方法

visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
display: none;元素会变得不可见，并且不会再占用元素位置。会改变页面布局。
transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。

浏览器渲染机制

HTML 代码转化成 DOM
CSS 代码转化成 CSSOM（CSS Object Model）
结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
生成布局（layout），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

h5新特性，语义化

html5新特性：音频video 视频 audio、画布canvas、H5存储localStorage sessionStorage

语义化标签： header nav main article section aside footer

合理正确的使用语义化的标签来创建页面结构如 header,footer,nav

盒子模型由哪些组成

content 内容、padding 内填充、border 边框、外边距 margin

描述cookies sessionStorage localStorage区别

相同点：都存储在客户端
不同点：1.存储大小

· cookie数据大小不能超过4k。

· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage 数据在当前浏览器窗口关闭后自动删除。

· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

BFC

BFC就是块级格式化上下文，让元素成为一个独立的空间不受外界影响也不影响外面布局

css3新特性(介绍一下css3)

var let const区别

const 定义常量，不可以重复赋值块级作用域不存在变量提升
var 定义变量，可以重复声明 var 全局作用域或函数作用域有变量提升
let 定义变量，不可以重复声明，块级作用域不存在变量提升

js有哪些基础数据类型

基础数据类型String、Number、Boolean、Undefined、Null
引用数据类型: Object、Array、Function、Date等
Symbol、BigInt是ES6之后新增的属于基本数据类型
Symbol 指的是独一无二的值

BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数

null和undefined区别

首先 Undefined 和 Null 都是基本数据类型

undefined 代表的含义是

未定义，一般变量声明了但还没有定义的时候会返回 undefined

null 代表的含义是

空对象。null主要用于赋值给一些可能会返回对象的变量，作为初始化。

==和===区别

双等号（==）进行相等判断时，如果两边的类型不一致，会强制类型转化再进行比较。
三等号（===）进行相等判断时，如果两边的类型不一致，不强制类型准换，直接返回 false

js中哪些数据在if判断时是false(6个)

1、undefined（未定义，找不到值时出现）

2、null（代表空值）

3、false（布尔值的false，字符串"false"布尔值为true）

4、0（数字0，字符串"0"布尔值为true）

5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN===“number”）

6、""（双引号）或’’（单引号）（空字符串，中间有空格时也是true）

注意空数组空对象，负值转的布尔值时都为true

判断数据类型的方法有哪些，有什么区别

深拷贝浅拷贝

浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响
- Object.assign
- 展开运算符 ...
深拷贝: 完全拷贝一个新对象，修改时原对象不再受到任何影响

数组的方法

js数组去重

作用域作用域链

作用域：变量和函数起作用的范围。作用域最大的用处就是隔离变量，不同作用域下的同名变量不会有冲突。

作用域链：访问变量时，自己的作用域中没有，一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃，这种一层一层的关系，就是作用域链
原型、原型链

原型：原型分为隐式原型和显式原型，每个对象都有一个隐式原型，它指向自己的构造函数的显式原型。每个构造方法都有一个显式原型

原型链：多个_proto_组成的集合
this指向

普通函数：谁调用就指向谁，没有调用者，就指向全局对象window。

定时器 this指向window。

箭头函数没有this,它的this指向取决于外部环境。

构造函数：this是指向实例
call apply bind区别

相同点：改变this指向。

不同点：

call和apply会调用函数，并且改变函数内部this指向，call和apply传递的参数不一样，call传递参数使用逗号隔开，apply使用数组传递

bind不会调用函数，会改变函数内部this指向

应用场景：

call经常做继承
apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值。
bind不调用函数，但是可以改变this指向，比如改变定时器内部的this指向。

闭包，闭包的使用场景

闭包：定义在一个函数内部的函数（方法里面返回方法）。

闭包的使用场景：settimeout、回调、函数防抖、封装私有变量

闭包存在的意义是什么？(1) 延长变量的生命周期；(2) 创建私有环境；

箭头函数，普通函数区别

外形不同：箭头函数使用箭头定义，普通函数中没有

箭头函数都是匿名函数。普通函数有匿名函数，也有具体名函数

箭头函数不能用于构造函数，不能使用new。普通函数可以用于构造函数，以此创建对象实例。

this指向不同:(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
(2).普通函数的this指向调用它的那个对象
promise

什么是：
Promise是ES6中的一个内置对象，实际是一个构造函数

特点：
①三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都不能改变这个状态。
②两种状态的转化：其一，从pending（进行中）到resolved（已完成）。其二，从pending（进行中）到rejected（已失败）。只有这两种形式的转变。
③Promise构造函数的原型对象上，有then()和catch()等方法，then()第一个参数接收resolved()传来的数据，catch()第一个参数接收rejected()传来的数据

作用：
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护

promise的使用


function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
 
const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log('data==>', data)
      return 'done'
    })
    .catch(err => {
      console.log('err==>', err)
    })
 
makeRequest()

async await

什么是：
①async/await是ES7新特性
②async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③async/await是基于Promise实现的，它不能用于普通的回调函数
④async/await与Promise一样，是非阻塞的
⑤async/await使得异步代码看起来像同步代码，这正是它的魔力所在

Async/Await的使用


function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
 
const makeRequest = async () => {
  const value = await getJSON()
  console.log(value)
  return value
}
 
makeRequest()

Async/await 比 Promise 更优越的表现
1、简洁干净：使用 async/await 能省去写多少行代码
2、错误处理：async/wait 能用相同的结构和好用的经典 try/catch 处理同步和异步错误，错误堆栈能指出包含错误的函数。
3、调试：async/await 的一个极大优势是它更容易调试，使用 async/await 则无需过多箭头函数，并且能像正常的同步调用一样直接跨过 await 调用

总结

Async/await进一步优化了Promise.then()的缺点，使代码更简洁，所以在项目中尽量使用Async/await

for…in 和 for…of的区别

for…of遍历获取的是对象的键值, for…in获取的是对象的键名;
for…in会遍历对象的整个原型链, 性能非常差不推荐使用,而for…of只遍历当前对象不会遍历原型链;
for…in循环主要是为了遍历对象而生,不适用遍历数组; for…of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象

防抖节流

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
应用场景：文本输入的验证；
限制鼠标连击触发

函数节流：每隔一段时间，只执行一次函数。
应用场景：滚动加载，加载更多或滚到底部监听。
搜索联想功能

es6新特性(介绍一下es6)

...、箭头函数、promise、async/await、let和const、set集合、导入improt 导出export default、smybol新的基本类型

http,https区别

1、HTTPS协议需要CA证书,费用较高; 而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

如何判断一个对象是空对象？
1.使用JSON自带的.stringify万法来判断：


if(Json.stringify(obj)=='{}'){
    console.log('空对象')
 }

2.使用ES6新增的方法Object.keys()来判断：


 if(Object.keys(Obj).length<0){
    console.log('空对象')
 }

js哪些操作会造成内存泄露

意外的全局变量引起的内存泄露。
闭包引起的内存泄露
没有清理的DOM元素引用。
被遗忘的定时器或者回调。
子元素存在引起的内存泄露

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

vue.........
介绍一下MVC MVVM

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
Model 层代表模型层(数据层)。View 代表视图层(页面)。ViewModel 是一个同步View 和 Model的对象，充当桥梁。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互
它本质上是MVC 的改进版

区别

MVC中Controller演变成MVVM中的ViewModel
MVVM通过数据来显示视图层而不是节点操作
MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

v-model的原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
为什么data是一个函数

每一个组件都有自己的私有作用域，确保各组件数据不会被干扰。

router和route的区别

route是当前正在跳转的路由对象，可以从route里面获取hash,name,path,query,mathsr等属性方法（接收参数时使用）
router跳转连接就可以使用

query和params 有何区别？

用法：query用path来引入，params只能用name来传递，不能使用path
query更像是get请求（会在地址栏显示参数）；params更像post方法传递（不会在地址栏显示）


<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
// params传递
<router-link :to="`/home/news/shownews/${n.id}/${n.name}`">{{ n.name }}</router-link>

vue组件通讯有哪些方式

父子之间传值：

首先使用import child from './child.vue'；components: { comArticle },建立父子关系

1.props 父向子传值

1.1父组件通过:自定义名称="值",

1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed.


<!-- 父组件 -->
<template>
  <div class="section">
    <child :msg="articleList"></child>
  </div>
</template>
 
<script>
import child from './child.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      msg: '阿离王'
    }
  }
}
</script>
 
 
 
<!-- 子组件 child.vue -->
<template>
  <div>
    {{ msg }}
  </div>
</template>
 
<script>
export default {
  props: {
      msg: String
  }
}
</script>

`2.$emit 子向父传值`

2.1子组件通过this.$emit('自定义事件',参数)

2.2父组件用@接受自定义事件,并定义方法.


<!-- 父组件 -->
<template>
  <div class="section">
    <child :msg="articleList" @changMsg="changMsg"></child>
  </div>
</template>
 
<script>
import child from './child.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      msg: '阿离王'
    }
  },
  methods:{
      changMsg(msg) {
          this.msg = msg
      }
  }
}
</script>
 
 
<!-- 子组件 child.vue -->
<template>
  <div>
    {{ msg }}
    <button @click="change">改变字符串</button>
  </div>
</template>
 
<script>
export default {
  props: {
      msg: String
  },
  methods: {
      change(){
          this.$emit('changMsg', '阿离王带你学习前端')
      }
  }
}
</script>

生命周期方法，在哪一步发送请求

vue2 在created 和 mounted都可以发送请求，区别不大。但在create中时无法获取dom

vue3 是在onMounted发请求

生命周期

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，data和methods中的数据都还没有初始化。

create：data 和 methods都已经被初始化好了。如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：已经编译好了模板，但是还没有挂载到页面中，此时，页面还是旧的

mounted：Vue实例已经初始化完成了，进入到了运行阶段。如果想要操作页面上的DOM节点，最早在这个阶段中进行

beforeUpdate：页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，还没有真正被销毁

destroyed：已经被销毁了。

v-if v-show区别

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；

使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

.vue , 微信小程序 , uni-app属性的绑定

vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。

说一下vue3.0你了解多少?

vue2中，我们一般会采用mixin来复用逻辑代码，挺好用的，但是存在一些问题：例如代码来源不清晰、方法属性等冲突。
基于此在vue3中引入了Composition API（组合API），使用纯函数分隔复用代码。

在vue2中，组件必须只有一个根节点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的

vue、小程序、uni-app中的本地数据存储和接收


vue：
	存储：localstorage.setItem（‘key’，‘value’）
	接收：localstorage.getItem（‘key’）
 
微信小程序：
	存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
	接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，
 
uni-app：
	存储：uni.setStorage({key:“属性名”，data:“值”}) //异步 
		uni.setStorageSync(KEY,DATA) //同步
	接收：uni.getStorage({key:“属性名”,success(res){res.data}}) //异步
		uni.getStorageSync(KEY) //同步

vue , 微信小程序 , uni-app的页面生命周期函数


vue：
	beforeCreate（创建前）
	created（创建后）
	beforeMount(载入前，挂载）
	mounted（载入后）
	beforeUpdate（更新前）
	updated（更新后）
	beforeDestroy（销毁前）
	destroyed（销毁后）
小程序/uni-app： 
	1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
	2. onShow：加载完成后、后台切到前台或重新进入页面时触发
	3. onReady：页面首次渲染完成时触发
	4. onHide：从前台切到后台或进入其他页面触发
	5. onUnload：页面卸载时触发
	6. onPullDownRefresh：监听用户下拉动作
	7. onReachBottom：页面上拉触底事件的处理函数
	8. onShareAppMessage：用户点击右上角转发

vue-router 有哪几种导航守卫?

全局守卫、路由独享守卫、路由组件内的守卫


//路由的钩子函数总结有6个
 
全局的路由钩子函数：beforeEach、afterEach
 
单个的路由钩子函数：beforeEnter
 
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

为什么说vue是一个渐进式的javascript框架，渐进式是什么意思？


vue允许你将一个页面分割成可复用的组件，每个组件都包含属于自己的html、css、js用来渲染网页中相应的地方。
对于vue的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。
vue是响应式的（reactive）这是vue最独特的特性，也就是说当我们的数据变更时，vue会帮你更新所有网页中用到它的地方。

vue的性能优化

路由懒加载、图片懒加载、第三方组件库按需引入、keep-alive缓存页面、使用v-show复用DOM、避免v-if与v-for同时使用

为什么避免v-for和v-if同时使用？

v-for比v-if优先级高，使用的话每次v-for都会v-if判断，影响性能

异步请求适合在哪个生命周期调用？


可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
 
我一般在 created 钩子函数中调用异步请求，能更快获取到服务端数据，减少页面 loading 时间；

过滤器的作用？如何实现一个过滤器？使用场景？

过滤器是用来过滤数据的，在vue中使用filters来过滤数据；使用场景：例如(时间/日期 格式化)

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