收集的前端面试题-CSDN博客

本文链接：https://blog.csdn.net/z245580321/article/details/106464097

基础

1.get和post有什么区别？

get使用URL或Cookie传参，post将数据放在body中
get的URL会有长度限制，post可以非常大
post比get安全，因为数据在地址栏上不可见

2.前端常用的性能优化有哪些？

html

1.h5新增的标签有哪些，为什么要加强语义化？

html5增加了

之类的语义化标签
语义化优点

有利于SEO，利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
增强可读性
便于团队开发于阅读
支持多终端设备浏览器渲染

2.html第一行！doctype是做上面用的？

3.状态码至少五种？

200 请求成功
403 服务器拒绝请求
404 找不到请求页
408 请求超时
500 服务器代码报错

cookie和session区别？

cookie是保存在本地浏览器
session保存在服务器
文档类型声明

1.盒子模型？

有标准盒子模型和IE盒子模型(怪异盒子模型),css3里弹性盒子模型(flex)

标准盒模型：box-sizing:content-box

content+border+padding+margin

,ie盒模型：box-sizing:border-box

content内包含(border+padding) + margin

2.水平居中有哪几种方法？（还需熟练）

定位三种：

固定宽高

父盒子：position:relative;
子盒子：position:absolute;
top和left：50%;
margin-上左：负自身的一半;

有宽高且不考虑的情况（不推荐）

父盒子：position：relative；
子盒子：position：absolute；
top，left，bottom，right：0；
margin：auto；

不明确宽高（兼容问题）

父盒子：
position：relative；
子盒子：position:absolute;
top，left：50%;
transform:translate(-50%,-50%)
flex布局

display:flex（兼容问题）

父盒子：
display：flex；
justify-content:center;(X轴)
align-items:center;(Y轴)

display-table-cell（这是用来控制文本居中的，需要父盒子固定宽高）

父盒子： display:table-cell
width：600px;
vertical-align:middle;
text-align:center;
子盒子：display:inline-block;

js方法看过没用过，通过js获取宽高，设置样式

3.flex弹性盒模型？

4.父盒子中子盒子浮动有什么后果？

会造成父盒子高度塌陷
元素位置错乱

5.定位有哪些属性？相对定位是相对什么定位？

position:statioc

无定位(默认)，元素正常出现在文档流中

position:relative

相对对位，元素相对于自己位置进行定位，不推理文档流

position:absolute

绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html >，会脱离文档流

position:fixed

固定定位，相对于浏览器窗口的固定位置，脱离文档流

position:inherit

继承父元素的定位方式

position:sticky

粘性定位，基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。

6.块元素行内元素和行内块元素有什么区别？

块元素：在垂直方向上排列，独占一行，自动换行，可设置宽高
行内元素：在水平方向排列，不可设置宽高，由内容而定，可设置行高，不可设置padding和margin的上下
行内块元素：拥有块级元素和行内的特性，一行显示，可设置宽高，不自动换行

7.行内块元素在同一行显示时有默认空隙，如何解决？

设置浮动
父元素设置属性：font-size: 0px;
在父元素上设置word-spacing的值为合适的负值
在html中将行内元素在同一行显示不要缩进或换行

8.清除浮动有哪些方法？

在浮动元素的最后添加一个新元素并添加样式设置clear：both;
定义父元素overflow：auto/hidden；(BFC)
在父元素使用伪元素:after,设置：

content：‘’ 内容为空
display：block; 块级元素
clear：both；清除浮动
zoom: 1 解决兼容

9.css选择器优先级？

js

1.给DOM元素绑定事件有哪些方法？(未写全)

DOM中直接绑定：

οnclick=""

js代码中绑定：

document.getElementById(“demo”).onclick = function(){}

事件监听

2.数组里面有哪些遍历方法？es6

for
forEach
forin
map
forof

3.for…of和for…in的区别？

4.undefined和null区别？

undefined表示声明了未赋过值
unll表示将来可能指向一个对象

5.js的执行机制？

6.js里的垃圾回收机制？

7.es6新特性？

8.什么是闭包？优缺点？

闭包就是一个作用域可以访问另一个函数内的局部变量
优点

私有成员的存在
避免全局比变量污染
变量长期保存再内存中

缺点

增加内存使用量
内存泄漏

9.js本地存储机制？

cookie
localStorage
sessionStorage

10.跨域怎么实现？

jsonp
代理
php header写允许跨域

11.箭头函数和普通函数的区别？

箭头函数没有自己的this，它的this是执行上下文的this
不是构造函数，不能被new
没有原型属性

12.js的基本数据类型？

基本数据类型又叫值类型

number，string，null，undefined，boolean

复杂数据类型又叫引用数据类型

常用的几种：object，Array，function，Date

es6新增一种

symbol

13.怎么判断数据类型？

基本数据类型用typeOf
复杂数据类型用instanceOf

14.深浅拷贝区别?

浅拷贝只是拷贝了第一层级数据，引用数据类型拷贝的只是地址
深拷贝是重新开辟空间，拷贝数据与原数据互不影响

15.深拷贝实现？

JSON.parse(JSON.stringify(obj)): 该方法不能拷贝Data、正则、函数
递归：

    function deepClone(target) {
      // 定义一个变量
      let result;
      // 如果当前需要深拷贝的是一个对象的话
      if (typeof target === 'object') {
        // 如果是一个数组的话
        if (Array.isArray(target)) {
          result = []; // 将result赋值为一个数组，并且执行遍历
          for (let i in target) {
            // 递归克隆数组中的每一项
            result.push(deepClone(target[i]))
          }
          // 判断如果当前的值是null的话；直接赋值为null
        } else if (target === null) {
          result = null;
          // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if (target.constructor === RegExp) {
          result = target;
        } else {
          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {};
          for (let i in target) {
            result[i] = deepClone(target[i]);
          }
        }
        // 如果不是对象的话，就是基本数据类型，那么直接赋值
      } else {
        result = target;
      }
      // 返回最终结果
      return result;
    }