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() …...