前端总结之javaScript这里对于一些常用的javaScript进行一个总结。毕竟是2024刚开年吗，一切都是全新的

这里对于一些常用的javaScript进行一个总结。毕竟是2024刚开年吗，一切都是全新的开始。在这个文章的开头，也希望能看到这篇文章的人，在美好的2024年，都能心想事成，得偿所愿。虽然前端的框架一直在更新迭代的很快，但是javaScript一直是考察的底层，也是最需要掌握的基础。所谓房子要建的好，那么底层的架子一定要搭的好搭的稳。下面就总结一些常用的一些javaScript的知识点了。

javaScript分为dom, bom, ECMAScript,那么第一节就先讲一下dom和bom吧，毕竟dom和bom的内容比较少，大部分的知识点都是es的内容

然后就是阮一峰的文档写的真的超级好，建议多看几遍深入了解一下，这里贴一下文档地址：es6.ruanyifeng.com/ （之前不知道咋回事一直搜不到这个地址，还以为文档被官方删除了呢，和我的小伙伴提了一嘴，后面她就又找到了哈哈）

1.dom(文档对象类型)

访问HTML元素：使用DOM，可以访问和操作HTML页面上的所有元素，包括它们的属性和内容。
修改内容和样式：通过DOM，可以改变HTML元素的内容、样式和类名，从而改变页面的外观和用户体验。
处理事件：DOM允许你为HTML元素添加事件监听器，如点击、鼠标移动等，使得页面可以响应用户的操作。
添加或删除元素：可以在DOM中动态地创建新的HTML元素，或者移除现有的元素，实现页面内容的动态更新。
异步操作：使用JS Async DOM方法，可以在不阻塞主线程的情况下进行DOM操作，提高页面性能。
遍历和查找元素：DOM提供了多种方法来遍历文档树结构，查找特定的HTML元素，以便进行进一步的操作。
兼容性处理：在不同的浏览器中，DOM的行为可能会有所不同，因此在使用DOM时需要注意浏览器兼容性问题。

2.bom（浏览器对象类型）

独立于内容：BOM提供了与浏览器窗口进行交互的对象，这些对象独立于网页内容之外。
浏览器窗口管理：BOM主要用于管理浏览器窗口和子窗口之间的通讯，包括弹出新窗口、操作滚动条等。
浏览器特定功能：BOM允许开发者利用特定于浏览器的扩展功能，如获取浏览器版本信息、操作地址栏等。
全局作用域：在JavaScript中，全局变量和函数实际上都是window对象的属性和方法。
缺乏标准：与DOM不同，BOM并没有一个统一的标准化组织来制定标准，其实现在不同浏览器之间可能存在差异。
访问浏览器信息：通过BOM，可以获取浏览器窗口的尺寸，包括宽度和高度（包含滚动条）。
导航操作：BOM还可以用来控制页面跳转，获取当前URL等信息。

3.javaScript的数据类型

js数据类型有： null, undefined, string, number, boolean, object, symbol，bigInt

可以分为原始数据类型和引用数据类型，object为引用数据类型，以堆的形式存放于内存中。

如何检查区分这些类型：

typeof：缺点是很多类型都会被识别为object类型，不能很好的区分object类型

instanceof: 运行机制是在其原型链中是否能找到该原型，缺点是只能判断引用类型，无法判断基础类型。

Object.prototype.toString.call(): 返回的类型为【Object xxx】

4.深拷贝与浅拷贝

浅拷贝：

扩展运算符

object.assign()

如何实现深拷贝？

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  let copy = Array.isArray(obj) ? [] : {};
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  
  return copy;
}

5. new操作符实现原理

创建一个新对象
将对象的proto属性指向构造函数的prototype属性
将构造函数的this指向新对象
返回这个新对象

6.map, weakMap, set, weakSet

map与object的区别：

object的健只能为string类型，map的健可以为任何类型。
object没有iterable对象，所以得以其他方式来进行迭代，，map有iterable对象，所以可以直接进行迭代。
map对于频繁的增删改查性能更好

map与weakMap的区别：

weakMap只接受object类型作为他的key
weakMap的引用是弱引用类型，他的健名所指向的对象不计入垃圾回收机制

set：

数组去重通过set的方式：

[...new Set(array)]

set是一种新的数据结构，类似于数组，所有成员都是唯一的。Array.from()方法可以将 Set 结构转为数组。

7.ajax与axios

如何创建一个ajax请求？

先创建一个xhr对象
通过open方法发送请求
接受请求返回的内容进行判断封装

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", url, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  // 当请求成功时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置请求失败时的监听函数
xhr.onerror = function() {
  console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 请求
xhr.send(null);

ajax需要自己编写发送请求的步骤，axios在ajax的基础上进行了封装和优化，使得运用起来更加方便

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

8.promise

promise是一个异步编程的解决方案。

promise的特点：

对象的状态不受外部影响，只有异步操作的结果可以决定当前的状态，其他外部的操作无法更改promise的状态。
一旦改变后就不能再次改变，状态只能从pending转换为resolved,rejected,且改变后就定型，不会再次发生改变。

promise的缺点：

无法取消promise,一旦建立就会立即执行，中途不可取消
在内部抛出的错误，无法自行抛出，需通过回调函数进行捕捉
当当前处于pending状态时，无法监听到具体状态（刚刚开始还是即将完成）

其实重点内容还有很多，先写到这里，等到后续再补充吧。。