板凳社区社招一面

原创已于 2025-07-27 19:47:54 修改 · 621 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-07-25 00:37:25 首次发布

面试题专栏收录该内容

10 篇文章

订阅专栏

1.js数组去重有哪些方法？

使用Set对象：通过将数组转换为Set对象，Set对象只会保存唯一值，然后再将Set对象转换回数组。例如：
```
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4]
```

使用filter + indexOf：遍历数组，利用filter方法筛选出不重复的元素。例如：

const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = arr.filter((value, index, arr) => {
  return arr.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4]

使用reduce +includes方法：遍历数组，将不重复的元素存入一个新数组。例如：

const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = arr.reduce((result, currentValue) => {
  if (!result.includes(currentValue)) {
    result.push(currentValue);
  }
  return result;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4]

使用indexOf方法：遍历数组，利用indexOf方法判断元素是否已存在于新数组中，不存在则添加到新数组中。例如：

const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4]

5.对象数组去重(根据字段)

const deduped = Array.from(new Map(arr.map(item =>[item.id,item])).values()

2.在数组在指定位置插入

改变原数组:push、pop、shift、unshift、sort、splice、reverse
不改变原属组:concat、join、map、forEach、filter、slice

slice和splice的区别?
- slice切片的意思，根据传入的起始和终止下标，获取该范围数组，
- splice可根据传入参数个数不同实现删除、插入操作，直接操作原数组。第1个参数为起始下标，第2个为删除个数，第3个为要增加的数据。

const arr=[1，2，4，5];
arr.splice(2，0，3);//在索引2插入3
console.log(arr);//输出[1，2，3，4，5]

3.深度拷贝

深拷贝与浅拷贝的区别？

拷贝的层级不同，深拷贝是指每一层数据的改动都不会影响原对象和新对象，浅拷贝只有第一层的属性变动不互相影响，深层的数据变动还会互相影响。
实现拷贝的方法有哪些？

浅拷贝：数组可以用拓展运算符[…arr]，或者slice().浅拷贝对象可以用Object.assign({},obj)

深拷贝：JSON.parse(JSON.stringify(obj))，或封装递归方法，或使用第三方库的方法，比如 JQuery的$.extend({},obj)，或者lodash 的cloneDeep

//封装递归方法
function deepclone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    const result = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
        if (object.hasown(obj, key)) {
            result[key] = deepclone(obj[key]);

        }
    }
    return result;
}

JSON.parse(JSON.stringify(obj))处理的缺点？
- 如果对象中有属性是function或者undefined，处理后会被过滤掉；
- 如果属性值是对象，且由构造函数生成的实例对象，会丢弃对象的constructor；

4.websocket断开后怎么重连

4.1.场景背景

在实际项目中，WebSocket 连接可能由于网络波动、服务器重启或浏览器进入休眠等原因而断开。为了提升系统稳定性与用户体验，需要实现断线自动重连机制。

4.2.自动重连的核心逻辑

1.在onclose或onerror事件中监听连接断开
2.启动重连计时器，尝试重新创建连接;
3.设置最大重试次数或指数退避策略;
4.添加重连节流机制，避免死循环高频重连;
5.支持连接成功后清除重连逻辑;
6.防止多次重复连接(加锁)

5.大文件上传到服务器

5.1.一、大文件上传常见实现方式
大文件上传的挑战在于文件体积大、上传时间长，易中断或失败。常见上传方案包括:
5.1.1.1.普通表单上传(不推荐)

适用于小文件或不要求进度控制的简单场景。大文件上传容易失败，用户无感知。

5.1.2.2.分片上传(Chunk Upload)

将大文件分割成多个小块(chunk)，逐个上传，最后由后端合并。流程如下:
前端读取文件，按固定大小切片;
每个切片生成唯一标识(如使用文件 hash+索引);
并发或顺序上传每个切片;
上传完成后，向后端发起“合并请求”
后端合并切片文件为完整文件;

优点:支持大文件、断点续传、失败重传、上传进度控制。

5.2.二、断点续传(Resume Upload)

断点续传是分片上传的延伸，用于网络中断后从中断位置继续上传，避免重新上传整个文件实现方式:

1.文件分片时为每个切片生成唯一标识:
2.上传前向服务器请求已有切片列表(如通过 MD5 或文件名);
3.跳过已上传部分，仅上传缺失切片;
4.上传完成后仍由服务器合并切片
关键点:
前端记录文件唯一标识(通常为 hash 或文件名+大小)
后端持久化已上传切片索引(如存在数据库、Redis 或文件系统中)

5.3.三、秒传(Instant Upload)

秒传是指用户上传的文件，如果服务器已存在该文件，则无需真正上传，直接返回上传成功。实现方式:
1.前端先计算文件哈希(如 MD5或 SHA-256);
2.上传前调用“秒传校验接口"
3.后端判断该哈希是否已存在(如通过数据库);
4.如果存在，直接返回成功;
5.否则走正常上传流程;
优点:节省带宽、加快体验，适合重复性较高的用户行为(如多人上传同一视频、文档等)

5.4.四、前端实现核心点

1.使用 File.slice()实现分片读取;
2.可选用 SparkMD5 等库计算文件 hash;
3.利用 Promise.all 实现分片并发上传:
4.上传状态持久化(IndexedDB/localStorage)用于断点续传;
5.添加上传进度条(通过 XMLHttpRequest 或，axios的onUploadProgress)

5.5.五、后端实现建议

每个切片存储路径:/upload/tmp/{fileHash}/{chunkIndex}
合并接口根据 fileHash 合并切片
秒传校验接目查询数据库中是否已存在文件 hash·切片上传接口建议支持重复上传去重与幕等控制

6.RBAC权限是什么？你怎么去做的？

RBAC 是:用户-角色-权限的一种配置方案。
为每个用户都指定角色，不同的角色可以拥有不同的权限。根据权限来查看不同的页面或者按钮。
首先是页面权限配置，这个实现主要依赖动态路由表实现的。然后是按钮权限。按钮权限会比页面权限更加简单一些。我这里是通过自定义指令来进行实现的。在需要权限的标签上，通过指令传递权限的key。然后自定义指令中，根据技钮权限数据进行匹配。不匹配就不渲染(parent.removeChild(domElement))这块 DOM 就可以了。
权限这里主要还是配置问题会比较复杂。功能实现结合动态路由表和自定义指令就可以实现。

7.国际化怎么做阿拉伯语，从右往左怎么实现？

7.1.一、阿拉伯语国际化的核心需求
阿拉伯语是一种从右到左书写的语言，其国际化不仅涉及文案翻译，还必须适配**界面布局从右到左(RTL)**的展示方式。
7.2.二、国际化文案支持(语言翻译)
阿拉伯语的文案支持和基他语言国际化流程一致:
1.使用 vue-i18nreact-i18next 或其他i18n工具:
2.编写对应的语言包:
7.3.三、实现 RTL(Right-To-Left)布局的关键技术
7.3.1.方法-:使用 dir=“rt1”
在根元素设置 RTL:

<html dir="rtl" lang="ar">

或动态控制:

document.documentElement.setAttribute('dir','rtl');

此方式将影响所有继承CSS的元素行为，例如text-align、floatflex 方向等。
7.3.2.方法二:CSS 级控制(更灵活)
1.使用 :dir(rtl)选择器:

:dir(rtl).input {
text-align:right;
}

2.动态添加 class 控制方向:

document.body.classList.add('rtl');// 切换时设置

 body.rtl {
 direction:rtl;
 }

3.使用 CSS Logical 属性(推荐)
避免硬编码 left/right使用逻辑属性:

margin-inline-start:12px;/*替代 margin-left */
padding-inline-end:8px;/*替代 padding-right*/
text-align: start;/*自动适配左/右对齐 */

7.3.3.方法三:U1框架内置 RTL 支持
·Element Plus、Ant Design Vue、Bootstrap 等框架都支持 RTL 模式配置方式通常如下:

app.use(ElementPlus,{locale:arLang,direction:'rtl'});

·Ant Design(React)中通过ConfigProvider 设置:

<ConfigProvider direction="rtl">...</ConfigProvider>