轻身经历之面试篇

编程入门行业动态更新时间:2024-10-24 04:48:38

轻身经历之面试篇

前言

这两天骑驴找马，忙着投简历面试，把这两天面试遇到的问题记录一下，自己做个汇总，路过的小伙伴可以看看2023年面试问那些问题

提示：回答问题的时候一定要有气势，遇到不会的就说用过，记不清了

文章目录

前言
一、CSS篇
- 1.左边固定，右边自适应
- 2.左右固定，中间自适应
- 3.一个盒子靠左，一个盒子居中
- 4.position绝对定位的几个属性
- 5.几种方法把盒子水平垂直居中
二、js篇
- 1.数组a=[a,b,c],数组b=[c,d,e],两数组合并
- 2.数组头部新增数据，尾部新增一个数据，删除中间数据方法
- 3.都有那些循环
- 4.怎么把异步改为同步
- 5.谈谈浅拷贝和深拷贝
三、vue篇
- 1.父传子，数据默认值
- 2.路由跳转几种方式
- 3.vue2和vue3的区别
- 4.调接口做网络等待，成功之后取消等待，网络等待做一次
- 5.调接口A和B，当两次都完成再调事件C
- 6.Computed 和 Watch 的区别
- 7.组件之间的通信
四、页面做那些优化处理
总结

一、CSS篇

1.左边固定，右边自适应

<style type="text/css">.box{height: 100px;display: flex;}.left{flex-basis: 100px;background-color: silver;}.right{flex-grow: 1;background-color: pink;}
</style>
<div class="box"><div class="left"></div><div class="right"></div>
</div>

2.左右固定，中间自适应

<style type="text/css">.box{height: 100px;display: flex;}.left{flex-basis: 100px;background-color: silver;}.right{flex-grow: 1;background-color: pink;}
</style>
<div class="box"><div class="left"></div><div class="right"></div><div class="left"></div>
</div>

3.一个盒子靠左，一个盒子居中

4.position绝对定位的几个属性

absolute 生成绝对定位的元素,相对于static定位以外的一个父元素进行定位。
relative 生成相对定位的元素,相对于其原来的位置进行定位。
fixed 生成绝对定位的元素,指定元素相对于屏幕视⼝(viewport)的位置来指定元素位置。
static 默认值,没有定位,元素出现在正常的文档流中
inherit 规定从父元素继承position属性的值

5.几种方法把盒子水平垂直居中

//利用绝对定位
方法1：.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}方法2：.parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}方法3：.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;margin-top: -50px;margin-left: -50px;}//使用flex布局.parent {display: flex;justify-content: center;align-items: center;}

二、js篇

1.数组a=[a,b,c],数组b=[c,d,e],两数组合并

代码如下（示例）：

  var A = [1, 2, 3];var B = [2, 3, 4];var combinedArray = Array.from(new Set([...A, ...B]));console.log(combinedArray)//[1,2,3,4]

2.数组头部新增数据，尾部新增一个数据，删除中间数据方法

代码如下（示例）：

  var A = [1, 2, 3, 4, 5]; // 原始数组 A   A.unshift(0); // 在头部添加元素 0A.push(6); // 在尾部添加元素 6A.splice(3, 1); // 删除索引为 3 的元素console.log(A); // [0, 1, 2, 4, 5, 6]

3.都有那些循环

1、for循环
2、for in循环
3、while循环
4、do while循环
5、Array forEach()循环
6、Array map()循环
7、Array filter()方法
8、Array some()方法
9、Array every()方法
10、Array reduce()方法
11、Array reduceRight()方法

4.怎么把异步改为同步

//循环等待实现异步转同步
// 创建一个标志变量，表示异步操作是否已完成
var isDone = false;// 开始执行异步操作
doAsyncOperation(() -> {// 当异步操作完成时，将标志变量设为 trueisDone = true;
});// 在循环中检查标志变量，直到异步操作完成
while (!isDone) {// 等待一段时间Thread.sleep(100);
}// 异步操作已完成，可以执行后续操作

5.谈谈浅拷贝和深拷贝

//浅拷贝
//浅拷贝是指，对基本类型的值拷贝，以及对象类型的地址拷贝。
var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值，并不会影响到a，因为浅拷贝对基本类型而言就是值拷贝
console.log(a);
//深拷贝
//深拷贝是指，除了拷贝基本类型的值，还完全复刻了对象类型。
var p1 = {name: 'jack'
}var p2 = {name: p1.name
};
p2.name = 'rose';