2022 前端面试

一，HTML和css

1.1 对BFC规范（块级格式化上下文）的理解

1. float的值left或right

2. overflow的值不为visible（默认）

3. display的值为inline-block、table-cell、table-caption

4. position的值为absolute（绝对定位）或fixed固定定位

1.2 清除浮动的几种方式

1.父级div定义height

2.结尾处加空div标签clear：both

3.父级div定义伪类：after、before

4.父级div定义overflow：hidden

5.父级div定义overflow：auto。

6.父级div也浮动，需要定义宽度。

7.父级div定义display：table。

8.结尾处加br标签clear:both

比较好的是第3种，无需多余标签，方便维护，通过伪类就可以解决

1.3 定位有哪几种？分别举例？Z-index熟悉在使用的时候注意什么 ？

1.static: 默认值 没有定位，元素出现在正常的流中

2.relative(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位

3.absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

4.fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位

5.sticky 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。

1.31 Z-index熟悉在使用的时候注意什么 ？

1.31 z-index 规则

1、值可以是正整数、负整数或0，数值越大，盒子越靠上；

2、如果属性值相同，则按照书写顺序，后来居上；

3、数字后面不能加单位。

4、z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

1.4 简单说一下H5新增了哪些新特性？

1.语义化标签：header、footer、section、nav、aside、article

2.增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性：placehoder、required、min 和 max

3.音频视频：audio、video

4.canvas 画布

5.kan wa si 地理定位（Geolocation）

6.拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，

7.本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，

8.数据会被删除 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

9.WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation

1.5 css3新增了那些特征？

1、颜色：新增RGBA、HSLA模式

2、文字阴影：（text-shadow）

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size,background-origin background-clip(削弱)

6、渐变：linear-gradient(线性渐变):

eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);

radial-gradient (径向渐变)

7、过渡：transition可实现动画

8、自定义动画： animate@keyfrom

9、媒体查询：多栏布局@media screen and (width:800px)

10、border-image

11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放

12、3D转换

13、字体图标：font-size

14、弹性布局：flex

1.6 元素居中的方式

1.给父元素设置成弹性盒子，子元素横向居中，纵向居中

2.父相子绝后，子部分向上移动本身宽度和高度的一半，也可以用transfrom:translate(-50%,-50%)（最常用方法）

3.父相子绝，子元素所有定位为0，margin设置auto自适应

1.7 媒体查询是什么？

媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

1.8 css 常见的伪类有哪些？

:link 选择所有未访问的链接
:visited 选择所有访问过的链接
:active 选择正在活动的链接（或理解为鼠标点击瞬间效果）
:hover 鼠标放到链接后的状态
:focus 选择元素输入后具有焦点
:before 在元素之前插入内容
:after 在元素之后插入内容

1.9 less 和sass是什么？

##Less：
是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
##Sass：
是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

1.10 px、em和rem的区别?

- em是相对父元素的字体大小，如果父元素的字体大小是14px，那么它子元素的2em就是28px，不同父元素的子元素的2em的实际大小是可能不同的。

- rem是相对于根元素，即html元素，如果html的字体大小是14px，那么在任何地方的2rem都是28px。

- px像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

1.11 圣杯布局和双飞翼布局

##圣杯布局
圣杯布局是两边固定宽度，中间自适应的三栏布局。
中间栏放到文档流前面，先行渲染。
目的是为了解决三栏布局。

##双飞翼布局
圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），
而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，
效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

1.12 img的alt与title有何异同？ strong与em的异同？

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），
alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
em:表现为斜体，语义表示强调
strong:表现为粗体，语义为强烈语气，强调程度超过em

二，javascript

2.1 js的数据类型

基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol  、BigInt

引用数据类型: Object。包含 Object、Array、 function、Date、RegExp。

2.2 例举3种强制类型转换和2种隐式类型转换?

强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）
在JavaScript中类型转换有三种情况：

转换为数字（调用Number(),parseInt(),parseFloat()方法）
转换为字符串（调用.toString()或String()方法）
转换为布尔值（调用Boolean()方法）
还有隐式转换
注意：null、undefined没有.toString方法

转换为数字
Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN
 
Number('1')   // 1
Number(true)  // 1
Number('123s') // NaN
Number({})  //NaN
 
 
parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。
parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)  // NaN
parseInt('a123')  // NaN  如果第一个字符不是数字或者符号就返回NaN
parseInt('123a')  // 123
 
 
parseFloat(string)：解析一个参数并返回一个浮点数
 
parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01
 
 
隐式转换
 
let str = '123'
let res = str - 1 //122
 
str+1 // '1231'
+str+1 // 124
 
 
转换为字符串
 
.toString()  ⚠️注意：null,undefined不能调用
 
Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'
 
 
String() 都能转
 
String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//'[object Object]'
 
 
隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串
 
let a = 1
a+'' // '1'
 
转换为布尔值
0, ''(空字符串), null, undefined, NaN会转成false，其它都是true
 
Boolean()
 
Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true
 
条件语句
 
let a
if(a) {
  //...   //这里a为undefined，会转为false，所以该条件语句内部不会执行
}
 
 
隐式转换 !!
 
let str = '111'
console.log(!!str) // true

2.3 split() 、join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串```

2.4数组

1、sort( )：sort 排序 如果下面参数的正反 控制 升序和降序 ，返回的是从新排序的原数组
2、splice( )：向数组的指定index处插入 返回的是被删除掉的元素的集合，会改变原有数组；截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。会改变原数据
3、pop( )：从尾部删除一个元素 返回被删除掉的元素，改变原有数组。
4、push( )：向数组的末尾追加 返回值是添加数据后数组的新长度，改变原有数组。
5、unshift( )：向数组的开头添加 返回值是添加数据后数组的新长度，改变原有数组。
6、shift( )：从头部删除一个元素 返回被删除掉的元素，改变原有数组。
7、reverse( )： 原数组倒序  它的返回值是倒序之后的原数组
8、concat( )：数组合并。
9、slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。从数组中截取，如果不传参，会返回原数组。如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。
10、join( )：讲数组进行分割成为字符串  这能分割一层在套一层就分隔不了了
11、toString( )：数组转字符串；
12、toLocaleString( )：将数组转换为本地数组。
13、forEach( )：数组进行遍历；
14、map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。
15、filter( )：对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组。
16、every( )：当数组中每一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
17、some( )：当数组中有一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
18、reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index，arr。把数组列表计算成一个
19.isArray() 判断是否是数组
20. indexOf  找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1
21. lastIndexOf 它是从最后一个值向前查找的 找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1
22. Array.of() 填充单个值
23. Array.from() 来源是类数组    
24.fill填充方法 可以传入3各参数 可以填充数组里的值也就是替换 如果一个值全部都替换掉 ，    第一个参数就是值 第二个参数 从起始第几个 第三个参数就是最后一个
find  查找这一组数 符合条件的第一个数 给他返回出来
findIndex() 查找这一组数 符合条件的第一数的下标 给他返回出来     没有返回 -1  
keys 属性名  values属性值  entries属性和属性值
forEach 循环便利 有3个参数 无法使用 break continue ， 参数一就是每个元素 参数二就是每个下标 参数三就是每个一项包扩下标和元素
​
 
### 改变数组本身的api
1. `pop()`  尾部弹出一个元素
2. `push()` 尾部插入一个元素
3. `shift()`  头部弹出一个元素
4. `unshift()`  头部插入一个元素
5. `sort([func])` 对数组进行排序,func有2各参数，其返回值小于0，那么参数1被排列到参数2之前，反之参数2排在参数1之前
6. `reverse()` 原位反转数组中的元素
7. `splice(pos,deleteCount,...item)`  返回修改后的数组，从pos开始删除deleteCount个元素，并在当前位置插入items
8. `copyWithin(pos[, start[, end]])` 复制从start到end(不包括end)的元素，到pos开始的索引，返回改变后的数组，浅拷贝
9. `arr.fill(value[, start[, end]])` 从start到end默认到数组最后一个位置，不包括end，填充val，返回填充后的数组
其他数组api不改变原数组
​
​
map 映射关系的数组  map 主要就是有返回值可以return 数组   判断的会返回boolean 
1、map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。
2、map()方法按照原始数组元素顺序依次处理元素。
​
注意：
map()不会对空数组进行检测。
map()不会改变原始数组。
map() 函数的作用是对数组中的每一个元素进行处理，返回新的元素。
filter 满足条件的都能返回 是一个数组
some返回boolean 循环数组 只要有一个成员通过了就会返回 true 反而 false
every返回boolean 循环数组 只有全部成员通过了就会返回 true 反而 false 
reduce() 累加器 把上一次计算的值，给下一次计算进行相加
set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用  
delete  [1] delete 可以删除数组中的一向
**Array.isArray()** 用于确定传递的值是否是一个 [`Array`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)。
flat  扁平化 将嵌套的数组 “拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。// 参数写的就是代表要扁平到第几层
​
​
​
//1、every()
var arr = [1,56,80,5];
var main = arr.every(n => n > 0);
console.log(main)   //输出:true
​
//2、some()
var arr = [1,-56,80,-5];
var main = arr.some(n => n > 0);
console.log(main)    //输出:true
​
//3、reducer()
var arr = [10,20,30,40]
let result = arr.reduce(function(prev,next,index,arr){
    return prev + next;
})
console.log(result);  //输出:100
​
// 4、filter  返回满足要求的数组项组成的新数组
var arr3 = [3,6,7,12,20,64,35]
var result3 = arr3.filter((item,index,arr)=>{
    return item > 3
})
console.log(result3)  //[6,7,12,20,64,35]
​
// 5、map  返回每次函数调用的结果组成的数组
var arr4 = [1,2,3,4,5,6]
var result4 = arr4.map((item,index,arr)=>{
    return `<span>${item}</span>`
})
console.log(result4)  
/*[ '<span>1</span>',
  '<span>2</span>',
  '<span>3</span>',
  '<span>4</span>',
  '<span>5</span>',
  '<span>6</span>' ]*/
​
​
ES6数组的常用方法：
​
1、Array.from( )：将对象或字符串转成数组，注意得有length。
2、Array.of( )： 将一组值转换为数组。
3、copyWithin(target，start(可选)，end(可选))：数组内数据的复制替换
    target：从该位置开始替换数据；
    start：从该位置开始读取数据，默认为0；
    end：到该位置停止数据的读取，默认为数组的长度
4、find( )：用于找出第一个符合条件的数组成员。
5、findIndex( )：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
6、fill(value，start，end)：使用给定值，填充一个数组。
    value：填充的值；
    start：开始填充的位置；
    end：填充结束的位置。
7、keys( )：对键名的遍历。
8、values( )：对键值的遍历。
9、entries( )：对键值对的遍历。
10、includes( )：数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。
11、flat( )：用于数组扁平，数组去除未定义。
12、flatMap( )：对原数组的每个成员执行一个函数。
13、Map( )：是一组键值对的结构，具有极快的查找速度。
14、Set( )：Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。
​
​
//1、Array.from()  --   Array.of()
    var  arrayLink = {
        "0":"a",
        "1":"b",
        "2":"c",
        length:3
    }
    var arr = Array.from(arrayLink)
    console.log(arr)   // 输出: [a,b,c]
    console.log(Array.from("abcdefg"))  //输出:["a", "b", "c", "d", "e", "f", "g"]
    console.log(Array.of(1,2,3,4,5))  //输出: [1, 2, 3, 4, 5]
​
//2、copyWithin()
    var arr = [1,2,3,4,5];
    var main = arr.copyWithin(0,3);
    console.log(main);   //输出:[4,5,3,4,5]
​
//3、find()
    var arr = [1,-5,2,9,-6];
    var main = arr.find(n =>  n < 0);
    console.log(main);   //输出:-5
​
//4、fill()
    var arr = ["a","b","c","d"];
    console.log(arr.fill(7,1,2));//输出:["a",7,"c","d"]  
​
//5、keys()  values()  entries()
    var arr = ["a","b","c","d"];
    for(let index of arr.keys()){
        console.log(index);
    }
    for(let elem of arr.values()){
        console.log(elem);
    }
    for(let [index,elem] of arr.entries()){
        console.log(index,elem);
    }  
​
//6、includes()
    let arr = [12,34,223,45,67]
    console.log(arr.includes(45))   //输出:true
    [1, 2, NaN].includes(NaN)     // true
    [1, 2, NaN].indexOf(NaN)      // -1
​
//7、Map
    var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95
    //初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：
    var m = new Map(); // 空Map
    m.set('Adam', 67); // 添加新的key-value
    m.set('Bob', 59);
    m.has('Adam'); // 是否存在key 'Adam': true
    m.get('Adam'); // 67
    m.delete('Adam'); // 删除key 'Adam'
    m.get('Adam'); // undefined
    //由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
    var m = new Map();
    m.set('Adam', 67);
    m.set('Adam', 88);
    m.get('Adam'); // 88
​
//8、Set
    //要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：
    var s1 = new Set(); // 空Set
    var s2 = new Set([1, 2, 3]); // 含1, 2, 3
    //重复元素在Set中自动被过滤：
    var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}  注意：数字3和字符串'3'是不同的元素
    //通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：
    s.add(4);
    s; // Set {1, 2, 3, 4}
    s.add(4);
    s; // 仍然是 Set {1, 2, 3, 4}
    //通过delete(key)方法可以删除元素：
    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}

2.41 数组去重

1. 使用ES6中的  new Set是最简单的去重方法
​
2、定义一个空数组，通过forEach循环，indexOf判断值是否是-1，如果是push到新的数组中 
        var arr = [1, 2, 3, 8, 8, 5, 2]
        var newArr = []
         for (let i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[i]) == -1) {
            // 定义一个新数组 循环便利要去重的数组使用indexOf api 
            // 新数组检测要去重的数组，== -1 说明没找到 找到了就放到新数组里，如果找到了就不执行，
                 newArr.push(arr[i])
             }
         }
         console.log(newArr);
​
         arr.forEach(item => {
             if (!newArr.includes(item)) {
                 newArr.push(item)
             }
         })
        console.log(newArr);
​
        console.log([...new Set(arr)])

2.5 数组循环

2.51 数组循环四种写法

伪数组的循环方式有，for，for-of
数组的循环方式有for，forEach，map，filter，find，some，every，reduce，for-of
对象的循环方式有for-in，JSON，for-of
Set的循环有forEach，for-of

2.52 for in 和 for of 有什么区别？

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

2.6 字符串

1、chartAt( )：返回在指定位置的字符；
2、concat( )：返回新的字符串**，将一个或多个字符串与原字符串连接合并
3、indexOf( )：检索字符串，返回第一次出现的索引，没有出现则为-1
4、lastIndexOf(searchValue[ fromIndex]) 返回从字符串尾部开始第一次出现的索引，没有则-1，fromIndex的值相对于从尾部开始的索引
5、split( )：返回一个以指定分隔符出现位置分隔而成的一个数组，数组元素不包含分隔符
6、substr( )：从起始索引号提取字符串中指定数目的字符；
7、substring( )：提取字符串中两个指定的索引号之间的字符；
8、toLowerCase( )：字符串转小写；
9、toUpperCase( )：字符串转大写；
10、valueOf( )：返回某个字符串对象的原始值； 
11、trim( )：删除字符串两边的空格；
12、trimeState 取出开始的空格
13、trimeEnd  去除末尾空格
14、includes(searchString[, position])返回boolean，判断一个字符串是否包含在另一个字符串中，从postition索引开始搜寻，默认0
15、slice( )：提取字符串片段，并在新的字符串中返回被提取的部分；
16、search(regexp)返回首次匹配到的索引，没有则-1，执行正则表达式和 String 对象之间的一个搜索匹配
17、toString()返回一个表示调用对象的字符串，该方法返回指定对象的字符串形式
18、trim()返回去掉两端空白后的新字符串 还有trimend trimstart
19、replace() 把指定的字符串替换成为别的字符

2.61 字符串截取

1. 取字符串的前i个字符
str=str.Substring(0,i);
2. 去掉字符串的前i个字符
str=str.Substring(i);
3. 从右边开始取i个字符
str=str.Substring(str.Length-i);
 4. 从右边开始去掉i个字符
str=str.Substring(0,str.Length-i);
1:通过subString()方法来进行字符串截取

2.62 判断字符串有没有包含关系

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
test() 方法用于检索字符串中指定的值。返回 true 或 false。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

2.7 js == 和 === 的区别

==：运算符称作相等，用来检测两个操作数是否相等，自动进行类型转换
===：用来检测两个操作数是否严格相等
==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等

2.8 null 和 undefined 的区别？

相同：
在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。
不同：
undefined 代表的含义是未定义，

定义了形参，没有传实参，显示undefined

一般变量声明了但还没有定义的时候会返回 undefined

对象属性名不存在时，显示undefined

函数没有写返回值，即没有写return，拿到的是undefined

null 代表的含义是空对象。也作为对象原型链的终点

null 主要用于赋值给一些可能会返回对象的变量，作为初始化。

2.9 请描述一下 cookies，sessionStorage 和 localStorage 的区别?

cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，
若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie

localStorage：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，
因此用作持久数据，不参与和服务器的通信

sessionStorage关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，
不参与和服务器的通信。

2.10 什么是深拷贝，浅拷贝，浅拷贝 赋值的区别，如何实现？

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

1.浅拷贝：

将原对象或原数组的引用直接赋给新对象，新数组，新对象只是对原对象的一个引用，而不复制对象本身，新旧对象还是共享同一块内存

如果属性是一个基本数据类型，拷贝就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址,

2.深拷贝：

创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝就是把一个对象，从内存中完整的拷贝出来，从堆内存中开辟了新区域，用来存新对象，并且修改新对象不会影响原对象

3、赋值：

当我们把一个对象赋值给一个新的变量时，赋的是该对象在栈中的内存地址，而不是堆中的数据。也就是两个对象

浅拷贝的实现方式：
   1、object.assign()
   2、lodash 里面的 _.clone 
   3、...扩展运算符
   4、 Array.prototype.concat 
   5、 Array.prototype.clice
​
    深拷贝的实现方式
​
    1、 JSON.parse(JSON.stringify())
    2、递归操作
    3、cloneDeep
    4、Jquery.extend()   
​
深拷贝：
    function deepClone(arr = {}) {
        if (typeof arr !== 'object' || arr == null) {
            return arr
        }
        let result
        if (arr instanceof Array) {
            result = []
        } else {
            result = {}
        }
        for (const key in arr) {
            result[key] = arr[key]
        }
        return result

2.11 this指向的问题（高频）？

在全局的环境下this是指向window 的

普通函数调用直接调用中的this 会指向 window， 严格模式下this会指向 undefined，自执行函数 this 指向 window，定时器中的 this 指向 window

在对象里调用的this，指向调用函数的那个对象，

在构造函数以及类中的this，构造函数配合 new 使用, 而 new 关键字会将构造函数中的 this 指向实例化对象，
所以构造函数中的 this 指向 当前实例化的对象

方法中的this谁调用就指向谁。

箭头函数没有自己的 this，箭头函数的this在定义的时候，会继承自外层第一个普通函数的this

2.12 闭包？

1、闭包的概念就是：只有权利访问另一个函数作用域中的变量，一般就是函数包裹着函数。

3、闭包可以重用一个变量，且保证这个变量不会被污染的一种机制。这些变量的值始终保持在内存中，不会被垃圾回收机制处理

4、闭包的缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，
   在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

5、为什么要用闭包：使用场景 : 防抖、节流、函数套函数避免全局污染

闭包原理
函数执行分成两个阶段(预编译阶段和执行阶段)。
​
    1.在预编译阶段，如果发现内部函数使用了外部函数的变量，则会在内存中创建一个“闭包”对象并保存对应变量值，
      如果已存在“闭包”，则只需要增加对应属性值即可。
    2.执行完后，函数执行上下文会被销毁，函数对“闭包”对象的引用也会被销毁，但其内部函数还持用该“闭包”的引用，
      所以内部函数可以继续使用“外部函数”中的变量
​
利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，
但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。