前端必会的基础知识

Ajax、Fetch、Axios三者的区别

三者都用于请求，但是不同维度

Ajax ( Asynchronous Javascript and XML)，一种技术统称
Fetch是一个具体原生的api
Axios，是第三方库

Fetch：
Fetch是浏览器原生api，用于网络请求
和XMLHttpRuquest一个级别
Fetch语法更简洁，易用，支持promise

Axios：
最常用的网络请求lib(随着 Vue火爆起来)
内部可用XMLHttpRequest 和 Fetch 来实现
Axios，第三方库 https://axios-http.com/

节流和防抖

两者有什么区别
分别用于什么场景

防抖

防止抖动，你先抖动，啥时候停了，再执行下一步
例如：一个搜索输入框，等输入停止之后，再触发搜索

function debounce(fn, delay = 200) {
    let timer = null
    return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

节流

节流，节省交互沟通。流，不一定指流量
别急，一个一个来，按照时间节奏来，插队无效
例如：drag或scroll期间触发某个回调，要设置一个时间间隔，拖拽过程中就要有响应

function throttle(fn, delay = 200) {
    let timer = null
    return function () {
        if (timer) return
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

区别：
节流：限制执行频率，有节奏的执行
防抖：限制执行次数，多次密集的触发只执行一次
节流关注‘过程’，防抖关注‘结果’

箭头函数

箭头函数有什么缺点？

没有arguments
无法通过apply、call、bind改变this，this是固定的，指向父节点
某些箭头函数阅读困难

什么时候不能使用箭头函数？

//对象方法
const obj = {
    name: "jack",
    getName: () => {
        console.log(this)//指向window
        return this.name
    }
}
console.log('name', obj.getName())//name 

//原型方法
const obj = { name: "jack" }
obj.__proto__.getName = () => {
    return this.name
}
console.info(obj)
console.log(obj.getName())//空

//构造函数
const Foo = (name,age)=>{
    this.name = name
    this.age = age
}
const f = new Foo('晨晨',23)//Uncaught TypeError: Foo is not a constructor

//动态上下文回调函数
const b1 = document.getElementById('btn1')
b1.addEventListener('click',()=>{
    this.innerHTML = 'CLICJK'
})

vue生命周期和method(本质上是一个对象)

{
    data(){ return { name:"ce"}}
    methods: {
        getName:()=> {// 报错 Cannot read properties of undefined (readingname')return this.name
            return this.name
        }
    }
    mounted:()=>{
        // 报错 Cannot read properties of undefined (reading 'name'!console. log( 'msg",this . name)
        console.log("msg",this.name)
    }
}

注意在class可以用箭头函数

class Foo{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    getName = ()=>{
        return this.name
    }
}
const f =new Foo('Nancy','19')
console.log(f.getName())//Nancy

TCP三次握手和四次挥手

建立TCP连接

先建立连接（确保双方都有收发消息的能力）
再传输内容（如发送给一个get请求）
网络连接是TCP协议，传输内容是HTTP协议

三次握手-建立连接

• client 发包，Server接收。Server：有client要找我
• Server发包，Client接收。Client：Server已经接收到消息
• Client发包，Server接收。Server：Client要准备接收消息了
  

四次挥手-断开连接

• Client发包，Server接收。Server：Client请求结束了
• Server发包，Client接收。Client:Serve已收到，我等待它关闭
• Server发包，Client接收。Client:Server此时可以关闭连接了
• Client发包，Server接收。Server：可以关闭了（然后关闭连接）
  

for…in 和for…of的区别

var arr = [1, 3, 4, 6]
for (var key in arr) {
    console.log(key)//0,1,2,3 都是下标
}

for (let val of arr) {
    console.log(val)//1,3,4,6 都是值
}

适用于不同的数据类型

• 遍历对象：for…in可以for…of不可以
• 遍历Map Set generator：for…in不可以，for…of可以

function* foo(){
    yield 10
    yield 20
    yield 30
}
for(let n of foo()){
    console.log(n)//10 20 30
}

可枚举数据和可迭代

for…in用于可枚举数据，如对象、数组、字符串
for…of用于可迭代数据，如数组、字符串、Map、Set

for await … of有什么作用

for await…of遍历多个promise

function createTime(num){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(num)
        },1000)
    })
}
(async function(){
    var p1 = createTime(100)
    var p2 = createTime(200)
    var p3 = createTime(300)
    var list = [p1,p2,p3]
    for await(let res of list){
        console.log(res)
    }
})()

offsetHeight scrollHeight clientHeight区别

盒子模型

#box{
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin:30px;
    box-sizing:border-box;
}

box-sizing为border-box width就会包含border、padding

计算规则：

• offsetHeight offsetWidth : border + padding + content
• clientHeight clientWidth : padding + content
• scrollHeight scrollWidth:padding +实际内容尺寸（其实就是内容子元素的宽高）

HTMLCollection和NodeList区别

Node和element

• DOM是一棵树，所有节点都是Node
• Node是element的基类
• element是其他HTML元素的基类，如HTMLDivElement
• 

HTMLCollection和NodeList

• HTMLCollection是element的集合
• NodeList是Node集合

<!DOCTYPE HTML> <!-- HTML5标准网页声明 -->
<HTML> <!-- HTML为根标签，代表整个网页 -->

<head> <!-- head为头部标签，一般用来描述文档的各种属性和信息， 包括标题等-->
  <meta charset="UTF-8"> <!-- 设置字符集为utf-8 -->
  <title>my HTML</title> <!-- 设置浏览器的标题 -->
</head>
<style>

</style>
<body> 
  <div id="box">
    <p>我爱</p>
    中华
    <em>啊</em>
  </div>
  <script>
    var ele = document.getElementById('box')
    console.log(ele.children)
    console.log(ele.childNodes)
  </script>
</body>

</HTML>

NodeList包含text和comment节点，HTMLCollection不会
ps：HTMLCollection和NodeList是类数组

js严格模式有什么特点

开启严格模式

特点：

• 全局变量必须声明

'use strict'
n = 10

• 禁止用with

'use strict'
const obj = { a: 1, b: 3 }
with (obj) {//Uncaught SyntaxError: Strict mode code may not include a with statement
    console.log(a, b)
}

• 创建eval作用域
• 禁止this指向window

'use strict'
function fun() {
    console.log('this', this)//undefined
}
fun()

• 函数参数不能重名

'use strict'
function fun(x,x,y){//Uncaught SyntaxError: Duplicate parameter name not allowed in this context
    console.log('this',this)
}
fun(10,20,30)