前端知识点

1.TCP有哪些手段保证可靠交付
TCP提供一种面向连接的、可靠的字节流服务。 面向连接：意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据之前必须先建立一个TCP连接。在一个TCP连接中，仅有两方进行彼此通信。广播和多播不能用于TCP。
TCP通过下列方式来提供可靠性：

应用数据被分割成TCP认为最适合发送的数据块(将数据截断为合理的长度)
发送一个报文段(TCP传递给IP信息的单位)后启动定时器，如果无法及时收到确认，重发报文(超时重发)
收到报文后，推迟几分之一秒发送确认(对于收到的请求，给出确认响应)
提供首部和校验和，校验和出错不确认收到此报文，引发重发校验出包有错，丢弃报文段，不给出响应，TCP发送数据端，超时时会重发数据)
必要情况TCP会对收到的数据重排序，将正确的顺序交给应用层(对失序数据进行重新排序，然后才交给应用层)
接收端会丢弃重复的数据(对于重复数据，能够丢弃重复数据)
本身能做流量控制(TCP可以进行流量控制，防止较快主机致使较慢主机的缓冲区溢出)
引用原文

2.ES6的Set内部实现
Set类就是数据结构中的集合
Set类的基本操作的实现：
function Set(){
    var items = {}
    var length = 0;
    //判断元素是否存在
    this.has = function(val){
        return items.hasOwnProperty(val)
    }
    //增加操作
    this.add = function(val){
        if(!this.has(val)){
            items[val] = val;
            length++;
            return true;
        }
        return false;
    }
    // 删除操作
    this.remove = function(val){
        if(this.has(val)){
            delete items[val]
            length-=1;
            return true;                
        }
        return false;
    }
    // 清除
    this.clear = function(){
        items = {};
        length = 0
        return true
    }
    //获取大小
    this.size = function(){
        return length;
    }
    //获取属性
    this.values = function(){
        return Object.keys(items);
    }
}    
var set = new Set()
set.add(1);set.add(2);set.add(3);set.add('a')        
 
 
求并集：
this.union = function(otherSet){
    var unionSet = new Set();//存放结果
    var values = this.values();
    for(var i = 0;i<values.length;i++){
        unionSet.add(values[i]);                //放入当前集合中的元素
    }
    values = otherSet.values();
    for(var i = 0;i<values.length;i++){
        unionSet.add(values[i])                   //放入另一个集合的元素
    }
    return unionSet;
}
交集：
this.intersection = function(otherSet){
    var intersectionSet = new Set();//存放结果
    var values = this.values();
    for(var i = 0;i<values.length;i++){
        if(otherSet.has(values[i])){             //只放入两个集合共有的元素
            intersectionSet.add(values[i])
        }
    }
    return intersectionSet;
}
差集：
 this.difference = function(otherSet){
    var differenceSet = new Set();//存放结果
    var values = this.values();
    for(var i = 0;i<values.length;i++){
        if(!otherSet.has(values[i])){          //只放入集合otherSet中没有的
            differenceSet.add(values[i])
        }
    }
    return differenceSet;
}
3.webpack loader和plugin编写
原文连接

webpack原理
4.Promise内部实现原理
5.Vue3 proxy解决了哪些问题
利用 Proxy 手动实现一个极其简单数据的双向绑定（Object.defineProperty() 的实现方式

页面结构如下：
<!--html-->
<div id="app">
    <h3 id="paragraph"></h3>
    <input type="text" id="input"/>
</div>
主要还是得看逻辑部分：
//获取段落的节点
const paragraph = document.getElementById('paragraph');
//获取输入框节点
const input = document.getElementById('input');
    
//需要代理的数据对象
const data = {
    text: 'hello world'
}
 
const handler = {
    //监控 data 中的 text 属性变化
    set: function (target, prop, value) {
        if ( prop === 'text' ) {
                //更新值
                target[prop] = value;
                //更新视图
                paragraph.innerHTML = value;
                input.value = value;
                return true;
        } else {
            return false;
        }
    }
}
 
//添加input监听事件
input.addEventListener('input', function (e) {
    myText.text = e.target.value;   //更新 myText 的值
}, false)
 
//构造 proxy 对象
const myText = new Proxy(data,handler);
 
//初始化值
myText.text = data.text;    
上述我们通过Proxy 创建了 myText 实例，通过拦截 myText 中 text 属性 set 方法，来更新视图变化，实现了一个极为简单的 双向数据绑定~

6.实现filter或手写reduce
//这里提供一个filter的写法
Array.prototype.filters = function filter(callback){
    var arr = this;
    var filterArr = [];
    for(var i = 0,len = arr.length;i < len; i ++){
        if(callback(i,arr[i],arr)){
            filterArr.push(arr[i]);
        }
    }
    return filterArr;
}
 
function callback(index,item,arr){
    return item > 5;
}
 
 
 
[1,2,3,4,78].filters(callback)
 
7.webpack介绍
构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

1.代码转换：TypeScript 编译成 JavaScript、SCSS或Less 编译成 CSS 等。
2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3.代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4.模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器,nodemon。
6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力,更加方便了我们的开发

8.浅谈session,cookie,token,webStorage区别
session
session的中文翻译是“会话”，当用户打开某个web应用时，便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候session会丢失。

cookie
cookie是保存在本地终端的数据。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的cookie数量是有限的。

token
token的意思是“令牌”，是用户身份的验证方式，最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接token请求服务器)。还可以把不变的参数也放进token，避免多次查库。

WebStorage
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：一是提供一种在cookie之外存储会话数据的路径。二是提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

区别分析

cookie与session 的区别

cookie和session都是用来跟踪浏览器用户身份的会话方式。

cookie保存在浏览器端，session保存在服务器端

单个cookie保存的数据不能超过4kb；session大小没有限制。

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

token 和session 的区别

session 和 token并不矛盾，作为身份认证 token安全性比session好，因为每个请求都有签名还能防止监听以及重放攻击，而session就必须靠链路层来保障通讯安全了。如上所说，如果你需要实现有状态的会话，仍然可以增加session来在服务器端保存一些状态

Session 是一种HTTP存储机制，目的是为无状态的HTTP提供的持久机制。所谓Session 认证只是简单的把User 信息存储到Session 里，因为SID 的不可预测性，暂且认为是安全的。这是一种认证手段。 而Token ，如果指的是OAuth Token 或类似的机制的话，提供的是 认证 和 授权 ，认证是针对用户，授权是针对App 。

token就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件；cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名；session和cookie差不多，只是session是写在服务器端的文件，也需要在客户端写入cookie文件，但是文件里是你的浏览器编号.Session的状态是存储在服务器端，客户端只有session id；而Token的状态是存储在客户端。

localStorage（本地存储）和sessionStorage（会话存储）

localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

WebStorage的优点：

存储空间更大：cookie为4KB，而WebStorage是5MB；

节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) —— 保存数据，以键值对的方式储存信息。

getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) —— 删除单个数据，根据键值移除对应的信息。

clear () —— 删除所有的数据

key (index) ——

9.compose函数
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
 
  if (funcs.length === 1) {
    return funcs[0]
  }
 
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
 
 
function fristName(name){
    return name.split(' ')[0]
}
function upperCase(string){
    return string.toUpperCase()
}
function reverse(string){
    return string.split('').reverse().join('')
}
 
console.log(compose(fristName,upperCase,reverse)('xiao li')) // OAIX
10 找出最接近的值
尽量不使用 JS 特有的语法糖，尽量不使用如 Array.sort 等语言特有的方法。*/
const arr2 = [1, 5, 9, 15, 28, 33, 55, 78, 99];

/**
 * 返回最接近输入值的数字，如果有多个，返回最大的那个
 * @param {number} n
 * @return {number}
 */
function findNext(n, arr) {
  // your code here...
}
console.log(findNext(1, arr2)); // should print 1
console.log(findNext(44, arr2)); // should print 55
console.log(findNext(6, arr2)); // should print 5
console.log(findNext(7, arr2)); // should print 9
console.log(findNext(8, arr2)); // should print 9
 
const arr2 = [1, 5, 9, 15, 28, 33, 55, 78, 99];
function findNext(n, arr) {
    var result;
    if(Array.isArray(arr)){
        var len = arr.length;
        for(var i = 0; i < len; i++){
            for(var j = 0; i < len - 1 - i; i++){
                if(arr[j] > arr[j+1]) {//相邻元素两两对比
                    var temp = arr[j+1];//元素交换
                    arr[j+1] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        //冒泡数组排序  
        let arr2 = [...arr];
        //考虑输入的值小于数组最小值    或者  大雨最大值的边界情况
        if(n<=arr2[0]) {
            result = arr2[0];
        }else if(arr2[arr2.length-1]<=n) {
            result = arr2[arr2.length-1]
        }else {
            for(let i=0;i<arr2.length;i++) {
                if(arr2[i]<n && arr2[i+1]>n) {
                    if((arr[i+1]-n) >(n-arr[i])){
                        result= arr2[i]
                    }else {
                        result= arr2[i+1]
                    }
                }
            }
        }
       return result;
    }
}
console.log(findNext(1, arr2)); // should print 1
console.log(findNext(44, arr2)); // should print 55
console.log(findNext(6, arr2)); // should print 5
console.log(findNext(7, arr2)); // should print 9
console.log(findNext(8, arr2)); // should print 9
console.log(findNext(0, arr2)); // should print 1
console.log(findNext(5000, arr2)); // should print 1
 
11.选择器考察
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
    </style>
</head>
<body>
<!--题目说明-->
<!--将children下，第3个div子元素，背景颜色置为红色-->
<!--将children下，第2个子元素，文字颜色置为蓝色-->
<!--将children下，lang属性包含bcd，文字颜色置为绿色-->
<div>
    <div class="children">
        <div>test</div>
        <p >test</p>
        <div>test</div>
        <p>test</p>
        <div lang="abc">test</div>
        <div lang="abcd">test</div>
        <div>test</div>
        <div>test</div>
    </div>
</div>
</body>
</html>