14、正则表达式
要求：阅读无障碍；
1、正则表达式
1、比较复杂正则表达式不需要写
2、正则表达式阅读没有障碍
作用：
1、正则表达式是用来进行表单验证
2、正则表达式就是一个功能更加强大的字符串。
概念：
1、正则表达式是对象
2、RegExp对象
创建正则表达式
参数：第一个参数 创建正则表达式的字符串
第二个参数 修饰符
i 忽略大小写
g 全局匹配
m 换行匹配
1、通过new运算符创建
var box = new RegExp("hello", "igm");
alert(box); // /hello/gim
2、省略new运算符也可以创建
var box = RegExp("hello", "igm");
alert(box); // /hello/gim
3、直接通过常量进行复制
var box = /hello/igm;
正则表达式对象
函数：
test
格式：正则.test(字符串)
功能：在字符串中匹配正则，判断这个正则是否在字符串中存在
返回值：如果存在返回true，，不存在返回false；
exec
格式：正则.exec(字符串)
功能：在字符串中匹配正则，判断这个正则是否在字符串中存在
返回值：如果存在返回，装有匹配到的字符串一个数组，，否则返回的是null
var str = "This is a pple";
// var res = /apple/i.test(str);
var res = /apple/i.exec(str);
alert(res);
// tian@163.com
/*var box = /^[^0-9]\w+@\w+\.(com|net|org)$/;
var str = "tian@163.comx";
alert(box.test(str));*/
2、正则使用字符串的方法
字符串对象的方法
格式：字符串对象.函数
match
功能：在字符串中匹配正则，判断这个正则是否在字符串中存在
返回值：如果存在，返回存有匹配到字符串的数组，否则返回null
search
格式：字符串对象.search(字符串/正则);
功能：查找正则第一次在字符串中的位置
replace
格式：字符串.replace(正则/字符串, 新字符串)
功能：字符串替换
split
格式：字符串.split(分隔符/正则)
/*var str = "This is a pple";
var res = str.match(/apple/i);
alert(res);*/
/*var str = "This is a Apple";
var res = str.search(/apple/i);
alert(res);*/
/*var str = "This is a Apple apple Apple";
// var res = str.replace("apple", "orange");
var res = str.replace(/apple/ig, "orange");
alert(res);*/
var str = "This m isMa Apple apple Apple";
var res = str.split(/m/i);
alert(res)
3、元字符
正则表达式
元字符：一堆有特殊含义的字符。
单个元字符
匹配任意字符
[a-zA-Z0-9_] 限定单个字符匹配范围;
[^0-9] 匹配除这个范围内的所有字符; ^在[]内,
(可以把正则的符号放进[]中解析为字符);
\w 等价于 [a-zA-Z0-9_] 限定单个字符匹配范围是数字、字母下划线 ;
\W 等价于 [^a-zA-Z0-9_] 限定单个字符匹配范围是除了数字、字母下划线;
\d 等价于 [0-9];
\D 等价于 [^0-9];
\s 代表匹配单个空白字符;
\S 代表匹配非空白字符;
重复字符
x+ 匹配至少一个x字符
x? 匹配0或者1个x字符
x* 匹配任意个x字符
x{m,n} 匹配至少m个，至多n个x字符
x{m} 匹配m个x字符
(xyz) 小括号里的(xyz)被当做一个字符匹配
锚字符
^ 行首匹配 行首字符限定死,[]外
$ 行尾匹配 行尾字符限定死
替代字符
|
. 表示模糊匹配任意字符
\ 转义符 (将正则的符号放在\后,解析为字符串);
\b 表示边界
/*var str = "bing";
var box = /google|baidu|bing/;
alert(box.test(str));*/
/*var str = "xdadadadagoogle";
var box = /google$/;
alert(box.test(str));*/
转义字符
.是 \. 字符.
*是 \* 字符*
var str = "go1gle";
var box = /go\.gle/;
alert(box.test(str));
4、一些练习
1、匹配邮编的正则
var box = /^\d{6}$/;
alert(box.test(123456));
2、压缩包文件
判断文件是不是压缩包。
1.zip 2.rar 3.rg
.zip
/*var box = /^\w+\.(zip|rar|rg)$/;
alert(box.test("hell_.o.zip"))*/
var str = " h el l o ";
// var res = str.replace(/ /g, "");
3、要求只能删除首部和尾部的空格
// var res = str.replace(/^\s+/, "");
// var res = str.replace(/^\s+|\s+$/g, "");
alert("|" + res + "|");
5、表单验证_正则
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#login{
width: 400px;
height: 200px;
background-color: orange;
border: 1px solid black;
text-align: center;
padding: 20px;
margin: 100px auto;
}
#login input{
margin-top: 10px;
width: 280px;
height: 22px;
font-size: 15px
}
</style>
</head>
<body>
<div id = "login">
<input id = "username" type="text" placeholder="用户名" />
<br/ >
<span id = "username_span">6~18个字符，可使用字母、数字、下划线</span><br />
<input id = "password" type="text" placeholder="密码" />
</div>
</body>
<script>
var oUsername = document.getElementById("username");
var oUsername_span = document.getElementById("username_span");
//失去焦点的时候。判断是否正确
oUsername.onblur = function(){
// 1、如果误输入空格，自动纠错 / /g 全局匹配空格
oUsername.value = oUsername.value.replace(/\s/g, "");
var oValue = oUsername.value;
// 2、判断长度是否6~18位
if(oValue.length > 18 || oValue.length < 6){
oUsername_span.innerHTML = "长度应为6~18个字符";
//设置颜色为红色
oUsername_span.style.color = "red";
}else if(/^\d/.test(oValue)){
//3、行首为数字
oUsername_span.innerHTML = "首字母不能为数字";
//设置颜色为红色
oUsername_span.style.color = "red";
}else if(/\W/.test(oValue)){
oUsername_span.innerHTML = "只能由数字、字母、下划线组成";
oUsername_span.style.color = "red";
}else{
oUsername_span.innerHTML = "符合要求";
oUsername_span.style.color = "green";
}
}
</script>
6、换行匹配
m 换行修饰符
只要遇到\n，行首重新计算
var str = "1.bai10du\n2.google\n3.bing";
// alert(str);
//把所有的数字换成*
/*
m 换行修饰符
只要遇到\n，行首重新计算
*/
var res = str.replace(/^\d/gm, "*");
alert(res);
/*
1、语法记下去
2、表单验证改成正则
*/
7、滑动条
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#slide{
width: 500px;
height: 30px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
#block{
height: 30px;
width: 20px;
background-color: blue;
position: absolute;
left: 0px;
top: 0px
}
#fill{
width: 0px;
height: 30px;
background-color:red;
}
#span1{
position: absolute;
top: 30px;
left: 0px
}
</style>
<script>
window.onload = function(){
var oSlide = document.getElementById("slide");
var oBlock = document.getElementById("block");
var oFill = document.getElementById("fill");
var oSpan1 = document.getElementById("span1");
//记录相对位置
var offsetX = 0;
oBlock.onmousedown = function(event){
var e = event || window.event;
offsetX = e.clientX - oBlock.offsetLeft;
document.onmousemove = function(event){
var e = event || window.event;
var l = e.clientX - offsetX;
if(l < 0){
l = 0;
}
if(l > 480){
l = 480;
}
//改变滑块的位置
oBlock.style.left = l + "px";
//填充的内容宽和滑块的left值一致
oFill.style.width = l + "px";
oSpan1.innerHTML = parseInt(l / 480 * 100) + "%";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</head>
<body>
<div id = "slide">
<div id = "block"></div>
<div id = "fill"></div>
<span id = "span1">0%</span>
</div>
</body>
ECMA6新增
1、let关键字
ECMA6
var 用关键字 let代替
通过var声明的变量，作用域以函数的大括号为界限的，
通过let声明的变量，作用域以大括号为界限的，包括if for swtich
/*if(true){
var num = 10;
alert(num);
}
alert(num);*/
/*if(true){
let num = 10;
alert(num);
}
alert(num);*/
/*for(var i = 0; i < 5; i++){
setTimeout(function(){
alert(i);
}, 2000);
}*/
/*for(let i = 0; i < 5; i++){
setTimeout(function(){
alert(i);
}, 2000);
}
alert("循环执行完了");*/
/*for(var i = 0; i < 5; i++){
for(var i = 0; i < 5; i++){
console.log(i);
}
}*/
for(let i = 0; i < 5; i++){
for(let i = 0; i < 5; i++){
console.log(i);
}
}
2、const
var let 声明变量
const 声明不可修改的变量/常量
/*var num = 100;
num = 20;
alert(num);*/
/*const IP = "10.30.155.73";
alert(IP);
IP = 10;
alert(IP);
3、箭头函数
/*function show(){
alert(123);
}
show();
*/
/*
声明函数的方式进行简化 箭头函数
*/
/*function add(num1, num2){
return num1 + num2;
}*/
/*var add = (num1, num2) => num1 + num2;
alert(add(10, 20));*/
/*
无参函数
*/
/*function print(){
alert("hello world");
}*/
// print();
/*var print = () => {
alert("hello world");
}
print();*/
/*
一个参数函数，带return返回值
*/
/*function add(x){
return x + 10;
}
alert(add(5));*/
/*var add = (x) => {
return x + 10;
}*/
/*var add = x => x + 10;
alert(add(5));*/
/*
多个参数
*/
/*function add(x, y){
return x + y;
}
var add = (x, y) => {
return x + y;
}*/
/*var add = (x, y) => x + y;
alert(add(10, 20));*/
/*
箭头函数的注意点：
*/
/*function show(){
return {
name: "小明",
age: 18
}
}
var obj = show();
alert(obj.name);*/
/*
【注】如果返回值是对象的时候，一定要记得加小括号。
*/
/*var show = () => ({
name: "小明",
age: 18
});
var obj = show();
alert(obj.name);*/
/*
了解
*/
var obj = {
name: "小明",
age: 18,
show: function(){
/*setInterval(function(){
alert(this);
alert(this.name);
}, 4000);*/
setInterval(() => {
alert(this.name)
}, 4000);
}
}
// obj.show();
// obj.show(); //当show函数被obj去调用的时候，this指向obj
//系统在调用传入函数
// setInterval(obj.show, 4000);
/*window.onload = function(){
document.onclick = obj.show;
}*/
4、例子
【注】this 永远指向当前函数的主人。
function show(){
alert(this);
}
// show(); //object Window
/*window.onload = function(){
document.onclick = show;
}*/
//show赋给了定时器，定时器系统调用，系统调用的函数。
// setInterval(show, 2000);
var xiaoming = {
name: "小明",
age: 18,
show: function(){
//window
/*setInterval(function(){
alert(this)
}, 4000);*/
//箭头函数
setInterval(() => {
alert(this.name);
}, 4000);
}
}
xiaoming.show();
5、解构
// var x = 10, y = 20, z = 30;
(1)中括号赋值
/*let [x,y,z] = [10,20,30];
alert(x + ", " + y + ", " + z);*/
/*let [x,[a,b],y] = [10,[20,30],40];
alert(a + ", " + y);*/
/*let [x,[a,b],y] = [10,[20],30];
alert(a + ", " + y + ", " + b);*/
<1>交换两个变量
let [a,b] = [10,20];
[a,b] = [b,a];
alert(a + ", " + b);
<2>函数，可以返回多个值
function show(){
return ["结果1", "结果2", "结果3"];
}
let [x,y,z] = show();
alert(x + "," + y + "," + z);
(2)大括号赋值
/*var {name,age,sex} = {
age: 18,
name: "小明",
sex: "男"
}
alert(name + ", " + age + ", " + sex);*/
<3>好处
/*function show({name, age = 40, sex}){
alert(name + ", " + age + ", " + sex);
}
show({
name: "小明",
sex: "男",
age: 18
})*/
/*
了解
*/
var arr = [10, 20, 30, 40];
//固定格式 var {0:head,arr.length - 1:last} = arr; arr.length -1 必须写成数字
var {0:head,3:last} = arr;
alert(head); //arr[0];
alert(last); //arr[3]
6、字符串
'' "" 都是字符串
ECMA6
用：``
\ 链接下一行字符串
/*var str = "sdadada\
ddadadadad";
alert(str);*/
1、好处，换行不会断
var str = `ddadadadadad
dadadadad`;
// alert(str);
2、字符串拼接的时候
var name = "小明";
var age = 18;
// var str = "我叫" + name + "今年" + age + "岁";
// alert(str);
格式：占位符 ${变量}
var str = `我叫${name}今年${age}岁`;
alert(str);
7、ECMA6新增数组的方法
<script>
window.onload = function(){
var aLis = document.getElementsByTagName("li");
本质上不是数组，使用起来类似于数组
// alert(aLis.length);
// aLis.push("hello");
aLis转成真正的数组
Array.from()
将aLis转成真正的数组。
// alert(aLis); //object HTMLCollection
/*var arr = Array.from(aLis);
arr.push("hello");
alert(arr);*/
看一看就行
copyWithin
1,2,7,8,9,6,7,8,9,0
参数：
第一个参数：从哪个下标开始去替换
第二、三个参数：替换成的元素的范围
start end
/*var arr = [1,2,3,4,5,6,7,8,9,0];
arr.copyWithin(2, 6, 9);
alert(arr); //1,2,7,8,5,6,7,8,9,0*/
find 查找元素
功能：在数组中查找符合return后面表达式的元素，查找到第一个就停止
var arr = [1,2,3,4,5,6,7,8,9,0];
var res = arr.find(function(item, index, array){
alert(item);
return item > 5;
})
alert(res);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
8、Symbol
<script>
var a = Symbol();
var b = Symbol();
var c = Symbol("aaaa");
var d = Symbol("aaaa");
通过Symbol声明的变量，和任何数据都不相等，除了他自己。
/*alert(a == b); //false
alert(c == d); //false
alert(a == a); //true*/
买辆车，选车的颜色
让你的代码看起来更加的生动。
var RED = Symbol();
var BLUE = Symbol();
var PINK = Symbol();
function changeCarColor(color){
switch(color){
case RED:
alert("red");
break;
case BLUE:
alert("蓝色");
break;
case PINK:
alert("粉色");
break;
default:
break;
}
}
</script>
9、set和map
了解
复合数据类型：
set 集合
1、不重复
2、无序
let cars = new Set();
/*
给集合里面插元素
格式：集合对象.add(元素)
*/
cars.add("宝马");
cars.add("凯迪拉克");
cars.add("路虎");
cars.add("玛莎拉蒂");
cars.add("路虎");
cars.add(new String("abc"));
cars.add(new String("abc"));
// console.log(cars);
遍历方式
1、key
for(let item of cars.keys()){
alert(item);
}
2、通过value
for(let item of cars.values()){
alert(item);
}
3、通过key和value遍历
for(let item of cars.entries()){
alert(item);
}
集合Set: 相当于不能存储函数的对象。
复合数据类型：map 映射 键和值不一样
英汉词典
let map = new Map();
//添加元素
//格式 map.set(key, value);
map.set("王五", "厨子");
map.set("李四", "司机");
map.set("张三", "程序员");
// console.log(map);
/*
取值
map.get(key)
*/
// alert(map.get("王五"));
/*
遍历
*/
for(let [key,value] of map){
alert(key + ", " + value);
}
数组 对象
1、数组(只能存数据) 下标_数字 (顺序，能存重复元素)
2、对象(既能存数据，又能存函数) 下标_属性名 (键不能重复)
3、集合(只能存数据) (无序,不能重复) 类似不能存函数的对象，这个对象键和值相同
4、映射(只能存数据) (无序，不能重复) 类似不能存函数的对象，这个对象键和值可以不同
10、集合去重
var arr = [10, 20, 30, 20, 10];
var newArr = [...new Set(arr)];
alert(newArr);
//数组 => 集合
let set = new Set(arr);
// console.log(set);
//集合 => 数组
var newArr = [...set];
alert(newArr);
