前端面试题3

最新推荐文章于 2026-06-19 11:36:35 发布

原创最新推荐文章于 2026-06-19 11:36:35 发布 · 955 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

1 两个数组判断最多的重复数据

var itemA = [1, 2, 3, 3]
var itemB = [3, 3, 2]
var crossArr = []; //放重复的元素
var countArr = []; //重复元素重复的次数
 
itemA.forEach((e) => {
    if (itemB.includes(e)) { //b数组和a重复的
        !crossArr.includes(e) && crossArr.push(e); //重复的不放进crossArr
    }   
})
 
function count(item, total = 0, index = 0, arr = itemA.concat(itemB)) { //合并a、b数组
    if (arr.indexOf(item, index) >= 0) {
        total++;
        index = arr.indexOf(item, index) + 1;
        return count(item, total, index)
    }
    return total;
}
 
countArr = crossArr.map(e => {
    return count(e)
})
var maxCount = Math.max(...countArr);
var maxCountIndex = countArr.indexOf(maxCount)
var maxValue = crossArr[maxCountIndex]
 
console.log(`${maxValue}重复最多次,共${maxCount}次`)

2 数组排序

let arr=[1,3,6,5,2,4];
arr.sort();  // [1, 2, 3, 4, 5, 6]
arr.reverse();  // [6, 5, 4, 3, 2, 1]

3 a=1，b=2，如何不新增变量互换值

1 es6的结构赋值

[a,b]=[b,a]

2 加减法

a=a+b;

b=a-b;

a=a-b;

4 jQuery创建一个div，img

<p id="addDiv">

</p>
<button onclick="addDiv()">按钮</button>

function addDiv(){
    $('#addDiv').append('<div>添加div</div>')
};

5 js获取页面属性

获取方式   获取形式
Object.keys;   获取属性名集合，只处理 obj 自身的可枚举字符串属性。
Object.values;   获取属性值的集合，只处理 obj 自身的可枚举字符串属性。
Object.entries;   获取属性键值对的集合，只处理 obj 自身的可枚举字符串属性。
Object.getOwnPropertyNames(obj);   获取对象的自身属性集合，返回了 obj 自身的所有字符串属性（包括不可枚举的），也不包括symbol属性。
Object.getOwnPropertySymbols(obj);   返回obj所有的symbol属性（包含了不可枚举的），但是不包括字符串属性。
Object.ownKeys(obj)   获取obj的所有属性,其实就是等于Object.getOwnPropertyNames(obj)+Object.getOwnPropertySymbols(obj)
Object.ownKeys(obj)   //包含自身所有可枚举，不可以枚举的，symbol属性
for-in   返回的是对象自身及所在原型链上的所有可枚举字符串属，for-in加上obj.hasOwnProperty(prop)获取的属性等于Object.keys/values/entries三者的联合。

6 100vh和100%谁更高

100vh更高，因为vh是以屏幕可见高度为单位

若div内容为空，则高度为0

7 获取索引值为奇数或偶数的li

$("li:odd") //奇数
$("li:even") //偶数

8 computed和watch的区别

computed

1、支持缓存，只有依赖数据发生改变，才会重新进行计算；如果函数所依赖的属性没有发生变化，从缓存中读取
2、必须有return返回
3、使用方法和data中的数据一样，但是类似一个执行方法
4、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

computed是计算属性，也就是依赖某个值或者props通过计算得来的数据

computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化（依赖的数据可以是单个，也可以是多个）时，会重新调用getter来计算；

注意：就算data中没有直接声明要计算的变量，也可以直接在computed中写入

watch

1、不支持缓存，数据变，直接会触发相应的操作；

2、支持异步操作；

3、watch是监听器，可以监听某一个数据，然后执行相应的操作；

4、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

5、watch的函数名必须和data中的数据名一致

6、watch中的函数有俩个参数，新旧

7、watch中的函数是不需要调用的

8、只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用

9、immediate:true 页面首次加载的时候做一次监听

9 vue3里promise用法

① Promise 是一个构造函数

我们可以创建 Promise 的实例 const p = new Promise()

new 出来的 Promise 实例对象，代表一个异步操作

② Promise.prototype 上包含一个 .then() 方法

每一次 new Promise() 构造函数得到的实例对象，

都可以通过原型链的方式访问到 .then() 方法，例如 p.then()

③ .then() 方法用来预先指定成功和失败的回调函数

p.then(成功的回调函数，失败的回调函数)

p.then(result => { }, error => { })

调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

10 vue3传值方法

1 父传子（props）

2 子传父组件方法和值（emit）

3 子传父（v-model）

4 父组件调用子组件方法（ref）

11 vue3中setup使用

更少的样板内容，更简洁的代码。
能够使用纯TypeScript声明props和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

注意点, 当使用<script setup>语法糖时:
父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容