JavaScript - Api学习 Day03 （日期对象、节点操作、两种定时器、本地存储）

文章目录

• 一、日期对象
• • [1.1 实例化](#1.1 实例化)
  • [1.2 日期对象方法](#1.2 日期对象方法)
• 二、节点操作
• • [2.1 父子兄弟节点](#2.1 父子兄弟节点)
  • • [1. 父节点查找](#1. 父节点查找)
    • [2. 子节点查找](#2. 子节点查找)
    • [3. 兄弟关系查找](#3. 兄弟关系查找)
  • [2.2 增删节点](#2.2 增删节点)
  • • [1. 创建节点 - `createElement`](#1. 创建节点 - createElement)
    • [2. 添加节点](#2. 添加节点)
    • • [2.1 `appendChild()` 方法](#2.1 appendChild() 方法)
      • [2.2 `insertBefore()` 方法](#2.2 insertBefore() 方法)
      • [2.3. 克隆节点 - `cloneNode`](#2.3. 克隆节点 - cloneNode)
    • [3. 删除节点](#3. 删除节点)
    • • [3.1 `removeChild()` 方法](#3.1 removeChild() 方法)
      • [3.2 `remove()` 方法](#3.2 remove() 方法)
    • [4. 替换节点](#4. 替换节点)
    • • [`replaceChild()` 方法](#replaceChild() 方法)
• 三、其他
• • [3.1 定时器 的对比](#3.1 定时器 的对比)
  • • 延时函数（setTimeout）
    • 间歇函数（setInterval）
  • [3.2 Js执行机制](#3.2 Js执行机制)
• 四、本地存储
• • [4.1 localStorage](#4.1 localStorage)
  • [4.2 存储分类sessionStorage](#4.2 存储分类sessionStorage)
  • [4.3 区别：](#4.3 区别：)
  • [4.4 存储复杂数据类型到localStorage](#4.4 存储复杂数据类型到localStorage)
  • • 字符串拼接

一、日期对象

1.1 实例化

// 创建一个全局的日期格式化器
const globalFormatter = new Intl.DateTimeFormat('zh-CN', {
    // locale: 指定语言环境，这里是中文（中国）
    // 用于确定日期和时间的显示格式以及使用的日历系统。

    // options: 配置选项对象，用于指定日期和时间的格式化细节

        // timeZone: 指定时区，这里是东八区（上海）
        // 用于确定日期和时间的时区。
        timeZone: 'Asia/Shanghai',

        // year: 年份的显示方式
        // 'numeric': 显示完整的年份数字，例如 2023
        // '2-digit': 显示两位数的年份，例如 23
        year: 'numeric',

        // month: 月份的显示方式
        // 'numeric': 显示数字，例如 5
        // '2-digit': 显示两位数的数字，例如 05
        // 'long': 显示完整月份名称，例如 五月
        // 'short': 显示缩写的月份名称，例如 五月
        // 'narrow': 显示最短的月份名称，例如 5月
        month: '2-digit',

        // day: 日的显示方式
        // 'numeric': 显示数字，例如 20
        // '2-digit': 显示两位数的数字，例如 20
        day: '2-digit',

        // hour: 小时的显示方式
        // 'numeric': 显示数字，例如 14
        // '2-digit': 显示两位数的数字，例如 14
        hour: '2-digit',

        // minute: 分钟的显示方式
        // 'numeric': 显示数字，例如 30
        // '2-digit': 显示两位数的数字，例如 30
        minute: '2-digit',

        // second: 秒的显示方式
        // 'numeric': 显示数字，例如 45
        // '2-digit': 显示两位数的数字，例如 45
        second: '2-digit'
    
});

// 使用全局日期格式化器
function formatDateTime(date) {
    // 使用 globalFormatter 格式化传入的 date 参数
    // 返回格式化后的日期和时间字符串
    return globalFormatter.format(date);
}

1.2 日期对象方法

时间戳是一个特定的时间，通常以数字表示，用于标记事件发生的确切时间。在计算机科学中，时间戳通常是一个数字，表示从某个特定时间点（如1970年1月1日）到当前时间的毫秒数或秒数。时间戳在记录事件顺序、计算时间间隔和跟踪时间相关数据时非常有用。

二、节点操作

2.1 父子兄弟节点

node.parentNode: 获取当前节点的父节点。
node.childNodes: 获取当前节点的所有子节点。
node.firstChild: 获取当前节点的第一个子节点。
node.lastChild: 获取当前节点的最后一个子节点。
node.previousSibling: 获取当前节点的前一个兄弟节点。
node.nextSibling: 获取当前节点的下一个兄弟节点。

你描述了如何在DOM中通过父节点、子节点以及兄弟节点来查找和操作节点。下面我将详细解释这些属性和它们的用法。

1. 父节点查找

• parentNode 属性

  • 用于获取当前节点的父节点。
  • 如果当前节点没有父节点（比如根节点），则返回null。

  const child = document.getElementById('child');
  const parent = child.parentNode; // 获取父节点

2. 子节点查找

• childNodes 属性

  • 返回一个包含所有子节点的NodeList，包括元素节点、文本节点（如空格、换行）和注释节点。
  • NodeList是一个类数组对象，可以通过索引访问，但它不是一个真正的数组。

  const parent = document.getElementById('parent');
  const allChildren = parent.childNodes; // 获取所有子节点，包括文本和注释节点

• children 属性（重点）

  • 返回一个包含所有子元素节点的HTMLCollection，不包括文本节点、注释节点等。
  • HTMLCollection是一个类数组对象，可以通过索引访问。

  const parent = document.getElementById('parent');
  const elementChildren = parent.children; // 获取所有元素节点

3. 兄弟关系查找

• 下一个兄弟节点

  • nextElementSibling 属性
    • 用于获取当前节点的下一个兄弟元素节点（即下一个同级元素节点），如果没有则返回null。

  const current = document.getElementById('current');
  const nextSibling = current.nextElementSibling; // 获取下一个兄弟元素节点

• 上一个兄弟节点

  • previousElementSibling 属性
    • 用于获取当前节点的上一个兄弟元素节点（即上一个同级元素节点），如果没有则返回null。

  const current = document.getElementById('current');
  const previousSibling = current.previousElementSibling; // 获取上一个兄弟元素节点

2.2 增删节点

当然，下面是按照从创建开始到增删的顺序，重新整理的内容：

1. 创建节点 - createElement

• 功能 : createElement 用于创建指定标签名称的 HTML 元素节点。

const newElement = document.createElement(tagName);

• 参数 :
  • tagName: 字符串，表示要创建的元素的标签名称（例如 div, span, p 等）。

2. 添加节点

2.1 appendChild() 方法

• 功能: 将一个节点添加为指定父节点的最后一个子节点。

parentNode.appendChild(newNode);

2.2 insertBefore() 方法

• 功能: 在指定的参考节点之前插入一个新的节点。

parentNode.insertBefore(newNode, referenceNode);

2.3. 克隆节点 - cloneNode

• 功能 : cloneNode 用于克隆一个节点，可以选择是否深度克隆（包括其子节点）。

const clonedNode = originalNode.cloneNode(deep);

• 参数 :
  • deep: 布尔值，表示是否进行深度克隆。如果为 true，则克隆节点及其所有子节点；如果为 false，则只克隆节点本身，不包括子节点。默认false

3. 删除节点

3.1 removeChild() 方法

• 功能: 从父节点中移除一个子节点，并返回被移除的节点。

parentNode.removeChild(childNode);

3.2 remove() 方法

• 功能: 直接删除节点本身。

element.remove();

4. 替换节点

replaceChild() 方法

• 功能: 用一个新的节点替换一个子节点，并返回被替换的节点。

parentNode.replaceChild(newNode, oldNode);

三、其他

3.1 定时器 的对比

延时函数（setTimeout）用于在指定的时间后执行一次函数，而间歇函数（setInterval）用于每隔一定时间重复执行函数。

延时函数（setTimeout）

• 函数语法 ：setTimeout(function, delay)
• 介绍 ：setTimeout 函数会在指定的延迟时间后执行一次指定的函数。
• 例子：

setTimeout(function() {
    console.log('延时函数执行了！');
}, 2000);

间歇函数（setInterval）

• 函数语法 ：setInterval(function, delay)
• 介绍 ：setInterval 函数会每隔指定的时间重复执行指定的函数。
• 例子：

setInterval(function() {
    console.log('间歇函数执行了！');
}, 1000);

3.2 Js执行机制

JavaScript的执行机制是单线程的，采用的是事件循环模型。

代码执行时，会被分为同步任务和异步任务，同步任务会按顺序执行，而异步任务会被放入任务队列中，在主线程空闲时才会被执行。事件循环会不断地从任务队列中取出任务执行，这样就实现了异步操作。

同步任务是按照代码顺序依次执行，执行完一个才能执行下一个，会阻塞后续代码的执行；

// 同步任务示例
console.log("Start");
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.log("End");

异步任务不会等待，会先继续执行后续代码，当异步任务完成后会通过回调函数或者Promise来通知执行结果。这样可以提高程序的性能和响应速度。

// 异步任务示例
console.log("Start");
setTimeout(() => {
    console.log("Async task completed");
}, 2000);
console.log("End");

执行栈（call stack）是用来存储代码执行过程中的上下文和调用关系的数据结构，遵循先进后出的原则。任务队列（task queue）则用来存储异步任务的回调函数。事件循环会不断地将任务队列中的任务取出，放入执行栈中执行，这样实现了异步任务的执行。

四、本地存储

4.1 localStorage

// 存储数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据
const data = localStorage.getItem('key');

// 删除localStorage中的数据
localStorage.removeItem('key');

// 清空localStorage
localStorage.clear();

4.2 存储分类sessionStorage

// 存储数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
const data = sessionStorage.getItem('key');

// 删除sessionStorage中的数据
sessionStorage.removeItem('key');

// 清空sessionStorage
sessionStorage.clear();

4.3 区别：

• 作用域：localStorage的数据在浏览器关闭后仍然存在，而sessionStorage的数据在当前会话结束（关闭标签页或浏览器）时会被清除。
• 存储大小：localStorage的存储容量较大，一般为5MB，而sessionStorage的容量较小，一般为5MB。
• 共享性：localStorage的数据在同一域名下的不同窗口、标签页之间共享，而sessionStorage的数据只在同一标签页下共享。
• 生命周期：localStorage的数据不会过期，除非手动删除，而sessionStorage的数据在会话结束时自动删除。
• 用途：localStorage适合长期存储，sessionStorage适合临时存储会话数据。

4.4 存储复杂数据类型到localStorage

1. 将复杂数据类型（如对象）转换为JSON字符串：使用JSON.stringify()方法将对象转换为字符串库存储在本地。
2. 将JSON字符串存储到localStorage中：使用localStorage.setItem()方法将JSON字符串存储在localStorage中，以指定的键名作为标识。
3. 从localStorage获取数据：使用localStorage.getItem()方法获取存储在localStorage中的JSON字符串。
4. 解析JSON字符串为复杂数据类型：使用JSON.parse()方法将获取的JSON字符串解析为原始的复杂数据类型，如对象或数组。

// 存储复杂数据类型到localStorage（需要先将对象转换为JSON字符串）
const complexObject = { name: 'Alice', age: 30 };
localStorage.setItem('complexData', JSON.stringify(complexObject));

// 从localStorage获取并解析复杂数据类型
const storedData = localStorage.getItem('complexData');
const parsedData = JSON.parse(storedData);
console.log(parsedData);

字符串拼接

通过map方法，我们将数组中的每个数字转换为字符串形式，得到一个新的字符串数组stringArray。然后，我们使用join方法将这个字符串数组中的元素用指定的分隔符（这里是-）连接起来，得到最终的拼接字符串result。

// 使用map和join方法实现字符串拼接
const array = [1, 2, 3, 4, 5];

// 使用map方法将数组元素转换为字符串
const stringArray = array.map(num => num.toString());

// 使用join方法将字符串数组连接成一个字符串
const result = stringArray.join('-');

console.log(result); // 输出: "1-2-3-4-5"