前端知识 梳理

1. ajax 的五个步骤

1.建立xmlHttpRequest对象

if ( window.XMLHttpRequest ) {

    xmlHttp = new XMLHttpRequest();

    if( xmlHttp.overrideMimeType ) {

        xmlHttp.overrideMimeType("text/xml");

    }

} else if ( window.ActiveXobject ) {

    var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

    for (var i = 0; i < activeName.length; i++) {

        try {

            xmlHttp = new ActiveXobject(activeName[i]);

            break;

        } catch(e) {}

    }

}

if (!xmlHttp) {

    alert("创建xmlhttprequest对象失败");

} else {}

2.设置回调函数

   xmlHttp.onreadystatechange = callback;

   function callback(){}

3.使用OPEN方法与服务器建立连接 xmlHttp.open("get","ajax?name="+ name,true)
此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4.向服务器端发送数据
xmlHttp.send(null);

如果是POST方式就不为空

5.在回调函数中针对不同的响应状态进行处理

  if (xmlHttp.readyState == 4){       //判断交互是否成功

      if (xmlHttp.status == 200){         //获取服务器返回的数据         //获取纯文本数据

            var responseText =xmlHttp.responseText;

           document.getElementById("info").innerHTML = responseText;

      }

   }

2. 点击a标签后的步骤

1. 检查a标签里的URL是否为空。
2. 浏览器检查缓存，如果请求对象存在缓存并且能够被使用，直接跳到第9步。
3. 浏览器询问操作系统提供服务器的IP地址。
4. 操作系统进行DNS查看并将IP地址回复给到浏览器。
5. 浏览器打开到服务器的TCP连接（对于HTTPS这个步骤要复杂得多）。
6. 浏览器通过TCP连接发送HTTP请求。
7. 浏览器接收到HTTP响应，且可以关闭TCP连接，或者将其重新用于其他请求
8. 浏览器检查响应是否是重定向（3xx结果状态代码）、授权请求（401）、错误（4xx和5xx）等；这些处理方式与正常响应（2xx）不同。
9. 如果可缓存，则响应存储在缓存中
10. 浏览器解码响应（例如，如果它是gzipped）
11. 浏览器决定如何处理响应（例如，它是一个HTML页面，一个图像，还是一个声音剪辑？）
12. 浏览器呈现响应，或为无法识别的类型提供下载对话框

3. 扩展运算符（spread）是三个点（...）

console.log(...[1,2,3])
// 1 2 3

Math.max(...[14, 3, 77])
//获得元素最大值，简化代码

4. Array.from把类似数组的对象的值转化数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

5.数组实例的 flat()，flatMap()

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

6.数组去重用Set

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]