前端面筋(持续更新)

额外面筋

get和post的区别？怎么理解get能被缓存？

1. get请求和post同属于http中的两种请求，在传输上没有什么区别，只是约定有所不同
2. get请求一般用于向服务器请求数据 post请求一般用于向服务器提交数据
3. get请求的参数一般不安全，因为参数是拼接在url后面，暴露在地址栏中 post请求的参数一般比较安全，因为post请求的参数放在请求体中
4. get请求可以缓存，但是post请求不能。因为通常http缓存只适合于不修改服务器端数据的请求，get请求一般只向服务端请求数据，所以比较适合
5. get请求参数一般有长度限制，post没有。因为get请求参数拼接在url后面，url本身有长度限制，所有get参数也有长度限制。而post请求放在请求体中，一般没有长度限制

Vue中nextTick的用法？ 

 Vue2和Vue3的区别？

海康威视

一面(结果未出)

开头：自我介绍+和面试官聊聊天   后面：开始拷打

为什么Vue组件中data属性是一个函数？

因为在JS里面是通过构造函数来创建来实例的，每个构造函数可以new多个实例，每个实例也都会继承原型上的方法或属性，那么在Vue中呢，一个Vue组件就是一个Vue实例，当一个组件被复用多次，就会创建多个实例，如果data是对象，那么被多次复用的这个组件，在某一处改变了data数据，就会影响到其他处复用这个组件的地方，因为对象他是引用数据类型，是对于内存地址的引用，牵一发而动全身，而如果data是一个函数的话，那么我们每次创建一个新的实例之后，就会调用这个新的data函数，返回一个新的对象，也就是给每一个data数据定义了一个新的内存地址，自己维护自己的数据，所以为了保证每个组件data的独立性或者说组件的可复用性，data就必须是一个函数。

vue中的key的作用或者原理是什么？说一下你对它的理解

在Vue的生命周期里面，beforeCreate函数里面干了什么事情？在哪一个生命周期函数里面可以获取Dom节点

undefined和null有什么区别，当你打印null的类型的时候会返回什么？

你是怎么理解ES6中的Promise的？然后对方给代码，自己说打印顺序，主要涉及事件循环，同步任务、异步任务(宏任务和微任务)的执行先后顺序知识点？

一文讲透Promise面试题：说出代码执行结果在前端面试中，promise的代码执行结果是常出现的一个题目。其实主要考察 - 掘金 (juejin.cn)https://juejin.cn/post/7074406664589279262?share_token=0d0a65c2-5582-4822-86eb-95b1b4029baa

'=='和'==='三个等于的区别，再问了几种情况，应该打印True还是False?

在Vue中用v-for是遍历一个数组，渲染到页面上？如何修改数组的第二个数使其同步到视图？

Vue2和Vue3中下标修改无效，亲测！需要使用Vue的响应式方法来修改数组！

Html页面有哪几层？即html,css,js分别属于哪些层？

网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(JavaScript)。
HTML —— 结构，决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ，设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为，控制网页的行为（ “做什么”）

说一下地址栏输入URL敲下回车后发生了什么？

反问：这是我第一次面试，在面试过程中也发现了许多问题，请问对于以后的面试或者Vue的学习有什么建议吗？

答：虽然你简历能过，但是对于前端三件套，Vue等的基本知识点还是要注意看，不然面试官问你答不出来还是很减分的

总结：基础太不牢靠了，面试官小姐姐非常非常好说话，除了问问题有点答不上来，略感羞涩，英文说一些函数的时候反应老半天，救命promise我都喊面试官拼一下！！！其它还行，万事开头难加油！

杭州宇神五号

笔试

实现快速排序算法

#include<iostream>
#include<algorithm>
#include<vector>
using namespace std;
vector<int>arr;
int length;
void quick_sort(int left,int right){int l=left,r=right;if(l>=r) return;while(l<r){while(arr[r]>=arr[left]&&l<r) r--;while(arr[l]<=arr[left]&&l<r) l++;swap(arr[l],arr[r]);}swap(arr[l],arr[left]);quick_sort(left,l-1);quick_sort(l+1,right);
}
int main() {cout<<"请输入要排序的数组长度:";cin>>length;cout<<"请输入数组元素：";for(int i=1;i<=length;i++) {int x;cin>>x;arr.push_back(x);}quick_sort(0,length-1);cout<<"排序(升序)结果:";for(auto ite:arr) cout<<ite<<" ";return 0; 
}

 用非递归的方式实现二叉树深度遍历算法

#include<iostream>
#include<algorithm>
#include<stack>
using namespace std;
struct TreeNode {char data;TreeNode *left;TreeNode *right;TreeNode():left(nullptr),right(nullptr) {}
};
//利用先序遍历创建二叉树
void pre(TreeNode* &root) {char data;cin>>data;if(data!='#') {root=new TreeNode();root->data=data;pre(root->left);pre(root->right);} else return;
}
//利用栈将一个递归的算法转化为非递归的算法
stack<TreeNode*>st;
void deep() {while(!st.empty()) {TreeNode* node=st.top();st.pop();cout<<node->data;if(node->right!=nullptr) st.push(node->right);if(node->left!=nullptr) st.push(node->left);}
}
int main() {TreeNode* root;pre(root);st.push(root);deep();return 0;
}

给定一个递增排列的数组 nums ，需要原地删除重复出现的元素，使每个元素只出现一次，返回删除后数组的新长度。元素的相对顺序应该保持一致，然后返回 nums 中唯一元素的个数。

#include<iostream>
#include<algorithm>
#include<vector>
using namespace std;
int arr[100005];
int length,index=1;
int main() {cout<<"请输入数组长度：";cin>>length;cout<<"请输入数组元素："; for(int i=1;i<=length;i++) cin>>arr[i];for(int i=1;i<=length;i++){while(arr[i]==arr[index]&&i+1<=length) i++;index++;arr[index]=arr[i];}cout<<"数组中唯一元素的个数:"<<index<<endl;for(int i=1;i<=index;i++) cout<<arr[i]<<" ";return 0; 
}

 给定一个整数数组 nums ，除某个元素仅出现一次外，其余每个元素都恰好出现三次。你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。

 

#include<iostream>
#include<algorithm>
#include<vector>
using namespace std;
int length,result=0;
vector<int>vec;
int main() {cout<<"请输入数组长度：";cin>>length;cout<<"请输入数组元素：";for(int i=1;i<=length;i++){int x;cin>>x;vec.push_back(x);}for(int i=0;i<32;i++){int bit_sum=0;for(auto ite:vec)	bit_sum+=(ite>>i)&1;result|=(bit_sum%3)<<i;}cout<<result<<endl;return 0;
}

假设我们要开发一个 Web 页面，需要能够在 IOS/Android/PC Web/Mobile Web 多端都能适配正常显示，你会有哪些实现方式？

• 响应式设计（Responsive Design）

媒体查询（Media Queries）：使用 CSS3 的媒体查询功能，根据设备的屏幕宽度、高度、分辨率等特性，应用不同的样式。

流式布局（Fluid Layouts）：使用百分比而非固定像素值来定义元素的宽度，使布局能够随着屏幕尺寸变化而调整。

弹性盒子（Flexbox）和网格布局（Grid Layout）：利用这些 CSS 布局模块，可以更加灵活地创建响应式布局。

• JavaScript 辅助

使用 JavaScript检测屏幕尺寸和用户交互，动态调整页面内容或样式。

• 字体自适应

相对单位：使用相对单位（如 em、rem）定义字体大小，而不是固定像素值。

clamp()函数：可以使用 clamp() 函数，结合最小、最大和首选字体大小，实现更灵活的字体自适应。

图片自适应

图片属性：使用 srcset 和 sizes 属性来提供不同分辨率的图片，确保图片在不同设备上都能良好显示。

SVG矢量图：使用 SVG 图片，因为它们是矢量格式，可以无损放大或缩小。