【前端面试问题总结】2022.9.18

1.讲一下盒子模型

盒模型：内容，内边距，外边距，边框
模型有两种类型：标准盒模型和IE盒模型。
1.标准盒模型
box-sizing: content-box;
简单来说你的盒子会被padding盒border撑大
标准盒模型的width组成：content（不包含 padding 和 border）
标准盒模型的height组成：content（不包含 padding 和 border）
此时你的盒子实际大小是：
实际高度:height+padding-top+border-top
实际宽度：width+padding+border
2.IE盒模型
box-sizing: border-box;
简单来说盒子不会被padding和border撑大
标准盒模型的width组成：content + 2 * padding + 2 * border
标准盒模型的height组成：content + 2 * padding + 2 * border
此时你的盒子实际大小是：
实际高度:height
实际宽度：width

---

2.清除浮动的方式

原理，在父元素的内部子元素添加浮动后，因为不占据原来的位置，父元素会发生塌陷问题，因此需要清除浮动
1.额外标签法
给父元素末尾添加一个空标签，设置clear:both
2.父元素添加overflow:hidden
3.父元素使用after伪元素清除浮动

   #parent:after {
            content: "";
            clear: both;
            height: 0;
            display: block;
        }

4.使用before和after双伪元素清除浮动

#parent::after,
        #parent::before {
            content: " ";
            display: table;
        }
        
        #parent::after {
            clear: both;
        }

5.给父盒子设置固定高度

---

3.css的选择器，以及优先度

我们可以将 CSS 选择器分为五类：
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
1.简单选择器:
按从低到高优先级排列:通配符选择器*<类选择器. 2.组合器选择器：
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
3.属性选择器

伪类选择器和伪元素选择器具体不讲了看：https://www.w3school.com.cn/css/css_combinators.asp
⬆这个

4.js数组类型中的常用方法

修改数组特定位置的值:arr[index]=‘修改内容’

---

5.遍历数组

1.forEach

        var arr = ['11', '22', '33', '44', '55']
            // foreach
        arr.forEach(
            function(item, index) {
                console.log(item, index);
            }
        )

2. for of 遍历数组/字符串

       for (item, index of arr) {
            console.log(item);
        }

3.for in

 for (item in arr) {
        console.log(arr[item]);
    }

4.map()
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map()不会改变原来的数组，且会返回新的数组
函数的作用是对数组中的每一个元素进行处理，返回新的元素。

      var newarr = arr.map(function(item,key,arr) {
            return item
        })
        console.log(newarr);

5.reduce()

        arr.reduce((n, item, index, arr) => {
            return console.log(item);
        })

---

6.forEach和map()的区别

1.共同点
1.都循环数组中的每一项
2.每次循环都有三个参数
数组中的当前项item
当前项的索引index
原始数组input
3.只循环数组
4.匿名函数中的this指向window

2.共同点
1.forEach()没有返回值，改变原数组
2.map()有返回值，返回新数组，原数组不变

---

7.es6的新特性

1.变量声明添加了let const

let const不存在变量提升，是块级作用域
用const声明的变量在同一个作用域只能声明一次。

2.新增了扩展运算符

3.新增了解构赋值

4.新增了set集合，和map字典两个数据类型

5.promise

---

8.js数据类型有哪些

简单数据类型
Number 、String、Boolean、BigInt、Symbol、Null、Undefined
存放在栈
复杂数据类型
Object
存放在堆

---

9.localStorage和sessionStorage

cookie
cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。保存在客户端浏览器上
基本使用场景
识别用户身份
记录历史
可以在控制台使用js代码访问document.cookie对象
localStorage
HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
不参与网络传输。
一般用于性能优化，可以保存图片、js、css、html 模板、大量数据
sessionStorage
sessionStorage用于本地存储一个会话(session)当中的数据，这些数据只有在同一个会话当中的页面才可以访问，并且当会话结束之后数据也会跟着销毁。
区别
一、存储的时间有效期不同
1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
3、localStorage的有效期是在不进行手动删除的情况下是一直有效的
二、存储的大小不同
1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)
三、与服务端的通信
1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信
四、对于浏览器的支持
1、cookie出现的时间较早，目前见到的浏览器都支持
2、localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)

10.ajax的传输方式有哪些

get:给服务器请求数据，一般使用url?xxx=xxx这种方式传参
post:给服务器发送数据
put：一般应用于给服务器上增加资源文件（上传图片功能），向服务器传输内容方式与put一致
delete：一般应用于从服务器上删除资源文件，向服务器传输内容方式与get一致
head：一般应用于只获取服务器的响应头信息，向服务器传输内容方式与get一致

11.echarts的使用方式

1.下载引入echarts.js文件

2.准备一个具备大小的DOM容器

3.初始化echarts示例对象

var echart = echarts.init(dom节点,主题)

4.指定配置项和数据

var option = {
...
}

5.将配置项设置Echarts示例对象

echart.setOption(option)

12.原型对象，原型链讲解一下

原型对象
当创建一个构造函数之后，这个构造函数上面有个属性叫做prototype,这个属性的属性值是一个对象，叫做此函数的原型对象。
原型对象的constructor的指向即是指回构造函数
此外当为这个构造函数创建了实例对象后，该实例对象的_proto_的指向也是该构造函数的prototype
原型链
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。