一、Ajax Fetch Axios的区别？
三者都用于网络请求，但是不同维度
Ajax是一种技术统称；
Fetch，一个原生API；
axios，第三方库，调用API实现；
(一) lib库和API的区别
lib可以通过调用API实现，lib可以有很多个。
(二) 用xmlhttprequest实现ajax
javascript
const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; // 引入模块
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Response:', xhr.responseText);
} else {
console.error('Error:', xhr.status, xhr.statusText);
}
}
}
xhr.send(null);
}
// 使用示例
ajax('https://jsonplaceholder.typicode.com/todos/1', (err, response) => {
if (err) {
console.error(err);
} else {
console.log('Response:', response);
}
});二、防抖和节流
两者有什么区别？
- 节流：限制执行频率，有节奏的执行；
- 防抖：限制执行次数，多次密集的触发只执行一次；
- 节流关注过程，防抖关注结果；
在实际使用中可以使用lodash库
分别用于什么场景？
- 搜索框，输入停止后进行搜索
防抖函数
scss
// 防抖函数
// 用于限制函数的执行频率，常用于输入框的输入事件处理等场景
function debounce(fn,delay=200){
let timer=0;
return function(...args){
if(timer) clearTimeout(timer);
timer=setTimeout(()=>{
fn.apply(this,args);
timer=0;
},delay)
}
}节流函数
ini
//节流函数
// 用于限制函数在一定时间内只能执行一次，常用于滚动事件处理等场景
function throttle(func, delay=100) {
let isThrottled = false; // 标记是否处于节流状态
return function(...args) {
if (!isThrottled) {
func.apply(this, args);
isThrottled = true;
setTimeout(() => {
isThrottled = false;
}, delay);
}
};
}三、px % em rem vw/vh的区别
- px基本单位，是绝对单位；
- %是相对父元素的单位；
- em相对于当前元素的大小；
- rem手机端响应式的匹配
- vw屏幕宽度的1%，vh屏幕高度的1%，vmin是宽度和高度的最小值，vmax是宽度和高度的最大值
四、箭头函数的缺点，什么时候不能用箭头函数？
- 没有
arguments对象，可以使用剩余参数...args - 没有自己的this，不能修改this
- 不能使用构造函数（new调用）
javascript
function*gen() { yield1; } // ✅
constgenArrow=*() => {}; // ❌ 语法错误
const person = {};
new person(); // ❌ 语法错误- 在对象方法获取不到对象中的值
javascript
const obj = {
value: 10,
getValue() { console.log(this.value); } // ✅
};- 无法用于 动态 this 绑定Dom的场景
(一) 什么时候不能使用箭头函数？
- 构造函数（
new****调用） - 需要 ****
this****动态绑定的 DOM 事件 - 需要使用 ****
arguments****的旧代码 - Generator 函数
- 对象方法需要访问自身
this
五、请描述TCP三次握手和四次挥手
为什么有三次握手和四次挥手？
握手是连接，挥手是告别
一个比喻：
握手 👋：打电话时确认对方能听清（"喂，听得到吗？""听得到，你呢？""我也行！"）。
挥手 👋：挂电话前的礼貌告别（"我要挂了""好的，稍等我也说完""我也挂了""拜拜"）。
网络连接是TCP协议，可靠传输（不丢包、不重复、不乱序）
六、for...in和for...of的区别
for...in用于可枚举数据，如对象、数组、字符串for...of用于可迭代数据，如数组、字符串、Map、Set- 遍历对象：for...in可以，for...of不可以；
- 遍历Map Set：for...of可以，for...in不可以；
- 遍历genertor：for...of可以，for...in不可以；
七、for await...of
可以遍历多个异步
例子：
javascript
function createPromise(val) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(val);
}, 1000);
});
}
(async function () {
const p1 = createPromise(100);
const p2 = createPromise(200);
const p3 = createPromise(300);
// 使用 Promise.all
const results = await Promise.all([p1, p2, p3]);
console.log(results); // 输出: [100, 200, 300]
// 使用 for-await-of 循环
const list = [p1, p2, p3];
for await (let res of list) {
console.log(res);
}
})();八、Vue组件的通信方式,你能说几种？
- 父子组件 →
props/emit/v-model - 跨级组件 →
provide/inject - 通用数据流 → Pinia（Vuex 替代品）
- 临时通信 →
eventBus（小型项目）
九、leecode刷题
最长回文子串
题目：给你一个字符串 s，找到 s 中最长的 回文 子串。
ini
/*
* @lc app=leetcode.cn id=5 lang=javascript
*
* [5] 最长回文子串
*/
// @lc code=start
/**
* @param {string} s
* @return {string}
*/
var longestPalindrome = function (s) {
if (s.length < 2) {
return s; // 如果字符串长度小于2，直接返回
}
let start = 0; // 回文子串的起始索引
let maxLength = 1; // 最大回文子串的长度
// 定义一个辅助函数，用于扩展回文
const expand = (left, right) => {
while (left >= 0 && right < s.length && s[left] === s[right]) {
left--; // 向左扩展
right++; // 向右扩展
}
return right - left - 1; // 返回回文长度
};
// 遍历每一个字符，包含奇数和偶数长度的回文
for (let i = 0; i < s.length; i++) {
// 奇数长度回文
let len1 = expand(i, i);
// 偶数长度回文
let len2 = expand(i, i + 1);
// 取最大长度
let len = Math.max(len1, len2);
// 如果找到更长的回文子串，更新起始索引和最大长度
if (len > maxLength) {
maxLength = len; // 更新最大长度
start = i - Math.floor((len - 1) / 2); // 更新起始索引
}
}
return s.substring(start, start + maxLength); // 返回最长回文子串
};