2021年4月1日北京丰升科技有限公司前端笔试复盘

最新推荐文章于 2023-04-01 11:09:35 发布

ZhandsomeZ

最新推荐文章于 2023-04-01 11:09:35 发布

阅读量1.1k

点赞数 5

分类专栏：面试

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/115398187

版权

面试专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本文主要涵盖了前端面试中常见的技术点，包括跨域的解决方案、GET与POST的区别、前端存储方式及区别、ES6特性解析、var与let/const的区别、HTTP状态码介绍、JavaScript代码示例以及清除浮动的几种方法。旨在帮助读者巩固和理解前端开发中的核心概念。

摘要由CSDN通过智能技术生成

在这里插入图片描述

本篇文章主要是面试复盘仅供大家参考

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.

推荐使用

希望可以对大家有一些帮助，谢谢观看，如有不足敬请指教

ZhandsomeZ

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
2021年4月1日北京丰升科技有限公司前端笔试复盘

本篇文章主要是面试复盘仅供大家参考1.什么是跨域怎么解决跨域跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；解决.
复制链接

扫一扫