来自年轻人们经历题目，大家有更好的回答，可以留言下来，一起学习。
1.promise理解，
- Promise 异步编程的解决方案，可以替换掉传统的回调函数嵌套。
- Promise 构造函数接收一个函数作为参数，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，错误调用reject。
- Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。
- Promise的链式编程可以保证代码的执行顺序，前提是每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
2. 一次请求多个接口， Promise
let p1 =new Promise(function(resolve,reject){
resolve(1);
});
let p2 = new Promise(function(resolve,reject){
resolve(2);
});
let p3 = new Promise(function(resolve,reject){
resolve(3);
});
Promise.all([p1, p2, p3]).then(function (results) {
console.log('success:'+results);
}).catch(function(r){
console.log("error");
console.log(r);
});
3.数组的一些常用方式
循环遍历 一共11种： for in 没有break中断 for in 不适合遍历数组，主要应用为对象 （arry | object | value）
for of 有与for in 一样的简洁语法，没有for in的缺点 for of 可与break，continue，return配合 （arry | object | value）
forEach方法提供一个回调函数，不能使用break语句跳出循环，也不能使用return语句从闭包函数中返回 （arry | object | value）
map可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值 （arry）
filter创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件，所有数据,主要用于筛选数组需要的数据 （arry）
reduce 常用数组值的统计累加 （int）
find (返回第一个符合条件的值) （value）
findIndex (返回第一个符合条件的索引值) （index）
some 如果原数组有一项为真值，那么some方法会返回true，并立即终止循环 （boolean）
every 如果原数组有一项为假值，那么every方法会返回false , 全部只都符合条件才true （boolean）
for
4种对象
Maps ， Objects ， SET , Arry
Set 对象作用 数组去重，并集（值合并，去相同），交集（值相同），差集（没有相同的值）, ( 类型转换 Arry与set )
Set 对象的方法和属性 new Set() 创建新的 Set 对象。 add() 向 Set 添加新元素。 clear() 从 Set 中删除所有元素。 delete() 删除由其值指定的元素。 entries() 返回 Set 对象中值的数组。 has() 如果值存在则返回 true。 forEach() 为每个元素调用回调。 keys() 返回 Set 对象中值的数组。 values() 与 keys() 相同。 size 返回元素计数。
Maps 对象作用 Map 的对象或数组克隆，Map 的对象或数组合并, ( 类型转换 Arry与Maps)
基本的 Map() 方法 Method Description new Map() 创建新的 Map 对象。 set() 为 Map 对象中的键设置值。 get() 获取 Map 对象中键的值。 entries() 返回 Map 对象中键/值对的数组。 keys() 返回 Map 对象中键的数组。 values() 返回 Map 对象中值的数组。 Map() 属性 Property Description size 获取 Map 对象中某键的值。
4.vue2的生命周期
首先 vue2 和 vue3 的生命周期是有区别的：
Vue2 的生命周期主要是：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- Destoryed
而 vue3 在 vue2 的基础上进行了一些改变，主要是针对最后两个生命周期：
beforeDestroy -> beforeUnmount
Destoryed -> Unmounted
5.uniapp的生命周期
1.onLaunch:当uni-app
初始化完成时触发(全局只触发一次)
2.onShow ：当 uni-app 启动，或从后台进入前台显示 //监听用户进入小程序
3.onHide :当 uni-app 从前台进入后台//监听用户离开小程序
4.onError :当 uni-app报错时触发
5.onUniNViewMessage :对nvue页面发送的数据进行监听，可参考 nvue 向 vue 通讯 6.onUnhandledRejection:对未处理的 Promise 拒绝事件监听函数（2.8.1+）
7.onPageNotFound:页面不存在监听函数 8.onThemeChange:监听系统主题变化
6.canvas 和svg
- Canvas主要用于游戏开发、绘制图形、复杂照片的合成，以及对图片进行像素级别的操作，如：取色器、复古照片。
- SVG非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
7.垂直居中有几种方式？
垂直居中有8种方式
- 方法1（常用）：display：flex
- 方法2： table-cell
- 方法3: margin，transform配合
- 方法4: inline-block+vertical-aligin
- 方法5：absolute+负margin
- 方法6 absolute+margin:auto
- 方法7：absolute+transform
- 方法8 强大的grid
8.flex: 2 有用过吗？多列布局怎么实现？
.container {
display: flex;
flex-direction: column; /* 设置主轴为垂直方向 */
flex-wrap: wrap; /* 允许子元素在容器中多列显示 */
column-gap: 20px; /* 列与列之间的间隔 */
column-width: 150px; /* 每列的理想宽度 */
}
.item {
/* 子元素可以设置自己的样式，如边框、背景等 */
margin: 5px; /* 子元素的外边距 */
/* 子元素的宽度将自动调整以适应列宽 */
}
9.怎么判断对象为空？
- 方法一：将对象转换成字符串，再判断是否等于"{}"
- 方法二：for in 循环
- 方法三：Object.keys()方法，返回对象的属性名组成的一个数组，若长度为0，则返回空对象(ES6写法)
- 方法四：Object.getOwnPropertyNames()方法获取对象的属性名，存到数组中，如果长度为0，则为空对象
- 方法五：jQuery中的isEmptyObject()方法，其原理是利用for in方式来判断
10.寻找字符串中出现最多的字符怎么实现？
split分割成数组，sort(对数组进行排序，当两个相同为true 累计
11.知不知道最新的 url 参数获取的 API？
function getQueryParam(url, param) {
// 创建一个新的URL对象
const urlObj = new URL(url);
// 使用searchParams获取查询参数
const searchParams = new URLSearchParams(urlObj.search);
// 获取指定的查询参数值
return searchParams.get(param);
}
12.实现深拷贝
- 浅拷贝：新旧对象还是共享同一块内存，实现 Object.assign ；for in方法；（通过拷贝副本改变数组元素的值，我们会发现原数组的元素也发生了改变）
- 深拷贝：新对象跟原对象不共享内存，实现 采用递归去拷贝所有层级属性；通过JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成一个全的新的对象；函数库lodash，也有提供_.cloneDeep用来做深拷贝
13.实现 Promise
class SimplePromise {
constructor(executor) {
this.status = 'pending'; // Promise状态
this.value = undefined; // 保存状态为resolved时的值
this.onResolvedCallbacks = []; // 保存then方法注册的回调
const resolve = (value) => {
if (this.status === 'pending') {
this.status = 'resolved';
this.value = value;
this.onResolvedCallbacks.forEach((callback) => callback(this.value));
}
};
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'rejected';
// 这里可以处理拒绝的情况，但是简化版就不写了
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
then(onFulfilled) {
if (this.status === 'resolved') {
onFulfilled(this.value);
}
// 这里简化了，实际应该将回调函数推入队列，在状态变为resolved时执行
}
}
// 使用示例
const promise = new SimplePromise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve('异步操作完成');
}, 1000);
});
promise.then((value) => {
console.log(value); // 输出: 异步操作完成
});
14.新版本发布后，怎么用技术手段通知用户刷新页面？
- 前端方式。在每次发布前端时，使用webpack构建命令生成一个json文件，其中包含一个随机生成的字符串（如时间戳）。在项目中，通过定时任务或在切换页面路由时，请求这个json文件。然后，将本地保存的上一次生成的字符串与json文件中的字符串进行比较。如果两个字符串不同，说明前端代码重新部署，需要提醒用户更新或进行强制刷新。
- 后端方式。在每个请求的header中加入发版版本号，并与客户端保留的上一次版本号进行比较。如果发现版本号不同，则强制刷新页面，并在刷新后保存当前版本号。也可以单独写一个返回版本号的接口来实现这一功能。
15.性能优化数据怎么上报、分析？
- Vue捕获异常：使用Vue.config.errorHandler这样的Vue全局配置，可以在Vue指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和Vue 实例。
- 性能监控：最常见的性能监控需求则是需要我们统计用户从开始请求页面到所有DOM元素渲染完成的时间，也就是俗称的首屏加载时间，DOM提供了这一接口，监听document的DOMContentLoaded事件与window的load事件可统计页面首屏加载时间即所有DOM渲染时间。我们想统计文档的网络加载耗时、解析DOM的耗时与渲染DOM的耗时，就不太好办到了，所幸的是浏览器提供了window.performance接口，具体可见MDN文档
16.Vue 组件通信方式有哪些，各有什么特点？
vue中8种常规的通信方案
- 通过 props 传递
- 通过 $emit 触发自定义事件
- 使用 ref
- EventBus
- parent或root
- attrs 与 listeners
- Provide 与 Inject
- Vuex
17.Vue 项目怎么提高项目性能？举一些例子
- v-if和v-show的使用场景，不需要频繁切换条件v-if，频繁切换条件使用v-show
- computed和watch的使用场景，computed用于数值计算，他有缓存特性，避免每次获取值的时候都重新计算，需要在数据变化时执行异步或开销较大的操作时，应该是用watch
- v-for循环遍历必须为item添加key，key不建议设置为索引，且避免在同一个元素中同时使用v-if
- 图片资源懒加载：使用vue-lazyload插件
- 路由懒加载：const comp = () => import('./Comp.vue')
- keep-alive的使用利用keep-alive将不活动的组件缓存起来
18.element ui table 吸顶怎么做，滚动怎么处理等
使用position: sticky;
19.vue 数据更新了，界面没有刷新问题
vue2 object.definePrototype 不支持修改数组，触发set ，可以用this.$set, vue3 解决了这个问题。
20.防抖和节流都是为了阻止操作高频触发，从而浪费性能。
防抖：当触发一个事件不会立即执行，会等待 n 秒后再执行该事件，如果在等待 n 秒期间你再次出发，则会重新计时，也就是说防抖不管你触发多少次这个事件，永远只有一次在执行，并且执行的是最后一次 节流：在触发任务的第一时间执行任务，并且设定定时器，如果在该定时器还未结束的时候还有触发任务的，也不执行，实现节流的核心是时间间隔，在设定的时间间隔内如果还有同样的任务进来，则不执行。
