从零开始学习 JS APL（五）：完整指南和实例解析

目录

学习目标：

学习内容：

学习时间：

学习内容：

Window对象：

定时器-延时函数：

JS 执行机制：

location对象：

本地存储：

本地存储分类- localStorage：

 存储复杂数据类型：

综合案例：

​编辑

数组中map方法：

数组中join方法：

学习目标：

依托 BOM 对象实现对历史、地址、浏览器信息的操作或获取
具备利用本地存储实现学生信息表案例的能

学习内容：

Window对象
本地存储
综合案例

学习时间：

  • 周一至周五晚上 7 点—晚上9点
  • 周六上午 9 点-上午 11 点
  • 周日下午 3 点-下午 6 点

学习内容：

Window对象：

BOM(Browser Object Model ) 是浏览器对象模型


window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

  1. window.alert()：显示一个警告框，带有一条指定的消息和一个确认按钮。
  2. window.prompt()：显示一个提示框，带有一条指定的消息、一个文本输入域和一个确认按钮。
  3. window.confirm()：显示一个确认框，带有一条指定的消息、一个确认按钮和一个取消按钮。
  4. window.open()：打开一个新的浏览器窗口或标签页。
  5. window.close()：关闭当前的浏览器窗口或标签页。
  6. window.location：表示当前窗口的URL地址，可以用来获取或设置当前页面的URL。

定时器-延时函数：

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：


setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数：


注意点
延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器

需要注意的是，setTimeout()和setInterval()函数返回的是一个计时器ID，可以通过clearTimeout()和clearInterval()函数来清除对应的计时器。例如：

let timerId = setTimeout(function() {
  console.log("Hello World!");
}, 3000);

clearTimeout(timerId);  // 清除计时器

案例 5秒钟之后消失的广告
需求：5秒钟之后，广告自动消失
分析：
①：设置延时函数
②：隐藏元素
 

JS 执行机制：

JavaScript是一种单线程的语言，即在同一时间只能执行一个任务。但是，JS可以通过事件循环机制来实现异步执行。

事件循环机制是JS引擎实现异步执行的核心特性。当JS代码执行遇到一个异步任务时，它会将该任务添加到执行栈以外的任务队列中。例如，在执行一段ajax请求的代码时，JS并不会一直等待请求完成再往下执行，而是会将请求任务放到任务队列中，继续执行后续代码。

当执行栈中的代码执行完毕时，JS会从任务队列中取出一个任务，放到执行栈中执行。这个过程不断重复，直到任务队列为空。

在JS中，任务队列分为宏任务（macro task）和微任务（micro task）两种。宏任务通常包括DOM事件、setTimeout和setInterval等，而微任务通常包括Promise、MutationObserver等。在执行完一个宏任务之后，JS会立即执行所有微任务队列中的任务，然后再从宏任务队列中取出下一个任务。

这个过程中，如果遇到同步任务，则会直接执行，不会添加到任务队列中。由于JS是单线程的，因此同一时间只能执行一个任务，异步任务的回调函数会在任务队列中等待执行机会。

思考：

console.log(1)
document.addEventListener('click', function () {
console.log(4)
})
console.log(2)
setTimeout(function () {
console.log(3)
}, 3000)

location对象：

JavaScript中的location对象用于获取当前窗口的URL信息，以及跳转到其他页面等操作。

以下是location对象的一些属性和方法：

  • location.href：获取或设置当前页面URL。

  • location.protocol：获取或设置当前页面使用的协议，如http、https等。

  • location.hostname：获取当前页面的主机名。

  • location.pathname：获取当前页面的路径名。

  • location.search：获取当前页面URL中的查询字符串部分，以?开始。

  • location.hash：获取当前页面URL中的哈希部分，以#开始。

  • location.reload()：重新加载当前页面。

  • location.replace(url)：用指定的URL替换当前页面，不会在浏览器中留下历史记录。

  • location.assign(url)：用指定的URL加载页面，会在浏览器中留下历史记录。

通过检查location对象的属性和使用其方法，可以获取和修改当前页面的URL信息，实现页面跳转和刷新等操作。

本地存储：

本地存储介绍
以前我们页面写的数据一刷新页面就没有了，是不是？
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常
性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右
常见的使用场景：https://todomvc.com/examples/vanilla-es6/页面刷新数据不丢失

本地存储分类- localStorage：

目标： 能够使用localStorage 把数据存储的浏览器中
l 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
l 特性：
Ø 可以多窗口（页面）共享（同一浏览器可以共享）
Ø 以键值对的形式存储使用

本地存储分类- localStorage
l 语法:         
localStorage.setItem(key, value)
存储数据：
localStorage.getItem(key)
获取数据：
localStorage.removeItem(key)
删除数据：


 存储复杂数据类型：

JavaScript中有多种存储复杂数据类型的方法，包括：

  1. JSON.stringify和JSON.parse方法

可以使用JSON.stringify方法将一个Javascript对象转换为JSON字符串，然后将该字符串存储在本地存储或服务器上。同样地，可以使用JSON.parse方法将JSON字符串转换回一个Javascript对象。

例如，将一个对象存储在本地存储中：

const obj = {
  name: 'John',
  age: 30
};
localStorage.setItem('myObj', JSON.stringify(obj));

然后可以在需要的时候将其取回：

const storedObj = localStorage.getItem('myObj');
const parsedObj = JSON.parse(storedObj);
console.log(parsedObj.name); // "John"

  1. 使用IndexedDB

IndexedDB是一个浏览器内置的数据库，可以用来存储大量的结构化数据，包括复杂数据类型。

例如，使用IndexedDB存储一个对象：

const request = window.indexedDB.open('myDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myStore'], 'readwrite');
  const store = transaction.objectStore('myStore');
  
  const myObj = {
    name: 'John',
    age: 30
  };
  
  const request = store.put(myObj, 1);
  
  request.onsuccess = function() {
    console.log('Data saved successfully');
  };
  
  request.onerror = function() {
    console.log('Error: Data not saved');
  };
};

这将存储一个名为"myObj"的对象，可以在需要的时候取回。

  1. 使用Cookies

可以使用Cookies来存储复杂数据类型，但是需要将其转换为字符串格式，并考虑限制存储大小的问题。

例如，将一个对象存储在Cookie中：

const obj = {
  name: 'John',
  age: 30
};

document.cookie = 'myObj=' + JSON.stringify(obj) + '; max-age=3600';

然后可以在需要的时候取回：

const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
  const cookie = cookies[i].trim();
  
  if (cookie.startsWith('myObj=')) {
    const storedObj = cookie.substring(6);
    const parsedObj = JSON.parse(storedObj);
    console.log(parsedObj.name); // "John"
  }
}

这些方法都可以用来存储复杂数据类型，具体使用哪种方法取决于具体应用场景和需求。

综合案例：

需求： 录入学生信息，页面刷新数据不丢失
模块分析：
①：新增模块， 输入学生信息，数据会存储到本地存储中
②：渲染模块，数据会渲染到页面中
③：删除模块，点击删除按钮，会删除对应的数据

学生就业信息表
需求： 录入学生信息，页面刷新数据不丢失
思路分析：
①：因为页面刷新不丢失数据，所以可能存在已有数据，所以第一步，我们先找本地存储里面查找是
否有数据，如果有数据先进行渲染页面，如果没有数据，我们放一个空数组，用来存放数据
②：渲染模块，数据会渲染到页面中
③：新增模块， 输入学生信息，数据会存储到本地存储中，然后渲染页面
④：删除模块，点击删除按钮，会删除对应的数据，然后渲染页面
 

数组中map方法：
 

JavaScript中数组的map方法是一个高阶函数，接收一个回调函数作为参数，返回一个新的数组，数组中的每个元素都是原始数组中对应元素的处理结果。map方法不会修改原始数组。

map方法的语法如下：

array.map(function(currentValue, index, array) {
  // 对当前元素进行处理
  return processedValue;
});

参数说明：

  • currentValue：当前元素的值。
  • index：当前元素在数组中的索引。
  • array：原始数组。

例如，对一个数组中的元素进行平方操作：

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function(num) {
  return num * num;
});

console.log(squares); // [1, 4, 9, 16, 25]

上述代码中，map方法接收一个回调函数，该函数接收一个参数num，表示当前元素的值。回调函数返回num * num，即对当前元素进行平方操作，并将处理结果存储在新的数组squares中。

另外，ES6中的箭头函数可以简化map方法的写法：

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9, 16, 25]

箭头函数的写法更加简洁，但是需要注意箭头函数和普通函数的语法区别。

数组中join方法：

在 JavaScript 中，数组的 join() 方法可以将数组中所有的元素转成字符串，并将其连接起来返回一个字符串。该方法可以接收一个可选参数作为分隔符，用于指定每个元素之间的分隔符。

join() 方法没有改变原始数组，而是返回了一个新的字符串。

下面是 join() 方法的语法：

array.join(separator)

其中：

  • array：必需。要操作的数组。
  • separator：可选。指定分隔符。默认使用逗号 "," 分隔元素。

例如：

const arr = ["apple", "banana", "orange"];

// 使用默认的分隔符连接数组元素
const joinedArr = arr.join(); // "apple,banana,orange"

// 使用 "-" 分隔符连接数组元素
const joinedArr2 = arr.join("-"); // "apple-banana-orange"

注意，如果数组中含有 null 或 undefined，它们在连接后会被解释成空字符串。

另外，join() 方法不支持多维数组，如果传递给 join() 方法的数组中包含其他数组作为元素，会将其转化为字符串，而不是递归地将子数组拆分成字符串。

以上就是JS APl第五部分的内容啦！！（如果喜欢的求点赞）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/219087.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

代码签名的工作原理

代码签名的工作原理

代码签名的基础是PKI安全体系。代码签名证书由签名证书私钥和公钥证书两部分组成。私钥用于代码的签名&#xff0c;公钥用于私钥签名的验证和证书持有者的身份识别。 1. 发布者从CA机构&#xff08;如JoySSL&#xff09;申请数字证书&#xff1b; 2. 发布者开发出代码&#x…
阅读更多...
物联网主机E6000：工业领域的数据融合与5G未来

物联网主机E6000：工业领域的数据融合与5G未来

一、物联网的崛起 在科技日新月异的今天&#xff0c;物联网已经成为了我们生活中不可或缺的一部分。从智能家居到工业自动化&#xff0c;物联网的应用已经深入到我们生活的各个角落。而在这个大背景下&#xff0c;物联网主机的出现&#xff0c;更是为我们的生活带来了前所未有的…
阅读更多...
3、RocketMQ源码分析（三）

3、RocketMQ源码分析（三）

RocketMQ源码-NameServer架构设计及启动流程 本文我们来分析NameServer相关代码&#xff0c;在正式分析源码前&#xff0c;我们先来回忆下NameServer的功能&#xff1a; NameServer是一个非常简单的Topic路由注册中心&#xff0c;其角色类似Dubbo中的zookeeper&#xff0c;支…
阅读更多...
一文详解集合竞价，建议收藏！

一文详解集合竞价，建议收藏！

集合竞价是指对在规定的一段时间内接受买卖申报一次性集中撮合的竞价方式。沪深市场9:15-9:25及14:57-15:00为集合竞价的时间段。集合竞价的所有交易以同一个价格成交。集合竞价的成交价确定原则是&#xff1a; 1、可实现最大成交量的价格&#xff1b; 2、高于该价格的买入申…
阅读更多...
图表控件LightningChart .NET中文教程 - 如何创建WPF 2D热图？（二）

图表控件LightningChart .NET中文教程 - 如何创建WPF 2D热图？（二）

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…
阅读更多...
评论功能实现方案

评论功能实现方案

构建高效且安全的评论功能&#xff1a;实现方案探讨。 1、分析 我们以b站的评论为例&#xff0c;用下图来解释我们评论的分级。 我们可以抽出存储评论的数据表属性 评论id父级id评论作者id被回复用户ID评论帖子ID评论内容创建时间 可以设计如下的数据表 其中pid表示父id。 …
阅读更多...
如何销售汽车之 汽车销售技巧和话术

如何销售汽车之 汽车销售技巧和话术

如何销售汽车之 汽车销售技巧和话术 当前&#xff0c;汽车销售市场的竞争日益激烈&#xff0c;消费者对汽车的需求和要求也越来越高。但是市场竞争车型也非常多&#xff0c;如何更好的做好销售业绩突破&#xff0c;提高汽车销量&#xff0c;创造汽车销售佳绩&#xff0c;就需要…
阅读更多...
【JUC】二十一、CAS比较并交换

【JUC】二十一、CAS比较并交换

文章目录 1、初体验2、CAS概述3、Unsafe类4、Unsafe汇编5、原子引用AutomicReference6、手写自旋锁SpinLock7、CAS的两大缺点8、AtomicStampedReference类解决ABA问题 1、初体验 没有CAS时&#xff0c;多线程环境下不使用原子类保证线程安全&#xff0c;比如i&#xff0c;可以…
阅读更多...
java学习part35List

java学习part35List

155-集合框架-List接口常用方法的测试_哔哩哔哩_bilibili 1.List接口常用方法 2.不同实现类
阅读更多...
Chart 3 OpenCL on Snapdragon

Chart 3 OpenCL on Snapdragon

文章目录 前言3.1、Adreno GPU3.2、Adreno GPU 架构3.2.1、Adreno硬件架构在OpenCL方面的高层视图3.2.2、Waves and fibers3.2.3、 Latency hiding3.2.4 、L2缓存3.2.5、工作组分配3.2.6、Coalesced access&#xff08;合并访问&#xff09; 3.3 图形和计算负载之间的上下文切换…
阅读更多...
如何做好一个软件开发项目经理？

如何做好一个软件开发项目经理？

要成为一名优秀的软件开发项目经理&#xff0c;需要具备一定的技术知识和管理能力。下面是学习和发展软件开发项目经理职业所需的关键能力和工作内容。 首先&#xff0c;作为软件开发项目经理&#xff0c;你需要具备扎实的软件开发知识和技能。这包括熟悉常用的编程语言、开发框…
阅读更多...
springboot 整合 Spring Security 中篇（RBAC权限控制）

springboot 整合 Spring Security 中篇（RBAC权限控制）

1.先了解RBAC 是什么 RBAC(Role-Based Access control) &#xff0c;也就是基于角色的权限分配解决方案 2.数据库读取用户信息和授权信息 1.上篇用户名好授权等信息都是从内存读取实际情况都是从数据库获取&#xff1b; 主要设计两个类 UserDetails和UserDetailsService 看下…
阅读更多...
【Scopus检索】第六届生物技术与生物医学国际学术会议（ICBB 2024）

【Scopus检索】第六届生物技术与生物医学国际学术会议（ICBB 2024）

第六届生物技术与生物医学国际学术会议 2024 6th International Conference on Biotechnology and Biomedicine (ICBB 2024) 第六届生物技术与生物医学国际学术会议&#xff08;ICBB 2024&#xff09;将于2024年03月29日-3月31日在中国-武汉市召开。ICBB 2024将围绕“生物技术…
阅读更多...
安装mysql数据库

安装mysql数据库

1.1下载APT存储库&#xff08;下载链接&#xff09; 1.2安装APT存储库&#xff08;注意好正确的路径&#xff09; 将下载的文件传输到linux服务器对应目录下后执行以下命令&#xff1a; sudo dpkg -i mysql-apt-config_0.8.10-1_all.deb 选择mysql5.7 然后点击ok 然后执行 s…
阅读更多...
vagrant up卡死问题

vagrant up卡死问题

环境 OS&#xff1a;Windows 10Vagrant&#xff1a;Vagrant 2.2.14VirtualBox&#xff1a;6.1.18 r142142box&#xff1a;CentOS-7-x86_64-Vagrant-2004_01.VirtualBox.box 详细信息 解决办法 修改文件Vagrantfile&#xff0c;增加如下配置&#xff0c;测试可以正常启动 conf…
阅读更多...
redis配置介绍

redis配置介绍

redis配置详解 一、redis.conf二、持久化1、RDB① 触发机制② 优缺点③ 恢复rdb 2、AOF① 优缺点② 恢复aof 三、发布订阅 一、redis.conf # -----NETWORK----- # 设置绑定ip bind 127.0.0.1 -::1 # 设置redis保护&#xff0c;只能通过绑定在本地回环地址上的网络接口进行访问…
阅读更多...
股票代码合法验证：python字符串str应用

股票代码合法验证：python字符串str应用

从键盘输入六位股票代码字符串&#xff0c;判定合法并输出板块分类&#xff0c;否则输出“NO”。 (笔记模板由python脚本于2023年12月04日 19:19:07创建&#xff0c;本篇笔记适合熟悉python字符串和字典的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https:…
阅读更多...
C语言实现Berzier曲线几何作图算法

C语言实现Berzier曲线几何作图算法

前言&#xff1a; 隐式曲线表达上的限制 计算上的多值性&#xff08;例如可能一个 x 对应多个 y&#xff09;存在导数 未定义的点坐标系进行变换后&#xff0c;曲线表达形式将可能会发生改变 一般的多项式幂基函数缺乏直观的几何意义 我们考虑由3个二元点对构造的二维平面曲…
阅读更多...
使用正则表达式时-可能会导致性能下降的情况

使用正则表达式时-可能会导致性能下降的情况

目录 前言 正则表达式引擎 NFA自动机的回溯 解决方案 前言 正则表达式是一个用正则符号写出的公式&#xff0c;程序对这个公式进行语法分析&#xff0c;建立一个语法分析树&#xff0c;再根据这个分析树结合正则表达式的引擎生成执行程序(这个执行程序我们把它称作状态机&a…
阅读更多...
6、原型模式（Prototype Pattern，不常用）

6、原型模式（Prototype Pattern，不常用）

原型模式指通过调用原型实例的Clone方法或其他手段来创建对象。 原型模式属于创建型设计模式&#xff0c;它以当前对象为原型&#xff08;蓝本&#xff09;来创建另一个新的对象&#xff0c;而无须知道创建的细节。原型模式在Java中通常使用Clone技术实现&#xff0c;在JavaSc…
阅读更多...
最新文章

Copyright @ 2022~2023