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…...
分享10个不错的C语言开源项目
今天跟大家分享10个重量级的C语言开源项目，C语言确实经得住考验： Redis：Redis是一个开源的高性能的键值对数据库。它以C语言编写，具有极高的性能和可靠性。 Nginx：Nginx是一个高性能的HTTP和反向代理服务器࿰…...
【阅读笔记】JavaScript设计模式与开发实践2--闭包与单例、策略模式
目录闭包与高阶函数Function 扩展函数柯里化函数单例模式透明的单例模式惰性单例策略模式策略模式发展策略模式实现闭包与高阶函数 Array.prototype.sort 接受一个函数当作参数，用户可以自行在该函数内指定排序方式 // 由小到大排序 let res [1, 4, 2].sort((a, …...
设计模式(二十)----行为型模式之责任链模式
1、概述 在现实生活中，常常会出现这样的事例：一个请求有多个对象可以处理，但每个对象的处理条件或权限不同。例如，公司员工请假，可批假的领导有部门负责人、副总经理、总经理等，但每个领导能批准的天数不同…...
数据持久化层--冷热分离
业务场景 有一个系统的主要功能是这样的：它会对接客户的邮件服务器，自动收取发到几个特定客服邮箱的邮件，每收到一封客服邮件，就自动生成一个工单。之后系统就会根据一些规则将工单分派给不同的客服专员处理。 这家媒体集团客户两年多产生了近2000万的工单，工单的操作记…...
Ubuntu16.04系统 VSCode中python开发插件的安装
VSCode中python开发插件的安装 1. python python插件提供了代码分析，高亮，规范化等很多基本功能 2. Python for vscode 3. Python Preview 实时可视化你的代码结果。如果你Leedcode等题时，可以安装这个插件。能为VSCode切换各种主题皮肤…...
buuctf-pwn write-ups (12)
文章目录buu093-wustctf2020_easyfastbuu094-ciscn_2019_es_1buu095-wdb2018_guessbuu096-gyctf_2020_some_thing_excetingbuu097-axb_2019_heapbuu098-oneshot_tjctf_2016buu099-护网杯_2018_gettingstartbuu100-wustctf2020_number_gamebuu101-zctf2016_note2buu093-wustctf2…...
Linux- 系统随你玩之--网络上的黑客帝国
文章目录1、前言2、TCPDump介绍2.1、问题来了： 所有用户都可以采用该命令吗？2.2、抓包原理2.3、特点2.3.1、参数化支持2.2.2、 TCP功能3、 服务器安装Tcpdump3.1、安装3.2、检查安装是否正常。4、tcpdump 命令4.1、常用功能选项4.2、输出内容5、实操5.1、…...
Python每日一练(20230312)
目录 1. 提示用户输入的简单菜单 ★ 2. 字母异位词分组 ★★ 3. 俄罗斯套娃信封问题 ★★★ 🌟 每日一练刷题专栏 C/C 每日一练 专栏 Python 每日一练 专栏 1. 提示用户输入的简单菜单 如果用户选择菜单选项1，提示用户输入1到10之间的整数&a…...
人生又有几个四年
机缘 不知不觉，已经来 csdn 创作四周年啦~ 我是在刚工作不到一年的时候接触 csdn 的，当时在学习 node，对 node 的文件相关的几个 api 总是搞混，本来还想着在传统的纸质笔记本上记一下，但是想想我大学记了好久的笔记本…...
第九章：Java集合
第九章：Java集合 9.1：Java集合框架概述 数组、集合都是对多个数据进行存储(内存层面，不涉及持久化)操作的结构，简称Java容器。 数组存储多个数据方面的特点 一旦初始化以后，其长度就确定了。数组一旦定义好ÿ…...
滁州建设网站/自助建站系统下载
自动发现： 需要：zabbix-server安装完毕，zabbix-agent安装完毕 zabbix网页上的操作： 1.配置自动发现规则-发现主机 注意：这里的延时选项请按实际环境而定 2.配置添加主机动作-添加主机 添加完成后的结果如下 静静的等待…...
网站建设公司需要什么资质/网站怎么营销推广
深度解析开发项目之 03 - enum的使用 01 - 在#import和interface之间定义typedef enum 注意: 默认是0,1,2,3 02 - 定义可以操作的数据类型的属性 03 - 使用switch case 通过定义的属性来执行不同的内容 3.1用来判断不同的url 3.2用来给不同的headView赋值model 3.3 用来给每个界…...
宁波市城乡建设委员会的网站/友情链接平台广告
在用npm安装包的时候，一直出现errorno:4048的错误，提示为用管理员身份登录。找过很多帖子，多为用管理员身份打开cmd,或者npm cache clean --force,都试过了但是不起作用，因为我也没弄清楚原因（泪奔::>_<::&#…...
徐州网站建设优化宣传/百度平台客服人工电话
一、什么是生产线3D可视化解决方案？ 生产线3D可视化解决方案，是结合物联网监控系统（智慧工厂）、虚实联动与三维建模先进技术，以三维立体模式呈现出来，使得界面直观、简单，便于监控人员识别异常信…...
wordpress打开html/最新全国疫情消息
它取决于您定义为必需的：没有任何头字段必须与每个响应一起发送，无论什么情况，但有真正应该发送的头字段。唯一接近的头字段是Date，但即使它有它的情况下它不是必需的。在RFC 2119的说法中，术语MUST意味着某些是规范的…...
cdn中国设计网/seo关键字排名
摘自：http://blog.chinaunix.net/uid-24194439-id-90779.htmlint *p[10] p是一个指针数组，数组内有10个int *指针 int(*p)[10] p是一个指针，指向有10个int变量的数组转载于:https://www.cnblogs.com/zhangxiaosong/p/3316579.html...