JavaScript学习笔记(6.0)
JavaScript类
使用关键字class创建类。
始终添加constructor()方法
class ClassName{constructor(){...}
}
calss Car{constructor(name,year){this.name=name;this.year=year;
}
}
创建了一个名为Car的类,并且拥有两个初始属性name和year。
JavaScript类不是对象,只是JavaScript对象的模板。
<!DOCTYPE html>
<html>
<body><h1>JavaScript 类</h1><p>如何使用 JavaScript 类。</p><p id="demo"></p><script>
class Car {constructor(name, year) {this.name = name;this.year = year;}
}const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script></body>
</html>
使用Car类创建了一个个car对象,在创建新对象时会自动调用constructor方法。
constructor方法是一种特殊的方法:
它必须有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法,JavaScript会添加空的构造函数方法。
class Car {constructor(name, year) {this.name = name;this.year = year;}age() {let date = new Date();return date.getFullYear() - this.year;}
}let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";
JavaScript JSON
JSON是存储和传输数据的格式。
JSON经常在数据从服务器发送到网页时使用。
JSON(JavaScript Object Notation)
JSON是轻量级的数据交换格式
JSON独立于语言*
JSON是自描述的且易于理解的
*JSON的语法是来自JavaScript对象符号的语法,但JSON格式是存文本。读取和生成JSON数据的代码可以在任何编程语言编写的。
用JSON语法定义包含三条员工记录的数组(对象)的对象:
{
"employees":[{"firstName":"Bill", "lastName":"Gates"}, {"firstName":"Steve", "lastName":"Jobs"},{"firstName":"Alan", "lastName":"Turing"}
]
}
JSON格式评估为JavaScript对象
JSON格式在语法上与创建JavaScript对象代码相同。所以JavaScript可以很容易将JSON数据转换成本地的JavaScript对象。
JSON语法规则:
(1)数据是名称/值对
(2)数据由逗号分割
(3)花括号保存对象
(4)方括号保存数组
JSON名称需要双引号。JavaScript名称不需要
"firstName":"Bill"
将JSON文本转换为JavaScript对象
JSON的同化成那个用法是从web服务器读取数据,然后在网页中显示数据。
下面使用字符串作为输入
首先,创建包含JSON语法的JavaScript字符串:
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
然后使用JavaScript的内建函数JSON.parse()来把这个字符串转换为JavaScript对象:
var obj = JSON.parse(text);
<!DOCTYPE html>
<html>
<body><h1>用 JSON 字符串创建对象</h1><p id="demo"></p><script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script></body>
</html>
JavaScript调试
在没有调试器的情况下写JavaScript是有难度的。
我们通常通过F12键启动浏览器的调试器,然后在调试器菜单中选择“控制台(console)”
console.log()方法
<!DOCTYPE html>
<html>
<body><h1>My First Web Page</h1><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html>
设置断点
在调试窗口中,您可以在JavaScript代码中设置断点。
在每个断点中,JavaScript将停止执行,以使您能够检查JavaScript的值。
在检查值之后。您可以恢复代码执行。
debugger关键词
debugger关键词会停止JavaScript的执行,并调用调试函数。
这与在调试器中设置断点的功能是一样的。
如果调试器不可用,debugger语句没有效果。
如果调试器已打开,此代码会在第三行之前停止运行。
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-03-12 16:33:12* @LastEditors: Mei* @LastEditTime: 2023-03-12 16:39:28* @FilePath: \vscode\测试断点.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="test"></p><script>var x=15*3debuggerdocument.getElementById("test").innerHTML=x;</script>
</body>
</html>
JavaScript最佳实践
避免使用全局变量。
它包括所有的数据类型、对象和函数。
全局变量和函数可被其他脚本覆盖。
JavaScript嵌套函数
所有函数都有权访问全局作用域。
事实上,在JavaScript中,所有函数都有权访问他们“上面”的作用域。
JavaScript支持嵌套函数。嵌套函数可以访问其上的作用域。
内部函数plus()可以访问复函数中的counter计数器变量:
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-03-12 16:33:12* @LastEditors: Mei* @LastEditTime: 2023-03-12 16:54:18* @FilePath: \vscode\测试断点.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="test"></p><script>// var x=15*3// debugger// document.getElementById("test").innerHTML=x;function add() {var counter = 0;function plus() {counter += 1;}plus(); return counter; }document.getElementById("test").innerHTML=add();</script>
</body>
</html>
这样可以解决计数器困境,如果我们能够从外面访问plus()函数。
我们还需要找到只执行一次counter=0的方法。
我们需要闭包(closure)。
JavaScript闭包
<!DOCTYPE html>
<html>
<body><h1>JavaScript 闭包</h1><p>使用局部变量计数。</p><button type="button" onclick="myFunction()">计数!</button><p id="demo">0</p><script>
var add = (function () {var counter = 0;return function () {counter += 1; return counter;}
})();function myFunction(){document.getElementById("demo").innerHTML = add();
}
</script></body>
</html>
变量add的赋值是自调用函数的返回值。这个自调用函数只运行一次。它设置计数器为零,并返回函数表达式。
这样add称为了函数。最精彩的部分是他能够访问父作用域中的计数器。这样被称为JavaScript闭包。它使函数拥有“私有变量”变成可能。计数器被这个匿名函数的作用域保护,并且只能使用add函数来修改。闭包指的是有权访问父作用域的函数,即使在父函数关闭之后。
转回来
始终声明局部变量
所有在函数中使用的变量应该被声明为局部变量。
局部变量必须通过var关键字来声明,否则他们将变成全局变量。
严格模式下不允许使用未声明的变量
相关文章:

JavaScript学习笔记(6.0)
JavaScript类 使用关键字class创建类。 始终添加constructor()方法 class ClassName{constructor(){...} } calss Car{constructor(name,year){this.namename;this.yearyear; } } 创建了一个名为Car的类,并且拥有两个初始属性name和year。 JavaScript类不是对…...

某小公司面试记录
记录一次面试过程,还有一些笔试题,挺简单的,排序,去重,this指向,深浅拷贝,微任务的执行顺序,变量提升等。 ES6数组新增的方法 Array.from: 将两类对象转为真正的数组&am…...

SPI读写SD卡速度有多快?
SD卡是一个嵌入式中非常常用的外设,可以用于存储一些大容量的数据。但用单片机读写SD卡速度一般都有限(对于高速SD卡,主要是受限于单片机本身的接口速度),在高速、实时数据存储时可能会有影响。但具体速度可以达到多少…...

MySQL:索引与事物
目录 简单了解索引的底层数据结构 索引的概念: 索引存在的意义: 索引的使用: 索引实现的数据结构 B树 B 树 B 树的特点 B 树的优势 事物 事物的概念 事物的使用 事物的四大特性 并发可能引起的问题 脏读问题 不可重复读 幻读…...

mybatis实战
目录配置自动下划线驼峰MyBatis解析的SQL和实际传参不符的问题传参是整型,结果是false日期比较入参是字符串入参是Date父子递归查询上下级查询方法一方法二传参数组inmapper中接口注解映射配置 自动下划线驼峰 使用mybatis的自动下划线驼峰转换 mybatis有一个选项…...

【UEFI实战】BIOS与IPMI
KCS KCS全称是Keyboard Controller Style,关于这个名称不用过多的追究,只需要知道它是系统(BIOS和OS)和BMC通信的一种基本方式即可。本文将介绍BIOS下的KCS接口,包括接口使用方式和数据。内容参考自《ipmi-second-gen…...

90%的人都不算会网络安全,这才是真正的白帽子技术【红队】
我敢说,现在网上90%的文章都没有把网络安全该学的东西讲清楚。 为什么?因为全网更多的都是在讲如何去渗透和公鸡,却没有把网安最注重的防御讲明白。 老话说得好:“攻击,是为了更好的防御。”如果连初衷都忘了&#x…...

关于vuex的使用
1.首先安装vuex npm install vuex --save 这时如果直接安装vuex,不指定版本的话,就会直接安装最新的vuex的版本。所以会出现报错。 报错就安装这个 npm install --save vuex3 2.创建文件夹, 有的时候安装好会自动创建vuex的文件夹 …...

第53篇-某商城sign参数分析-webpack【2023-03-07】
声明:该专栏涉及的所有案例均为学习使用,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!如有侵权,请私信联系本人删帖! 文章目录 一、前言二、网站分析三、完整代码一、前言 今天再来试一个webpack的例子吧,网址: aHR0cHM6Ly9tLnlxYi5jb20vYmFuay9…...

探秘MySQL——排查与调优
文章目录一、问题排查一:SQL执行出错二、问题排查二:慢查询0.几个重要参数1.配置慢查询日志命令行配置(重启失效)修改配置文件(永久生效)2.查看慢查询日志3.问题排查1:Look_time耗时4.问题排查2…...

【9.数据页结构】
概述 InnoDB 的数据是按「数据页」为单位来读写的,也就是说,当需要读一条记录的时候,并不是将这个记录本身从磁盘读出来,而是以页为单位,将其整体读入内存。数据库的 I/O 操作的最小单位是页,InnoDB 数据页…...

演唱会总是抢不到票?教你用Python制作一个自动抢票脚本
人生苦短 我用python 这个大家应该都知道吧? 是中国综合类现场娱乐票务营销平台, 业务覆盖演唱会、 话剧、音乐剧、体育赛事等领域。 如何快速抢票? 那么, 今天带大家用Python来制作一个自动抢票的脚本小程序 本文源码python安…...

【系统开发】WebSocket + SpringBoot + Vue 搭建简易网页聊天室
文章目录一、数据库搭建二、后端搭建2.1 引入关键依赖2.2 WebSocket配置类2.3 配置跨域2.4 发送消息的控制类三、前端搭建3.1 自定义文件websocket.js3.2 main.js中全局引入websocket3.3 App.vue中声明websocket对象3.4 聊天室界面.vue3.5 最终效果一、数据库搭建 很简单的一个…...

Learning C++ No.14【STL No.4】
引言: 北京时间:2023/3/9/12:58,下午两点有课,现在先把引言给搞定,这样就能激励我更早的把这篇博客给写完了,万事开头难这句话还是很有道理的,刚好利用现在昏昏欲睡的时候,把这个没…...
高速PCB设计指南(八)
七、产品内部的电磁兼容性设计 1 印刷电路板设计中的电磁兼容性 1.1 印刷线路板中的公共阻抗耦合问题 数字地与模拟地分开,地线加宽。 1.2 印刷线路板的布局 ※对高速、中速和低速混用时,注意不同的布局区域。 ※对低模拟电路和数字逻辑要分离。…...

什么是腾讯云关系型数据库(MySQL/SQL Server/MariaDB/PostgreSQL详解)
什么是腾讯云关系型数据库?腾讯云关系型数据库提供 MySQL、SQL Server、MariaDB、PostgreSQL详细介绍。腾讯云关系型数据库让您在云中轻松部署、管理和扩展的关系型数据库,提供安全可靠、伸缩灵活的按需云数据库服务。腾讯云关系型数据库提供 MySQL、SQL…...
进程通信相关概念
一、概念 1.1 通信方式有哪些 管道:水管,男纸条放入水管,女看了拿走不回复 消息队列:大盒子,男放入纸条,女看了不拿走,男女都可放 共享内存:直接桌子,男放桌上&#…...

05.Java的运算符
1.运算符计算机的最基本的用途之一就是执行数学运算,比如:int a 10;int b 20;a b;a < b;上述 和 < 等就是运算符,即:对操作数进行操作时的符号,不同运算符操作的含义不同。作为一门计算机语言,Ja…...

轮转数组(力扣189)
轮转数组 题目描述: 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 示例1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7…...

主流的“对象转换工具”使用示例大全以及性能的对比
目录 前言 源码地址 代码示例 引入依赖 先定两个实体用于转换 定义一个接口让所有转换器都集成 Apache BeanUtils BeanCopier bean-mapping bean-mapping-asm Dozer 自己写get/set JMapper json2json MapStruct(推荐) ModelMapper OriK…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...

无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...

Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...