运动正则表达式

发表于 2021-02-13 更新于 2022-08-16 分类于前端学习笔记， js 阅读次数： Changyan：本文字数： 4.5k 阅读时长 ≈ 4 分钟

js实现物体的运动，正则表达式的使用，JSON的简单介绍

运动正则

运动

offsetLeft：当前位置距离左边界距离
多物体运动：要给每个物体单独设置自己的定时器
回调机制：执行完主体函数再执行

JSON 是一种传输数据的格式（以对象为样板，本质上就是对象（json 的属性名要变成字符串样式），但用途有区别，对象就是本地用的，json 是用来传输的）

JSON.stringify(); json — > string

var obj = {
	name: "xyq",
	age: 20,
};
JSON.stringify(obj);
返回结果为;
('{"name":"xyq","age":20}');

JSON.parse(); string — > json

var obj = {
    "name": "xyq",
    "age": 20
}
var json = JSON.stringify(obj) 
JSON.parse(json)
// 返回值为：
{
    name: "xyq",
    age: 20
}

dom 树深度优先原则

异步加载 JS

js 加载的缺点：

加载工具方法没必要阻塞文档，过得 js 加载会影响页面效率，一旦网速不好，那么整个网站将等待 js 加载而不进行后续渲染等工作。
有些工具方法需要按需加载，用到再加载，不用不加载。

javascript 异步加载的三种方案

defer 异步加载，但要等到 dom 文档全部解析完才会被执行。只有 IE 能用。可以在 script 内写语句

1	<script type="text/javascript" src="tools.js" defer="defer"></script>

async 异步加载，加载完就执行，async 只能加载外部脚本，不能把 js 写在 script 标签里。

1 和 2 执行时不阻塞页面
3. 创建 script，插入到 DOM 中，加载完毕后 callBack。

    
<script>
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "demo.js";
	document.head.appendChild(script); //执行这一行时js才开始执行

	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "demo.js";
	script.onload = function () {
		//会等js文件下载完之后在执行
		语句;
	};
	document.head.appendChild(script);
</script>

js 加载时间

创建 Document 对象，开始解析 web 页面。解析 HTML 元素和他们的文本内容后添加 Element 对象和 Text 节点到文档中。这个阶段 document.readyState = ‘loading’。
遇到 link 外部 css，创建线程加载，并继续解析文档。
遇到 script 外部 js，并且没有设置 async、defer，浏览器加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。
遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程加载，并继续解析文档。
对于 async 属性的脚本，脚本加载完成后立即执行。（异步禁止使用 document.write()）
遇到 img 等，先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档。
当文档解析完成，document.readyState = ‘interactive’。
文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同,但同样禁止使用 document.write()）;
document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
当所有 async 的脚本加载完成并执行后、img 等加载完成后，document.readyState = ‘complete’，window 对象触发 load 事件。
从此，以异步响应方式处理用户输入、网络事件等。

正则表达式

多行字符串（更清晰，通过 \ 将一行的结束符转义）

var test =
"\
<div></div>\
<span></span>\
";

正则表达式两种创建方式：

直接量(var 变量名 = / 字符串 /属性（可不写） )
var reg = /abc/;
new RegExp(var 变量名 = new RegExp(“规则” ，”属性（可不写）”);)

var reg = new RegExp("abc");

[ ]: 表达式（里面填符合要求的范围）

var reg = /[ab][cd][d]/g;
var str = "abcd";
str.match(reg)
// 返回值： ["bcd"]

^放在表达式里表示非（除了）

1
2
3

var reg = /[^a]/; //匹配第一位不是a的字符串
var str = "abcd";
str.match(reg);

（条件 | 条件 |条件）：可表示范围

1
2
3

var reg = /(abc|bcd)/g;
// 可匹配是abc 或 bcd 的字符串

\n : 与第 n 子表达式个完全一样的匹配条件（n 必须为具体的数字）

var reg = /(\w)\1\1\1/g; //匹配 4 个完全一样的字符串（例如 “aaaa”）

var reg = /(\w)\1(\w)\2/g; //可匹配 AABB 样式的字符串

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符（Metacharacter）

是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符
\w	[ 0 - 9A-z_]查找单词字符
\W	查找非单词字符
\d	[ 0 - 9]查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符
\b	匹配单词边界
\B	匹配非单词边界
\0	查找 NUL 字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\x	xx 查找以八进制数 xxx 规定的字符
\x	dd 查找以十六进制数 dd 规定的字符
\u	xxxx 查找以十六进制数 xxxx 规定的 Unicode 字符

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性	描述	FF	IE
globalRegExp	对象是否具有标志 g	1	4
ignoreCaseRegExp	对象是否具有标志 i	。1	4
lastIndex	一个整数，标示开始下一次匹配的字符位	1	4
multilineRegExp	对象是否具有标志 m	。1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

var str = "aa";
console.log(str.replace("a", "b"));
打印结果为ba;

var str = "aa";
var reg = /a/g;
console.log(str.replace(reg, "b"));
打印结果为bb;

var str = "aabb";
var reg = /(\w)\1(\w)\2/g;
console.log(str.replace(reg, "$2$2$1$1")); //可以通过 $n 获取第n 个子表达式的匹配条件
打印结果为bbaa;

var str = "the-first-name";
var reg = /-(\w)/g;
console.log(
	str.replace(reg, function ($, $1) {
		return $1.toUpperCase();
	})
);
打印结果为theFirstName;

正则表达式默认为贪婪匹配（总是往最大的方向去匹配）
取消贪婪匹配（匹配最短）（在每个量词后面加上一个？）

var reg = /a{3,5}?/g;
var reg1 = /a{3,5}/g;
var str = "aaaaaaaaaaaaaaaa";
console.log(str.match(reg));
console.log(str.match(reg1));

// 打印结果为：
// ["aaa", "aaa", "aaa", "aaa", "aaa"]
// ["aaaaa", "aaaaa", "aaaaa"]

1 2	var reg = /^(?!\d+$)(?![A-z]+$)[0-9A-z]{8,16}$/; 匹配密码8 - 16位不能只有数字或字母

运动 正则

运动