前端基础知识总结

1.什么是事件循环

(1)为什么要用事件循环
为了解决JavaScript单线程运行堵塞问题，运用到计算机系统的的一种运行机制。
(2)事件循环是什么
首先，在JavaScript中分为同步任务和异步任务，
同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程的任务执行完会读取任务队列，
推入主线程执行，上述过程不断重复的过程叫事件循环。

2.微任务宏任务执行优先级

(1) 微任务
一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前。
常见的微任务有：
Promise.then
MutaionObserver
Object.observe（已废弃；Proxy 对象替代）
process.nextTick（Node.js）
(2)宏任务
宏任务的时间颗粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求不太符合
script (可以理解为外层同步代码)
setTimeout/setInterval
UI rendering/UI事件
postMessage、MessageChannel
setImmediate、I/O（Node.js）
所以先执行微任务再执行宏任务

3.常用ES6

let/const
let表示声明局部变量，相较于之前var声明，主要一下区别：
1.不存在变量提升
2.存在暂时性死区，预编译时不能被访问
3.不允许重复声明，同一作用域内只能声明一次
4.存在块级作用域，作用域之外不能访问里面声明的变量

const 声明之后不能修改，在声明时必须赋值。其他特性和let一样。

ES6字符串方法
includes()判断字符中，是否包含某个字符
startsWith() 判断字符串是否以某个字符开头
endsWith() 判断字符是否以某个字符结束

for of 遍历

let arr = ['aa','bb','cc']
for(let a of arr){
    console.log(a) // aa bb cc
}

字符串拼接模板
字符串使用反引号``，变量使用${}

var color = '红'
var str = '太阳是'+color+'色的' //es5及之前
var str1 = `太阳是${color}色的` //es6

常规拼接不支持换行，ES6的拼接支持。

箭头函数（Arrow Function） =>
箭头函数最直观的三个特点：
1.不需要function关键字来创建函数
2.省略return关键字
3.箭头函数中this没有明确指向，回向上一级（宿主对象）寻找

函数有且仅有一个参数的时候，可以省略括号。
没有参数的时候写成一对圆括号。
函数返回有且仅有一个表达式时可以省略{}和return

解构赋值
let obj = {name:'小明',age:18}
let {name,age} = obj
console.log(name,age) //小明 18

Symbol类型
ES6新增的原始数据类型，表示独一无二的值。
声明方法：let id = Symbol();
let a = Symbol(1)
let b = Symbol(2)
console.log(a==b) //false

set对象
es6t提供了新的数据结构Set，可以用来保存对象挥着基本类型，所有保存的值都是唯一的
let set = new Set([1,2,3,4,4,4,4,5,'5'])
console.log(set) //结果为：[1,2,3,4,5,'5']

Map集合,即映射

bind方法

class的写法与继承

4.promise中的方法

then() 可以链式调用
catch() 相当于then()方法的第二个参数，指向reject的回调函数；
还有个作用是在执行resolve回调函数时，如果出现错误，抛出异常，不会停止运行。
all() 方法可以完成并行任务，它接受一个数组，数组的每一项都是一个promise对象。
当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved，
如果有一个状态变成了reject，那么all方法的状态就会变成reject
race()
finally()方法用于指定不管promise对象最后状态如何，都会执行的操作。

5.为什么使用箭头函数?

引入箭头函数有两个方面的作用：更简短的函数 更直观的作用域和this的绑定(不绑定this)
箭头函数示例：

()=>console.log('Hello')
    function () {
    console.log('hello')    
}

6.LocalStorage与SessionStorage与Cookie的区别

相同点：都是开发中用到的临时存储客户端会话信息或者数据的方法
不同点：
1.存储的时间有效期不同
cookie有效期可以设置，默认情况下是关闭浏览器后失效
sessionStorage有效期是仅保持当前页面，关闭当前会话页或者浏览器就会失效
localStorage的有效期是在不进行手动删除的情况下一直有效
2.存储的大小不同
cookie的存储是4kb左右，存储量较小
localStorage和sessionStorage的存储容量是5Mb
3.与服务端的通信
cookie会参与服务器的通信中，一般会携带在http请求的头部中，例如一些关键秘钥验证等
localStorage和sessionStorage是单纯的前端存储，不参与服务端的通信
4.读写操作的便携程度
cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作
5.对浏览器的支持
cookie出现的时间较早，所有浏览器都支持
localStorage和sessionStorage出现时间较晚，版本低地浏览器不支持（例如IE8以下）

7.flex布局（弹性盒子）

https://blog.csdn.net/scorpion_V/article/details/125563670

8.什么是回流和重绘？它们的区别是什么？

浏览器渲染的过程
1.解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树
2.将DOM树和CSSOM树进行结合，生成渲染树（render tree）
3.根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）
4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等）
5.Display将像素发送到GPU，展示在页面上
什么是回流：
浏览器会把获取到的HTML代码解析成一个DOM树，html中的每一个元素都是DOM树的
一个节点，根节点就是document对象。在渲染树中的一部分（或者全部）因为元素的规模尺寸、
布局、显隐等改变而需要重新构建，这就成为回流。每次页面至少会发生一次回流，
就是在页面第一次渲染的时候。
什么时候发生回流：
背景颜色改变，样式发生改变的时候。
什么是重绘：
在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格、不影响布局。
区别：
回流会引起重绘，重绘不一定会引起回流。
回流会导致页面重排，影响性能。
重绘的开销较小，回流的代价较高。

9.怎么做上下左右居中？

1.position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%);
2.width: 100px; 
    height: 100px;
    position: absolute; 
　　 left: 50%; 
    top:50%; 
    margin-left: -50px; 
    margin-top: -50px; 
3.margin: auto; 
4.flex
    display: flex;
    justify-content:center;
    align-items:center;

19.Promise和 async-await有什么异同点？

Promise和 async-await相同点：
都是优化异步编程体验的解决方案
Promise和 async-await不同点：
promise是应用层的解决方案，它有一个规范，不同的语言也可以实现，它只能异步的处理错误，
在js里它本质是一个对象。
async-await是语言层的解决方案，它可以说是promise的补充，可以让用户像编写同步代码一样
编写异步代码，通过try-catch可以同步地处理错误。
promise更多应用在函数封装中，async用在函数的使用中。
promise本身是同步函数，多个不会等待
async-await用同步的写法使得可读性更强，同时方便try-catch捕获异常，async-await有明确的
前后关系，可读性好。

11.防抖和节流的区别？

防抖：触发高频率事件后n秒内函数只会执行一次，如果nn秒内高频事件再次触发，
则重新计算时间
例子：百度搜索不是每次输入都有联想词弹出，而是输入完之后一段时间才会触发

12.如何防范XSS攻击

ross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，
使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，
进而危害数据安全。

在前端开发中，经常采用的防范方法是：
1.纯前端渲染（使用Vue或者React这样的框架时，采用的正是这样的方法，除SSR）
2.对一定会渲染HTML的位置做前端过滤（eg：富文本功能正是如此）

13.有哪些循环方法；map与filter的区别；some与every的区别

相同点：map()、filter()、some()、every()中都提供一个回调函数，回调函数中有三个参数分别是数组元素，元素索引，
原数组本身，并且这四个方法在使用的过程中都不会改变原数组。
map()
map()方法会遍历自身的所有元素，并且返回一个新的数组，该数组是原本数组中的所有元素都调用一次方法中所提供的
回调函数所处理的结果，map()不修改原数组。
let arr = [1,2,3,4]
let newArr = arr.map(item=>
item * 2
)
console.log(newArr) //[2,4,6,8]

filter()
filter()方法会返回一个新数组，该数组的元素是符合回到函数中筛选条件的结果
filter()为数组中的每个元素调用一次callback函数，并利用所有使用回调函数返回true或等价于true的值
的元素创建一个新数组；如果没有任何的项符合的条件（false），那么filter()方法将返回一个空的数组。
let arr = [11,34,5,9,20]
let newArr = arr.filter(item=>
item >=10
)
console.log(newArr); //[11,34,20]

some()方法会返回一个Boolean类型的值，该值取决了数组中是否有元素满足给定的条件。
let some = [10,20,30,40,50,60]
let newSome = some.some(item =>
item >=50
)
console.log(newSome); // true

every()方法会返回一个Blooean类型的值，该值取决了数组中是否所有的元素满足给定的条件。
let every = [1,8,19,27,36]
let newEvery = every.every(item =>
item <=100
)
console.log(newEvery); // true

14.深拷贝浅拷贝的区别；如何进行深拷贝

javaScript两大数据类型分为基本数据类型和引用数据类型
基本数据类型保存在栈内存中
引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用（也叫做IP地址），存于栈中
浅拷贝
浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝
如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。
即浅拷贝是拷贝一层，深层次的引用类型即共享内存地址。
在JavaScript中，存在浅拷贝现象有：object.assign Array.prototype.slice(),Array.prototype.concat()
使用拓展运算符实现的复制
深拷贝
深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
常见的深拷贝方式有：
_.cloneDeep() jQuery.extend() jQuery.extend() JSON.stringify() 手写循环递归

总结：拷贝类型为引用类型的情况下，浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，
两个对象指向同一个地址。深拷贝是递归拷贝深层次，属性为对象时深拷贝是新开栈，
两个对象指向不同的地址。

15.前端实现动画的7种方式

1.css3的transition属性（指定动画开始和结束状态）
2.animaition可以对动画过程的各个关键帧进行设置
3.原生js动画（通过setTimeout或setInterval方法的回调函数）
4.使用canvas绘制动画（优势是可以应对页面中多个动画元素渲染较慢的情况）
5.SVG动画（SVG是一种基于XML的图像格式）
6.JQuery的animate函数（animate()方法执行css属性集的自定义动画；该方式通过css样式将
元素从一个状态改变为另一个状态）。
7.使用gif图片
总结：代码复杂程度方面 简单动画css简单，复杂动画css代码冗长，js实现起来更优。
运行灵活度，js更灵活，兼容方面，js更好，性能方面css动画更优一些。

16.HTTP 与 HTTPS 有哪些区别？

1.HTTP是超文本传输协议，信息是明文传输，存在安全风险。HTTPS则解决HTTP不安全的缺陷，
在TCP和HTTP网络层之间加入了SSL/TLS安全协议，使得报文能够加密传输。
2.HTTP连接建立相对简单，TCP三次握手之后便可进行HTTP的报文传输。而HTTPS三次握手之后，还需要进行
SSL/TLS的握手过程，才可进入加密报文传输。
3.HTTP的端口号是80，HTTPS的端口是443.
4.HTTPS协议需要向CA（证书权威机构）申请数字证书，来保证服务器的身份是可信的。
HTTPS解决了HTTP的哪些问题？
1.窃听风险，2.篡改问题，3.冒充风险

17.你们是如何加密的？

1.base64

Base64，顾名思义，就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"一共64个字符的字符集，（另加一个“=”，实际是65个字符，至于为什么还会有一个“="，这个后面再说）。任何符号都可以转换成这个字符集中的字符，这个转换过程就叫做base64编码。

<script>

       let str = 'ImGod';

       let str64 = window.btoa(str);

       console.log('转化后：'+str64);

       let jm = window.atob(str64);

       console.log('解码后：'+jm);

    </script>

2.md5

MD5是一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。

MD5.JS是通过前台js加密的方式对密码等私密信息进行加密的工具。

2.1使用方法

1.引入

<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>

2.示例

<script>

// MD5加密方式

// hex_md5(data);//data表示你要加密的数据

let str = 'abc';

let newStr = md5(str);

console.log(newStr);

</script>