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…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
什么是VR全景技术
VR全景技术，全称为虚拟现实全景技术，是通过计算机图像模拟生成三维空间中的虚拟世界，使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验，结合图文、3D、音视频等多媒体元素…...