从零开始学习 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第五部分的内容啦！！（如果喜欢的求点赞）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OTN设备，ZXONE 9700，ZXMP M721

OTN设备，ZXONE 9700，ZXMP M721

文章目录 ZXONE 9700分组OTN产品产品特点 ZXMP M721城域边缘OTN产品产品特点 ZXONE 9700分组OTN产品 ZXONE 9700系列产品&#xff0c;支持10G/40G/100G/400G传输速率&#xff0c;可实现28.8T/14.4T/9.2T/4.4T ODUk的大容量电层交叉和10G/40G/100G/400G波长的光层交叉及分组交换…
阅读更多...
WordPress免费插件大全清单【2023最新】

WordPress免费插件大全清单【2023最新】

WordPress已经成为全球范围内最受欢迎的网站建设平台之一。要让您的WordPress网站更具功能性、效率性&#xff0c;并提供卓越的用户体验&#xff0c;插件的选择与使用变得至关重要。 WordPress插件的作用 我们先理解一下插件在WordPress生态系统中的作用。插件是一种能够为Wo…
阅读更多...
【云原生-K8s】检查yaml文件安全配置kubesec部署及使用

【云原生-K8s】检查yaml文件安全配置kubesec部署及使用

基础介绍基础描述特点 部署在线下载百度网盘下载安装 使用官网样例yamlHTTP远程调用安全建议 总结 基础介绍 基础描述 Kubesec 是一个开源项目&#xff0c;旨在为 Kubernetes 提供安全特性。它提供了一组工具和插件&#xff0c;用于保护和管理在 Kubernetes 集群中的工作负载和…
阅读更多...
前端三段面试经历（字节、滴滴、虎牙），讲真的还挺难的

前端三段面试经历（字节、滴滴、虎牙），讲真的还挺难的

小编整理最近了小伙伴中具有代表性的面试经历及面试题&#xff0c;他们的情况小编就不多说了&#xff0c;一起看看他们面试中都遇到了什么问题。 字节一面 刚开始就问我的项目&#xff0c;问得很详细。 webpack 提高构建速度的方式loader 输入什么产出什么 &#xff1f;webpac…
阅读更多...
全光谱护眼灯好吗？考公用的台灯推荐

全光谱护眼灯好吗？考公用的台灯推荐

全光谱护眼台灯是近年来新兴的一种照明产品&#xff0c;其使用全光谱LED灯泡&#xff0c;能够模拟自然光的光谱&#xff0c;为人们提供更加舒适、柔和的照明环境。相比传统的白炽灯或荧光灯&#xff0c;全光谱护眼台灯在照明效果、节能环保、眼睛健康等方面都有着明显的优势。 …
阅读更多...
mysql：免费的GUI客户端工具推荐并介绍常用的操作

mysql：免费的GUI客户端工具推荐并介绍常用的操作

给大家推荐几个常用的 mysql 数据库客户端 sequel-pro sequel-ace 官网下载地址 免费 sequel-ace 可以理解为 Sequel Pro 的升级版&#xff0c;由于Sequel Pro官方不维护了&#xff0c;特别是对 MySQL 8.0 支持不好&#xff0c;所以现在由社区维护了新分支 sequel-ace&#x…
阅读更多...
生鲜蔬果展示预约小程序作用是什么

生鲜蔬果展示预约小程序作用是什么

线下生鲜蔬果店非常多&#xff0c;对商家来说主要以同城生意为主&#xff0c;而在互联网电商的发展下&#xff0c;更多的商家会选择搭建私域商城进行多渠道的销售卖货和拓展&#xff0c;当然除了直接卖货外&#xff0c;还有产品纯展示或预约订购等需求。 但无论哪种模式&#…
阅读更多...
【云原生 | Docker】Docker核心概念 应用上手最佳流程

【云原生 | Docker】Docker核心概念 应用上手最佳流程

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…
阅读更多...
面试题：Java Switch 是如何支持 String 的，为什么不支持 long

面试题：Java Switch 是如何支持 String 的，为什么不支持 long

目录 前言一、结论二、枚举类型是咋变成 int 类型的&#xff1f;三、String 类型是咋变成 int 类型的&#xff1f;四、它们的包装类型支持吗&#xff1f; 前言 我们知道Java Switch 支持byte、short、int类型&#xff0c;在JDK 1.5 时&#xff0c;支持了枚举类型&#xff0c;在…
阅读更多...
STC15F100E单片机模拟串口

STC15F100E单片机模拟串口

文章目录 一、芯片简介二、开发环境三、软件模拟串口参考 一、芯片简介 STC15F100系列单片机是宏晶科技生产的单时钟/机器周期(1T)的单片机&#xff0c;新一代8051单片机&#xff0c;指令代码完全兼容传统8051&#xff0c;但是速度快6-12倍。 内部集成R/C时钟&#xff0c;5MHz…
阅读更多...
25、pytest的测试报告插件allure

25、pytest的测试报告插件allure

allure简介 在这里&#xff0c;你将找到使用allure创建、定制和理解测试报告所需的一切。开始让你的测试沟通更清晰&#xff0c;更有影响力。 Allure Report是一个实用程序&#xff0c;它处理由兼容的测试框架收集的测试结果并生成HTML报告。 安装allure 1、确保安装了Java…
阅读更多...
【SSM源码】基于JAVA的高校竞赛和考级查询系统

【SSM源码】基于JAVA的高校竞赛和考级查询系统

该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等学习内容。 目录 一、项目介绍&#xff1a; 二、文档学习资料&#xff1a; 三、模块截图&#xff1a; 四、开发技术与运行环境&#xff1a; 五、代码展示&#xff1a; 六、数据库表截图&#xff1a…
阅读更多...
一些es查询的资料

一些es查询的资料

一种chrome es查询插件&#xff1a;Elasticvue Elasticsearch复杂查询语法总结 NativeSearchQueryBuilder多条件查询方法 &#xff1a;不要连续使用多个withQuery&#xff0c;会会覆盖。 ES数组类型字段搜索以及数组空值搜索 : 每个字段都可以包含零个或多个值&#xff0c;但…
阅读更多...
MISRA C 2012 标准浅析

MISRA C 2012 标准浅析

MISRA(The Motor Industry Software Reliability Association)&#xff0c;汽车工业软件可靠性联会&#xff1b; 1994年&#xff0c;英国成立。致力于协助汽车厂商开发安全可靠的软件的跨国协会&#xff0c;其成员包括&#xff1a;AB汽车电子、罗孚汽车、宾利汽车、福特汽车、捷…
阅读更多...
js实现动态添加删除表格数据的两种方式

js实现动态添加删除表格数据的两种方式

目录 1、通过创建节点实现 css代码 html代码 js代码 完整代码 2、通过渲染表格&#xff0c;事件委托实现 css代码 html代码 js代码 完整代码 效果图 1、通过创建节点实现 思路&#xff1a;先把整体的html结构写出来&#xff0c;table表格分为3部分&#xff0c;其中t…
阅读更多...
HNU-电路与电子学-2021期末A卷（不含解析）

HNU-电路与电子学-2021期末A卷（不含解析）

【写在前面】 电路与电子学好像是从2020级开设的课程&#xff0c;故实际上目前只有2020与2021两个年级考过期末考试。 本份卷子的参考性很高&#xff0c;这是2020级的期末考卷。题目都是很典型的&#xff0c;每一道题都值得仔细研究透。 特别注意&#xff1a;看得懂答案跟写得…
阅读更多...
网络编程重要知识点总结

网络编程重要知识点总结

1、Socket默认是否是阻塞的&#xff1f;阻塞体现在哪里&#xff1f; Socket在默认情况下是阻塞的。阻塞体现在以下几个方面&#xff1a; 当对一个socket执行connect操作时&#xff0c;如果连接没有建立&#xff0c;程序会一直等待直到连接成功或失败。当对一个socket执行recv…
阅读更多...
逆水行舟！浅谈24届双非本科秋招

逆水行舟！浅谈24届双非本科秋招

逆水行舟&#xff01;浅谈24届双非本科的秋招 逆水行舟&#xff01;浅谈24届双非本科的秋招0、背景 -- 写下本文的初衷1、实习 -- 秋招的预备战役1.1 科大讯飞1.2 三七互娱 2、秋招 -- 一场没有硝烟的战争3、总结 -- 做好自己想做的事情 0、背景 – 写下本文的初衷 如题&#…
阅读更多...
【C++】期末复习题（一）

【C++】期末复习题（一）

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…
阅读更多...
常用汇编指令集

常用汇编指令集

寄存器 如上是OD展示的寄存器&#xff0c;逐条说明常用的寄存器和标志位含义&#xff1a; EIP&#xff1a;寄存器指向即将要执行的指令的地址&#xff08;EIP中的地址&#xff0c;就是下一步要执行指令的地址&#xff09; ESP&#xff1a;里面的内容永远指向堆栈的最顶端 EAX&…
阅读更多...
最新文章

Copyright @ 2022~2023