本文主要涵盖了前端面试中常见的技术点，包括跨域的解决方案、GET与POST的区别、前端存储方式及区别、ES6特性解析、var与let/const的区别、HTTP状态码介绍、JavaScript代码示例以及清除浮动的几种方法。旨在帮助读者巩固和理解前端开发中的核心概念。
本篇文章主要是面试复盘仅供大家参考
1.什么是跨域 怎么解决跨域
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，
是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，
如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，
而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
注意：跨域限制访问，其实是浏览器的限制。
理解这一点很重要 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；
解决跨域:
1、通过jsonp跨域
2、document.domain + iframe跨域
3、location.hash + iframe
4、window.name + iframe跨域
5、postMessage跨域
6、跨域资源共享（CORS）
7、nginx代理跨域
8、nodejs中间件代理跨域
9、WebSocket协议跨域
2.GET和POST的区别
注：HTTP请求，最初设定了八种方法。这八种方法本质上没有任何区别。只是让请求，更加有语义而已。
OPTIONS 返回服务器所支持的请求方法
GET 向服务器获取指定资源
HEAD 与GET一致，只不过响应体不返回，只返回响应头
POST 向服务器提交数据，数据放在请求体里
PUT 与POST相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用
2.GET 用于获取信息，是无副作用的，是幂等的，且可缓存，
而POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存。
当然，GET和POST本质上并没有什么区别，GET和POST是就是HTTP协议中的两种发送请求的方法。
3.前端存储的方式和区别
javaScript有三种数据存储方式，分别是：sessionStorage,localStorage,cookier
相同点：都保存在浏览器端，同源的
不同点：①传递方式不同
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
②数据大小不同
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，
所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
③数据有效期不同
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
④作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
说一下ES6
1声明变量 let const
2.数组和对象的结构赋值
3.箭头函数 不会改变this指向
4.新增加的数据结构 set / map
5.promise async await
6.array.form()将类数组转换成数组
7.形参默认值
8.对象字面量的增强 函数简写 对象里面的属性名和和值一样可以简写
9.模块化 inport export
10.... 三元运算符
11.形参默认值
5.说一下var 和 let const的区别
1.var声明变量存在变量提升，let和const不存在变量提升
2.let、const都有局部作用域
3.const如果声明的是引用类型数据，可以修改其属性 只是不能指向新的引用地址
6.说一下http状态码
7.写一个方法 输入 {a:1,b:2,c:3} 输出 {arr:[a,b,c],arr2:[1,2,3]}
const obj = {a:1,b:2,c:3}
function fn(params) {
const obj = { arr: [], arr2: [] }
obj.arr = Object.keys(params);
obj.arr2 = Object.values(params);
return obj
}
let res = fn({ a: 1, b: 2, c: 3 });
console.log(res)
8. 一个高维数组 从小往大 排列
let result = [],
tempArr5 = ['1',2,[3,4,[5,6]],7];
function unid1(arr){
for(let item of arr){
if(Object.prototype.toString.call(item).slice(8, -1)==='Array'){
unid1(item);
}else{
result.push(item);
}
}
return result;
}
console.log(unid1(tempArr5)); // ["1", 2, 3, 4, 5, 6, 7]
9.字符串截取
//https://baijiahao.baidu.com/s?id=1693837831731360758&wfr=spider&for=pc
//截取成 {id:"1693837831731360758",wfr:"spider"}
function fn1(params) {
let reg = /=/ig; //o为要替换的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找
let str = params.split('?')[1].replace(reg, ":").split("&");
let str3 = str.map(item => {
const obj = {}
obj[item.split(':')[0]] = item.split(':')[1]
return obj
})
return Object.assign(...str3);
}
let res5 = fn1('https://baijiahao.baidu.com/s?id=1693837831731360758&wfr=spider&for=pc');
console.log(res5)
10.使用vue语法糖展示即可
const obj = {
teamName1: { titName: "将军", arr: ["白起", "廉颇", "赵子龙", "李牧"] },
teamName2: { titName: "将军", arr: ["白起", "廉颇", "赵子龙", "李牧"] },
teamName3: { titName: "将军", arr: ["白起", "廉颇", "赵子龙", "李牧"] },
teamName4: { titName: "将军", arr: ["白起", "廉颇", "赵子龙", "李牧"] },
};
<div v-for="group in Object.values(obj)" :key="group">
<h2>{{group}}</h2>
<p v-for="item in group" :key="item">{{item}}</p>
</div>
11.自己掌握的技术
vue + elementui + axios +vuex + vue-router + lodash + npm / cnpm /yarn 了解ts
vue 中data为什么是一个函数
组件是一个具有单独自身功能模块的封装，这个模块有属于自己的HTML模板，
也应该有属于自己的数据data，组件也有自己的方法methods
注意：组件不能直接访问Vue实例中定义的数据。就算可以访问，
若将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿（数据很多），
所以组件应该有自己保存数据的地方，
因此，data属性必须是一个函数，并且这个函数返回一个对象，在对象内部保存数据
清除浮动的几种方式
1、给其设置clear：both 不推荐用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
2、父级添加overflow属性
通过触发BFC方式，实现清除浮动
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
不推荐使用
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
推荐使用
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
推荐使用
希望可以对大家有一些帮助，谢谢观看，如有不足敬请指教
扫一扫
2981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
