今天 14:13 西安电子科技大学 Java 发布于江苏

关注

二面结束，还是做不到吗😭😭

前言：

二面已经结束，虽然还不知道有没有三面，但是清楚的是还需要努力哇

面试题：

很多和项目相关，不太好展开讲，抓几个重点说说。

问：如果你要设计一个登入的功能，说说前后端的逻辑：

答：首先前后端分离，前端需要一个登入的UI组件，还需要在提交前验证一下账号、密码等有没有填好,如(是否为空)，然后向后端发送请求，携带前端输入的信息，接着可以在vite配置代理服务器上解决跨域问题，后端接收请求后，与数据链接验证身份，核对密码等(提了一下，如果是注册就得通过hash加密，不能存储明文)，登入成功就可以在后端生产一个token，这个token可以在返回前端后，储存在localstorage上，这样就可以在一段时间内不需要重复登入等，最后可以做一些响应的报错处理。

useEffect的用途场景

问这个的时候，脑子宕机了，面完才想到可以怎么怎么样，加上react本身基础没打牢。

数据获取

比如，你的个人主页的个性签名，就可以在 useEffect中设置相应的请求，当进入你的个人主页，就会去获取你的个性签名。

import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组表示只在组件挂载时执行一次

  if (!data) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

响应状态或属性变化

import React, { useState, useEffect } from 'react';

function CounterComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅当 count 变化时重新执行

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

清理副作用

当副作用需要清理（如取消订阅或定时器）时，可以在 useEffect 中返回一个清理函数。

import React, { useEffect } from 'react';

function TimerComponent() {
 useEffect(() => {
   const timerId = setInterval(() => {
     console.log('Timer fired');
   }, 1000);

   // 返回一个清理函数，在组件卸载时清除定时器
   return () => clearInterval(timerId);
 }, []); // 空数组表示只在组件挂载和卸载时执行

 return <div>Check the console for timer logs.</div>;
}

讲完面试题，来look一下我这段时间学习的面试题吧！！！

机-会

技术大厂，前端-后端-测试，全国均有机会，感兴趣可以试试。待遇和稳定性都还不错~

面试题总结：

字符串反转！！！

写出来还远远不够，问题是你能写多少种呢？

第一种：

首先判断一下是不是字符串，然后因为js中数组形式才能使用reverse(),那就先用split()进行转化成为数组，最后使用join变回字符串。

split 方法是 JavaScript 中字符串对象的一个非常有用的方法，它允许你根据指定的分隔符将一个字符串分割成一个数组。这个方法在处理和解析字符串数据时非常常见，比如从一段文本中提取特定的部分或者按照某种格式进行数据分割。

function reverseStr(str){
    // 类型
    if(typeof str !== 'string'){
        return;
    }
    // 字符数组
    return str.split('').reverse().join('')
}

第二种

function reverseStr(str){
    let reversed=""
    for(let i=str.length-1;i>=0;i--){
      reversed+=str[i] 
    } 
    return reversed
 }

第三种

从js的api到我们使用了算法的递归来解决问题

function reverseWords(str) {
   if(str===''){
       return ""
   }
   else{   
    return reverseWords(str.substr(1))+str.charAt(0)
   }
}
// 
console.log(reverseWords('hello'))

模拟步骤：

reverseWords("hello")
  -> reverseWords("ello") + "h"
    -> reverseWords("llo") + "e" + "h"
      -> reverseWords("lo") + "l" + "e" + "h"
        -> reverseWords("o") + "l" + "l" + "e" + "h"
          -> reverseWords("") + "o" + "l" + "l" + "e" + "h"
            -> "" + "o" + "l" + "l" + "e" + "h"
              -> "o" + "l" + "l" + "e" + "h"
                -> "ol" + "l" + "e" + "h"
                  -> "oll" + "e" + "h"
                    -> "olle" + "h"
                      -> "olleh"

第四种：

引入了...展开运算符，体现了你对es6新特性的理解，并且使用了reduce高阶函数。

简单介绍ruduce

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 输出: 10

accumulator：这是累计回调的结果。它是上一次调用回调时返回的值，或者是在首次调用时提供的初始值。
currentValue：当前正在处理的数组元素。
最后面的0 为initialValue：作为第一次调用 callback 函数时的第一个参数（即 accumulator）的值。如果没有提供初始值，则将使用数组的第一个元素作为初始值，并从第二个元素开始遍历数组。

解题

function reverseStr(str){
    // return [...str].reverse().join('');
    // reduce es6 api
    return [...str].reduce((reversed,char)=>
    char+reversed,'')
}

扩展运算符 ... ：将字符串转换为字符数组，扩展运算符 ... 将字符串 str 转换为一个字符数组。例如，如果 str 是 "hello"，那么 [...str] 会生成 ['h', 'e', 'l', 'l', 'o']。
reduce 方法：遍历字符数组，并将每个字符依次拼接到累加器的前面，从而实现字符串的反转。
初始值：空字符串 ''，作为累加器的初始值。

字符串截断如何实现当文本溢出后用...表示

我们需要用到四个属性来实现该效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串截断</title>
    <style>
        /* 单行,overflow hidden  */
        .truncate {
            width: 200px; /* 设置容器宽度 */
            white-space: nowrap;/* 空白符 防止文本换行*/
            overflow: hidden; /*隐藏溢出的内容*/
            text-overflow: ellipsis; /*用省略号显示溢出的内容*/
        }
    </style>
</head>
<body>
    <div class="truncate">
        <!-- 原有的文本内容 -->
        这是一个很长的文本事例,他将被截断并用省略号显示
    </div>
</body>
</html>

效果

那么如果面试官又问你，我想要多行文本后再进行截断呢？？

进阶：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  <style>
    .truncate-multiline {
     width:200px;
     display: -webkit-box; /* box 布局模型*/
     /* 浏览器内核 前缀 实验属性 */
     -webkit-line-clamp: 3; /* 限制显示的行数为 3 行 */
     /*  */
    -webkit-box-orient: vertical; /* 设置弹性盒模型的子元素排列方向为垂直 */
    overflow: hidden; /* 超出元素边界的内容隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号显示 */
    }
  </style>
</head>
<body>
    <div class="truncate-multiline">
    这是一个很长的文本事例,他将被截断并用省略号显示这是一个很长的文本事例,他将被截断并用省略号显示这是一个很长的文本事例,他将被截断并用省略号显示这是一个很长的文本事例,他将被截断并用省略号显示这是一个很长的文本事例,他将被截断并用省略号显示
    </div>
</body>

</html>

解析：

width:200px;: 固定宽度为200像素。
display: -webkit-box;: 使用弹性盒子模型布局。
-webkit-line-clamp: 3;: 限制文本块最多显示3行。（这是一个非标准但广泛支持的属性）
-webkit-box-orient: vertical;: 设置子元素排列方向为垂直。
overflow: hidden;: 隐藏超出容器范围的内容。
text-overflow: ellipsis;: 当文本过长被裁剪时，以省略号的形式显示。

效果：

如此一来，怎么问都难不倒我们。

css3的新特性

想必这个大家都很熟悉了，但是我们需要有条理的讲出来，而不是想到一个讲一个。

动画特性

Transition：允许你定义元素属性值从一个状态平滑过渡到另一个状态。简单但非常有效，适用于基本的动画需求。
Animation：通过@keyframes规则定义复杂的动画序列，支持更精细的控制和更复杂的动画效果。

变形属性 `transform`

2D变形：translate(x, y)：移动元素。rotate(deg)：旋转元素。scale(x, y)：缩放元素。
3D变形：支持translate3d(x, y, z)等3D变换，利用GPU加速提升性能。
backface-visibility：特别在3D变换时很有用，决定元素背面是否可见，优化3D翻转效果。

渐变和图标字体库

渐变：线性渐变(linear-gradient)和径向渐变(radial-gradient)，为背景提供丰富的色彩过渡效果。
@font-face：允许网页加载自定义字体，减少对图片图标的依赖，提高页面加载速度。

布局方案

Flexbox（弹性布局） ：强大的单维度布局方式，非常适合响应式设计。
Grid（网格布局） ：二维布局系统，提供了更强大的布局控制能力，尤其是在处理复杂布局时。

自适应设计

Media Queries：根据设备特性（如宽度、高度、分辨率等）应用不同的样式表或样式规则，实现响应式设计。
calc() ：允许你在CSS中进行动态计算，比如混合使用百分比和像素单位来设置尺寸。

其他重要特性

border-radius：圆角边框，让设计更加柔和。
box-shadow 和 text-shadow：分别给元素和文本添加阴影效果，增加视觉深度。
background-size：控制背景图像大小，尤其是cover和contain值，对于响应式设计非常重要。
filter：应用滤镜效果，如模糊、对比度调整等。
rgba：支持透明度的颜色值，增强设计灵活性。

需要注意的点

属性选择器和伪元素选择器：这些选择器可以让你写出更高效、更简洁的CSS代码。例如，:nth-child()选择器可以根据元素在其父元素中的位置来应用样式。
backface-visibility：虽然不常用，但在涉及3D变换时是一个很好的优化点，了解它的使用可以在面试中显示你的深入理解，展示你的肌肉。