JS课程1-

JavaScript是高级的、面向对象的、多范式的编程语言

一、一些基本知识

七种数据类型

number、string、bool、undefined、null、symbol、bigInt（dynamic）

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

• Symbol代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
• BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型（复杂数据类型），他们在内存中的存储方式不同。

• 堆： 存放引用数据类型，引用数据类型占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，如Object、Array、Function。
• 栈： 存放原始数据类型，栈中的简单数据段，占据空间小，属于被频繁使用的数据，如String、Number、Null、Boolean。

const需要初始值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence运算符的优先级

+号和-号会实现自动类型转换：num->string string->num

falsey values：

0，”“，undefined，null，NaN （空对象是真值）

• undefined 代表的含义是未定义，一般变量声明了但还没有定义的时候会返回 undefined，typeof为undefined
• null 代表的含义是空对象，null主要用于赋值给一些可能会返回对象的变量，作为初始化，typeof为object

null == undefined // true null === undefined //false

二、一些基本语法

const x=prompt(“are you a pig？”) 弹窗，用户输入的内容会保留在变量里

unshift在数组前加入数据，后加是push；pop弹出最后的元素，shift弹出最前元素。indexOf：下标，includes：检验是否包含

如何判断是不是数组？

原型链、ES6的isArray、instanceof（判断类型）

this

1、全局上下文中的 this

在全局作用域中，this 指向全局对象：

• 在浏览器中，this 指向 window 对象。
• 在 Node.js 中，this 在模块的顶层上下文中指向 module.exports。

2、函数调用中的 this

当一个普通函数被调用时，this 的值取决于调用该函数的对象：

• 如果函数是在全局上下文中调用，this 指向全局对象（在浏览器中是 window）。
• 如果函数是作为对象的方法调用，this 指向该对象。

trunc函数：取整。Math.trunc(x);

Max、Min

Math.max(…arr); Math.min(…arr);

虽然函数默认不接受数组作为参数，但是可以通过扩展运算符（…）将数组传递给函数

reduce（）

1、计算总和

sum=arrs.reduce((acc，cur)=>acc+cur，0）；

2、计算最大值

max = arrs.reduce((acc, cur) => Math.max(acc, cur),arrs[0]);

concat（）

array1.concat(array2)

array1.concat(array2,array3)

array.concat(num)

arrary.concat(1,[2,3],4)

三、DOM

（1）整体概述

Document Object Model（文档对象类型）是一个编程接口，用于表示和操作HTML或XML文档的内容。通过DOM，开发者可以访问和修改网页的结构、样式和内容。

（2）核心概念

文档（Document）：

• DOM将HTML或XML文档表示为一个树形结构，每个节点代表文档中的一部分（如元素、属性、文本等）。

节点（Node）：

• DOM中的每个元素（<div>、<p>等）、属性（class="example"）和文本（Hello World!）都被视为一个节点。
• 常见的节点类型：
  • 元素节点：如HTML标签 (<div>, <p>, <a> 等)。
  • 属性节点：HTML元素的属性（如 id、class）。
  • 文本节点：元素内的文本。

父节点、子节点和同级节点：

• 父节点（parent node）：包含其他节点的节点。
• 子节点（child node）：被父节点包含的节点。
• 同级节点（sibling node）：同一个父节点的子节点。

（3）访问和修改DOM

1、访问

• document.getElementById()

  根据元素的id获取元素

• document.getElementByClassName()

  根据元素的class获取元素集合

• document.querySelector()

  使用CSS选择语法器获取第一个匹配的元素

• document.querySelectorAll()

  使用CSS选择器语法获取所有匹配的元素。

  byTagName、byName

2、修改

选中元素之后，可以通过innerTHML或textContent修改文本元素的内容，通过value修改表单元素的值，通过style修改内联的样式，通过setAttribute修改元素的属性。

element.setAttribute('class', 'newClass');

3、动态添加和删除元素

• 创建元素：通过createElement（）创建一个新元素，然后使用appendChild添加到文档中。

const newElement = document.createElement("div")
newElement.textContent="this is a newElement"
document.body.appendChild(newElement)

• 删除元素：使用removeChild（）删除元素

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement);

（4）DOM事件

1、onclick

button.onclick = function() { alert('按钮被点击了'); };

2、addEventListener()

比如项目中的一个钩子：监听组件外点击

export function useHandleClickOutside(handler, listenCapturing = true) {
  const ref = useRef();
  useEffect(
    function () {
      function handleClick(e) {
        if (ref.current && !ref.current.contains(e.target)) {
          handler();
        }
      }
      document.addEventListener('click', handleClick, listenCapturing);
      return () =>
        document.removeEventListener('click', handleClick, listenCapturing);
    },
    [handler, listenCapturing]
  );

  return ref;
}

（5）DOM树

DOM树（Document Object Model Tree）是用于表示HTML或XML文档的层次结构的模型。通过DOM树，开发者可以访问和操作文档的结构、样式和内容。DOM树将文档中的每个元素、属性和文本节点都视为一个节点，并组织成树形结构。

1、结构

根节点（Root Node）：

• 在DOM树中，根节点是整个文档的入口。在HTML文档中，根节点是 document，而在XML文档中，根节点通常是文档的根元素。

元素节点（Element Nodes）：

• 每个HTML或XML标签（例如 <div>、<p>、<a> 等）都是一个元素节点。元素节点可以有子节点，形成父子关系。

属性节点（Attribute Nodes）：

• 属性节点是元素节点的属性，例如 id、class 和 src 等。属性节点通常不在树的层次结构中显示，但可以通过DOM API访问。

文本节点（Text Nodes）：

• 文本节点包含元素内的文本内容。每个元素节点的文本内容都是一个文本节点。

2、节点类型

• 文档节点（Document Node）：

根节点，代表整个文档。

• 元素节点（Element Node）：

代表HTML或XML元素。

• 文本节点（Text Node）：

代表元素内的文本内容。

• 属性节点（Attribute Node）（不在树结构中单独表示，但可以访问）：

代表元素的属性。

3、访问

.childNodes：获取所有子节点

.parentNode：获取父节点

.nextSibling：获取下一个兄弟节点

四、Web API

Web API（Web Application Programming Interface，Web应用程序编程接口）是为开发者提供的一组接口，用于通过互联网与服务器或其他网络资源进行交互。Web API允许客户端（如浏览器或移动应用）请求和获取数据或服务，而不直接访问服务器端的实现细节。

（1）浏览器提供的API

这些API是内置于浏览器中的，允许开发者操作浏览器功能和网页内容。它们包括对文档对象模型（DOM）、存储、网络、音频、视频等的访问。

1、DOM API

操作HTML 和CSS的接口，例如getElementById

2、Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

3、LocalStorage 和 SessionStorage

用于在客户端存储数据。

localStorage.setItem('usename','Jonas')
const username=localStorage.getItem('username')

4、Geolocation API

获取用户的地理位置信息。

navigator.getlocation.getCurrentPosition(
	(pos)=>{
		setPostion({
			lat: pos.coords.latitude;
			lng: pos.coords.longitude
		})
	})

（2）服务端API

1、RESTful API

REST（Representational State Transfer）是一种设计Web服务的架构风格，基于HTTP协议，使用常见的HTTP方法如 GET、POST、PUT、DELETE 来进行操作。

2、GraphQL（Apollo）

查询（Query）：请求特定字段，避免获取不必要的数据

{
   user(id: '1') {
      name
      email
   }
}

变更（Mutation）

mutation{
   createUser(name: 'Jonas',email: 'jonas@test.com'){
      id
      name
   }
}

订阅（subscription）、模式：type

优点：

• 灵活的数据获取：

  客户端可以精确请求所需字段，避免多余的数据传输。

• 单一端点：

  所有请求通过单一的API端点进行，简化了网络请求的管理。

• 强类型系统：

  模式提供了清晰的类型定义和文档，增强了API的可维护性。

• 自描述性：

  GraphQL API可以通过 introspection 查询自身的模式，使得开发者可以轻松理解API。

（3）HTTP状态码：

• 200 OK：请求成功。
• 201 Created：资源成功创建。
• 400 Bad Request：请求无效。
• 401 Unauthorized：请求未授权。
• 404 Not Found：请求的资源未找到。
• 500 Internal Server Error：服务器内部错误。