字符串截断

--- theme: smartblue --- ## 前言：二面已经结束，虽然还不知道有没有三面，但是清楚的是还需要努力哇 ## 面试题：很多和项目相关，不太好展开讲，抓几个重点说说。 ### **问：** 如果你要设计一个登入的功能，说说前后端的逻辑： **答：** 首先前后端分离，前端需要一个登入的UI组件，还需要在提交前验证一下账号、密码等有没有填好,如(是否为空)，然后向后端发送请求，携带前端输入的信息，接着可以在vite配置代理服务器上解决跨域问题，后端接收请求后，与数据链接验证身份，核对密码等(提了一下，如果是注册就得通过hash加密，不能存储明文)，登入成功就可以在后端生产一个token，这个token可以在返回前端后，储存在localstorage上，这样就可以在一段时间内不需要重复登入等，最后可以做一些响应的报错处理。 ### useEffect的用途场景问这个的时候，脑子宕机了，面完才想到可以怎么怎么样，加上react本身基础没打牢。 * 数据获取比如，你的个人主页的个性签名，就可以在 useEffect中设置相应的请求，当进入你的个人主页，就会去获取你的个性签名。 ```js 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

; return

{JSON.stringify(data)}

; } ``` * 响应状态或属性变化 ```js import React, { useState, useEffect } from 'react'; function CounterComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅当 count 变化时重新执行 return (

You clicked {count} times

); } ``` * 清理副作用当副作用需要清理（如取消订阅或定时器）时，可以在 `useEffect` 中返回一个清理函数。 ```js import React, { useEffect } from 'react'; function TimerComponent() { useEffect(() => { const timerId = setInterval(() => { console.log('Timer fired'); }, 1000); // 返回一个清理函数，在组件卸载时清除定时器 return () => clearInterval(timerId); }, []); // 空数组表示只在组件挂载和卸载时执行 return

Check the console for timer logs.

; } ``` 讲完面试题，来look一下我这段时间学习的面试题吧！！！ ## 面试题总结： ### 字符串反转！！！写出来还远远不够，问题是你能写多少种呢？ #### 第一种：首先判断一下是不是字符串，然后因为js中数组形式才能使用reverse(),那就先用split()进行转化成为数组，最后使用join变回字符串。 * `split` 方法是 JavaScript 中字符串对象的一个非常有用的方法，它允许你根据指定的分隔符将一个字符串分割成一个数组。这个方法在处理和解析字符串数据时非常常见，比如从一段文本中提取特定的部分或者按照某种格式进行数据分割。 ```js function reverseStr(str){ // 类型 if(typeof str !== 'string'){ return; } // 字符数组 return str.split('').reverse().join('') } ``` #### 第二种 ```js function reverseStr(str){ let reversed="" for(let i=str.length-1;i>=0;i--){ reversed+=str[i] } return reversed } ``` #### 第三种从js的api到我们使用了算法的递归来解决问题 ```js function reverseWords(str) { if(str===''){ return "" } else{ return reverseWords(str.substr(1))+str.charAt(0) } } // console.log(reverseWords('hello')) ``` **模拟步骤：** ```js 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** ```js const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0); console.log(sum); // 输出: 10 ``` 1. **accumulator**：这是累计回调的结果。它是上一次调用回调时返回的值，或者是在首次调用时提供的初始值。 2. **currentValue**：当前正在处理的数组元素。 3. 最后面的0 为**initialValue**：作为第一次调用 `callback` 函数时的第一个参数（即 `accumulator`）的值。如果没有提供初始值，则将使用数组的第一个元素作为初始值，并从第二个元素开始遍历数组。 **解题** ```js 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` 方法**：遍历字符数组，并将每个字符依次拼接到累加器的前面，从而实现字符串的反转。 * **初始值**：空字符串 `''`，作为累加器的初始值。 ### 字符串截断如何实现当文本溢出后用...表示我们需要用到四个属性来实现该效果 ```html 字符串截断

这是一个很长的文本事例,他将被截断并用省略号显示

``` **效果** ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f613c3d25aaa40128a4993b4d1dd8042~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgRGFudGE=:q75.awebp?rk3s=f64ab15b&x-expires=1773151871&x-signature=UTol5FZPBGExIeyNihHqbj3k0Xc%3D) 那么如果面试官又问你，我想要多行文本后再进行截断呢？？ **进阶：** ```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变换时是一个很好的优化点，了解它的使用可以在面试中显示你的深入理解，展示你的肌肉。 ## End 生命没有终止，学习就不能停下，一起加油吧！