前端 2024-07-20 面试题记录_2024前端面试题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52056196/article/details/140578397

1、写出检测131到138开头的11位的手机号码的对应正则

/^(13[1-8])\d{9}$/

^ 表示字符串的开始。
(13[1-8]) 是一个捕获组，用于匹配以13开头，后面跟着1到8中任意一个数字的字符串。[1-8] 表示匹配1到8之间的任意一个数字。
\d{9} 表示匹配任意9个数字（\d 表示匹配一个数字，{9} 表示恰好9次）。
$ 表示字符串的结束。

使用示例

function isValidPhoneNumber(phoneNumber) {  
  const regex = /^(13[1-8])\d{9}$/;  
  return regex.test(phoneNumber);  
}  
  
console.log(isValidPhoneNumber("13112345678")); // true  
console.log(isValidPhoneNumber("13912345678")); // false  
console.log(isValidPhoneNumber("131")); // false

2、rpx、rem、%、vh 单位分别表示什么

1. rpx（Responsive Pixel）

定义：rpx是一种CSS尺寸单位，用于在小程序中表示屏幕上的长度距离。它的全称为“响应式像素”，因为它具有自适应的特性。
特性：在不同的设备上，rpx会根据屏幕宽度自动缩放，以保证在不同大小的设备上展示相同的效果。这一特性使得rpx在小程序开发中特别有用，因为它可以帮助开发者创建出在不同设备上都能良好显示的界面。
来源：此信息来源于百度知道等权威网站。

2. rem（Root EM）

定义：rem是一种CSS单位，用于定义相对于根元素（即html元素）的字体大小的长度。与em单位类似，但rem是相对于根元素（html）的字体大小，而不是父元素的字体大小。
特性：使用rem可以使得在整个页面中统一地调整字体大小，而不需要对每个元素分别设置。此外，通过修改根元素的字体大小，可以很方便地实现整个页面字体大小的动态调整。
注意：虽然题目中提到了rem，但需要注意的是，rem并不是直接用来描述辐射强度的单位（尽管有一个类似的术语“雷姆”用于此目的，但两者在上下文和领域上是完全不同的）。

3. %（Percent）

定义：%是百分号，它代表的含义是把某个整体平均分为100份，其中一部分占有的份数。在数学、统计、财务等领域中广泛使用。
特性：%用于表示比例或百分比，常用于表示部分与整体的关系。在CSS中，%也可以用作长度单位，表示相对于父元素尺寸的比例。
示例：在CSS中，如果设置一个元素的宽度为50%，那么它的宽度将是其父元素宽度的一半。

4. vh（Viewport Height）

定义：vh是CSS中的一个相对长度单位，表示相对视口高度（Viewport Height）。具体来说，1vh等于视口高度的1%。
特性：vh单位使得开发者可以根据视口（即浏览器窗口的可视部分）的高度来定义元素的尺寸，这对于创建响应式布局特别有用。与px等绝对单位相比，vh单位可以确保元素的大小随着视口大小的变化而变化。

3、flex: 0 1 25%; 分别表示什么（*）

在CSS中，flex是一个简写属性，用于设置flex项目的flex-grow、flex-shrink和flex-basis的简写形式。当你写flex: 0 1 25%;时，你实际上是在分别设置这三个属性：

flex-grow: 0;
- flex-grow属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。在这个例子中，即使容器中有额外的空间可用，该项目也不会增长来填充这些空间。
flex-shrink: 1;
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。这里的1意味着该项目将等比例缩小以适应容器空间，如果容器空间不足以容纳所有项目时。
flex-basis: 25%;
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以设为跟width或height属性一样的值（如px、em等），也可以设为百分比。在这个例子中，25%意味着在分配多余空间之前，项目将尝试占据其父容器主轴上可用空间的25%。注意，如果容器的主轴是水平的（即flex-direction为row），那么这将影响项目的宽度；如果主轴是垂直的（即flex-direction为column），那么这将影响项目的高度。

综上所述，flex: 0 1 25%;的意义是：这个项目不会放大来占据额外的空间（flex-grow: 0），但如果需要的话，它会缩小以适应容器（flex-shrink: 1），并且在分配多余空间之前，它尝试占据其父容器主轴上可用空间的25%（flex-basis: 25%）。这样的设置允许flex项目在容器大小变化时保持一定的灵活性和响应性。

4、Vuex中的五个关键属性是什么

State：
- 功能：用于存储应用的状态，即Vuex中的数据源。它是一个单一的状态树，每个Vuex应用只能有一个State。
- 特点：State中可以包含多种数据，如用户信息、权限验证等共享数据，这些数据需要在多个组件间共享和使用。
- 访问方式：在Vue组件中，可以通过this.$store.state.propertyName的方式访问State中的数据，实现数据的全局共享。
Getters：
- 功能：用于从Store中的State中派生出一些状态，例如对State的过滤、计算等。可以认为是State的计算属性，具有缓存功能，且只有当它的依赖值发生了改变才会被重新计算。
- 特点：Getters类似于Vue组件中的计算属性，它可以对State进行复杂的逻辑处理，生成新的数据供组件使用。
- 访问方式：在组件中可以通过this.$store.getters.getterName访问Getters中的数据。
Mutations：
- 功能：更改Vuex的Store中的状态的唯一方法是提交Mutation。它是同步的，即每次调用都会立即更新状态。
- 特点：每一个Mutation都有一个字符串类型的事件类型和一个回调函数，用于执行实际的状态更改。Mutation必须是同步的，以确保状态变更的追踪和预测性。
- 使用方式：在组件中通过this.$store.commit('mutationName', payload)调用Mutations来变更State。
Actions：
- 功能：用于处理异步操作，如Ajax请求。它可以包含任何异步操作，并且可以通过提交Mutation来间接变更状态。
- 特点：Actions类似于Mutations，但主要用于处理异步操作，不会直接修改状态。Actions通过this.$store.dispatch('actionName', payload)在组件中被调用，由于支持异步操作，Actions不会阻塞视图的更新，提高了用户体验。
Modules：
- 功能：当应用变得非常复杂时，可以使用模块化的方式将Store分割为模块(module)。每个模块拥有自己的State、Mutations、Actions和Getters。
- 特点：模块化有助于大型应用的状态管理更加清晰和易于维护。通过设定namespaced为true，模块内部的所有Actions、Mutations和Getters都会自动根据模块注册的路径调整命名，避免了命名冲突的问题。

5、vue-router中的两种路由模式分别是什么

Vue-router中的两种主要路由模式分别是hash模式和history模式。这两种模式在单页应用（SPA）中用于实现前端路由，即在不重新加载页面的情况下改变URL并更新页面内容。

1. Hash模式

原理：Hash模式使用URL的hash值（即URL中#号及其后面的部分）来作为路由地址。hash值的变化不会引起页面的重新加载，而只是触发hashchange事件，Vue-router根据这个事件来更新页面内容。hash值虽然出现在URL中，但不会被包含在HTTP请求中发送到服务器，因此对后端没有影响。
优点：
- 支持所有浏览器，包括不支持HTML5 History API的旧浏览器。
- 后端无需进行任何配置，因为hash值不会被发送到服务器。
缺点：
- URL中带有#号，可能不够美观。

2. History模式

原理：History模式利用了HTML5 History API（主要是pushState和replaceState方法）来实现URL的跳转而不重新加载页面。通过这两个方法，可以在不刷新页面的情况下，操作浏览器的历史记录，实现URL的更改。但是，由于URL的更改是真实的，所以用户直接刷新页面时，如果服务器没有对应的路由处理，就会返回404错误。因此，在使用History模式时，需要服务器端进行配置，以便在用户直接访问某个路由时，能够返回正确的页面（通常是应用的首页，然后由前端路由接管）。
优点：
- URL看起来更加美观，没有#号。
- 提高了用户体验，因为URL的变化更加符合用户的预期。
缺点：
- 需要服务器端的支持，以便在用户直接访问某个路由时返回正确的页面。
- 如果服务器配置不当，用户直接刷新页面时可能会遇到404错误。

6、uniapp中使用什么监听页面滚动

1. 使用页面生命周期函数 `onPageScroll`

onPageScroll 是uniapp页面生命周期函数之一，用于监听页面滚动事件。当页面滚动时，该函数会被触发，并可以接收到一个事件对象，该对象包含了滚动的相关信息，如滚动距离等。

export default {  
  onPageScroll(e) {  
    // e.scrollTop 表示当前页面滚动的距离  
    console.log('页面滚动距离:', e.scrollTop);  
    // 在这里可以编写与滚动相关的逻辑  
  }  
}

2. 使用组件的 `@scroll` 事件监听

如果你的页面中包含有滚动的组件（如scroll-view），你可以在该组件上使用@scroll属性来监听滚动事件。当组件滚动时，会触发@scroll事件，并可以接收到一个事件对象，该对象同样包含了滚动的相关信息。

<template>  
  <scroll-view scroll-y class="page" @scroll="onScroll">  
    <!-- 页面内容 -->  
  </scroll-view>  
</template>  
  
<script>  
export default {  
  methods: {  
    onScroll(e) {  
      // e.detail.scrollTop 表示当前滚动距离  
      console.log('页面滚动距离:', e.detail.scrollTop);  
      // 在这里编写与滚动相关的逻辑  
    }  
  }  
}  
</script>

7、以下代码如何实现 .red 为正方形，使用纯css实现

<html>
<body>
    <div class='container'>
        <div class="red" style="background:red;"></div>
    </div>

    <script>
        let div = document.querySelector(".container")
        const randomWidth = Math.floor(Math.random() * 201) + 100
        div.style.width = randomWidth + "px"        

    </script>
</body>



</html>

答：(1) 设置.red元素的padding-top: 100%；即可实现。因为子元素的padding的高度百分比是相对于其绝对父元素的宽度来设置的。(2)或者可以设置 width:100%; aspect-ratio:1; 实现，aspect-ratio设置的是元素的宽高比的比例。

8、js逻辑算法题，如果意见商品的价格是9元，购买一件商品可以获得一个兑换券，三个兑换券能兑换一个商品，实现一个函数，输入商品件数，返回购买商品需要的最小总价格，以及剩余的兑换券，例如，输入30，返回{最小购买总价格：189元，剩余兑换券3张}

function calculateMinCost(items) {  
    let totalCost = 0;  
    let coupons = 0;  
      
    // 首先计算可以完整兑换的商品组数，每组3件，实际支付2件  
    let fullGroups = Math.floor(items / 3);  
    totalCost += fullGroups * 2 * 9; // 每组支付两件商品的价格  
    coupons += fullGroups * 3; // 每组获得3个兑换券  
      
    // 计算剩余未兑换的商品数量  
    let remainingItems = items % 3;  
    if (remainingItems > 0) {  
        totalCost += remainingItems * 9; // 支付剩余商品的价格  
        coupons += remainingItems; // 剩余商品也获得相应数量的兑换券  
    }  
      
    // 检查是否可以通过剩余的兑换券兑换更多商品  
    while (coupons >= 3) {  
        totalCost -= 9; // 兑换一件商品，减少相应价格  
        coupons -= 3; // 消耗3个兑换券  
    }  
      
    return {  
        最小购买总价格: totalCost.toFixed(2) + '元',  
        剩余兑换券: coupons  
    };  
}  
  
// 测试  
console.log(calculateMinCost(30));

9、Promise的出现解决了什么问题

在JavaScript中，Promise的出现主要解决了异步编程中的几个关键问题：

回调地狱（Callback Hell）：在Promise之前，JavaScript中的异步操作主要通过回调函数来实现。当这些异步操作需要串行执行，并且每个操作的完成都依赖于前一个操作的结果时，代码会迅速变得难以阅读和维护，形成所谓的“回调地狱”。Promise通过提供一个更清晰的链式调用方式，使得异步代码更加易于理解和维护。
错误处理：在回调函数中，错误处理通常需要在每个回调函数中单独处理，这增加了代码的重复性和复杂性。Promise提供了统一的错误处理机制，通过.catch()方法可以在Promise链的任何位置捕获错误，使得错误处理更加集中和方便。
状态管理：Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。这种明确的状态管理使得开发者可以更容易地追踪异步操作的状态，以及在不同状态下执行相应的操作。
组合能力：Promise提供了.all()、.race()等静态方法，允许将多个Promise组合成一个新的Promise，这大大增强了异步操作的组合能力。例如，.all()可以等待一组Promise全部完成后再执行后续操作，而.race()则只等待第一个完成的Promise。
代码可读性：Promise通过链式调用和清晰的API设计，使得异步代码在逻辑上更加接近同步代码，从而提高了代码的可读性和可维护性。