1.正则表达式
- 概述
- 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
- 特点
- 灵活性、逻辑性和功能性非常强
- 可以迅速地用极简单的方式达到字符串的复杂控制
- 对刚接触的人来说比较晦涩
- 正则表达式的使用
- 创建正则表达式（1.利用RegExp对象创建 2.利用字面量创建）
- 测试正则表达式 test，用于检验字符串是否符合该规则
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>正则表达式title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //正则表达式的使用5555555555555
10 //1.利用RegExp对象来创建 正则表达式
11 var regExp = new RegExp(/123/);
12 console.log(regExp);
13 //2.利用字面量创建 正则表达式
14 var rg = /123/;
15 //3.test()方法用来检验字符串是否符合正则表达式要求的规范
16 console.log(rg.test("123abc"));
17 script>
18 body>
19 html>
- 正则表达式中的特殊字符
- 正则表达式的组成
- 一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的结合，例如/a*bc/。其中特殊字符也被称作为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、+等。
- 边界符：用来提示字符所在的位置
| 边界符 |
说明 |
| ^ |
表示匹配行首的文本（以谁开始） |
| $ |
表示匹配行尾的文本（以谁结束） |
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //边界符 ^ $
10 var reg = /abc/;//正则表达式里面不需要加引号 不管是数字型还是字符串型
11 // /abc/表示只要包含有abc这个字符串的都返回true
12 console.log(reg.test("aabc"));
13 var reg = /^abc$/;//精确匹配 要求必须是abc字符串才符合规范
14 console.log(reg.test("abcabc"));//false
15 console.log(reg.test("abc"));//true
16 script>
17 body>
18 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //1.字符串类:[]表示有一系列字符可供选择，只要匹配其中的一个就可以
10 var reg = /[abc]/;//只要包含a或者包含b或者包含c就返回为true
11 // console.log(reg.test("ekh"));//false
12 // console.log(reg.test("add"));//true;
13 reg = /^[abc]$/;
14 // console.log(reg.test("ahgja"));//三选一只有是a，或是b或是c这三个字母才返回truz
15 //2.方括号内部的范围符
16 reg = /^[a-z]$/;
17 console.log(reg.test("z"));//26个小写英文字母任何一个字母返回true
18 console.log("-------------------------")
19 //3.字符组合
20 reg = /^[a-zA-Z0-9]$/;//大小写都可以
21 console.log(reg.test("Z"));
22 console.log("-------------------------")
23 //4.如果中括号里面包含^是取反的意思
24 reg = /^[^a-zA-Z0-9]$/;
25 console.log(reg.test("!"));
26 script>
27 body>
28 html>
| 量词 |
说明 |
| * |
重复零次或更多次 |
| + |
重复一次或更多次 |
| ？ |
重复零次或一次 |
| {n} |
重复n次 |
| {n,} |
重复n次或更多次 |
| {n,m} |
重复n到m次 |
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 <style type="text/css">
7 div {
8 display: inline-block;
9 }
10 style>
11 head>
12 <body>
13 用户名：<input type="text" />
14 <div>div>
15 <script type="text/javascript">
16 //如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色
17 //如果不合法，则提示信息，用户名不符合规范，并且颜色为红色
18 //用户名只能输入英文字母数字或下划线，长度在1 到12
19 var input = document.querySelector("input");
20 var div = document.querySelector("div");
21 var reg = /[a-zA-Z0-9_]+/;
22 input.addEventListener("keyup",function(btn){
23 if(!reg.test(input.value) || input.value.length > 12 || input.value.length < 2){
24 div.innerText = "用户名不符合规范";
25 div.style.color = "red";
26 }else{
27 div.innerText = "用户名合法";
28 div.style.color = "green";
29 }
30 })
31 script>
32 body>
33 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //大括号 量词符 里面表示重复次数
10 var reg = /^abc{3}$/;//只是让c重复3次
11 console.log(reg.test("abccc"));
12 //中括号 字符集合，匹配方括号中的任意字符
13 var reg = /^[abc]$/;
14 // 表示a也可以，b也可以，c也可以：a||b||c
15 //小括号表示优先级
16 var reg = /^(abc){3}$/;//让abc重复3次
17 console.log(reg.test("abcabcabc"));
18 script>
19 body>
20 html>
正则表达式在线测试 | 菜鸟工具 (runoob.com)
| 预定类 |
说明 |
| \d |
匹配0-9之间的任一数字，相当于[0-9] |
| \D |
匹配从0-9之外的字符。相当于[^0-9] |
| \w |
匹配任意的字母、数字和下划线。相当于[a-zA-Z0-9_] |
| \W |
除所有字母、数字、下划线以外的字符，相当于[^a-zA-Z0-9_] |
| \s |
匹配空格，包括换行符、制表符、空格符等，相当于[\r\n\t\v\f] |
| \S |
匹配非空格的字符，相当于[^\r\n\t\v\f] |
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 <style type="text/css">
7 div {
8 display: inline-block;
9 }
10 style>
11 head>
12 <body>
13 <input type="tel" />
14 <div>div>
15 <script type="text/javascript">
16 //座机号码验证
17 //格式一：010-12345678
18 //格式二：0530-1234567
19 //正则里面的或者符号|
20 var input = document.querySelector("input");
21 var div = document.querySelector("div");
22 var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
23 input.onblur = function(){
24 if(reg.test(input.value)){
25 div.innerHTML = "正确";
26 div.style.color = "green";
27 }else{
28 div.innerHTML = "错误";
29 div.style.color = "red";
30 }
31 }
32 script>
33 body>
34 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //replace替换
10 //replace可以实现替换字符串的操作，用来替换的参数可以是一个字符串或者是正则表达式
11 //stringObject.replace(regexp/substr,replacement)
12 //第一个参数：被替换的字符串或者正则表达式
13 //第二个参数：替换为字符串
14 //返回值是一个替换完毕的字符串
15 /*
16 正则表达式参数
17 -g：全局匹配
18 -i：忽略大小写
19 gi：全局匹配+忽略大小写
20 */
21
22 var str = "bbh和bbk";
23 var res = str.replace(/[\u4e00-\u9fa5]/," and ");
24 console.log(res);
25 script>
26 body>
27 html>
2.ES6
- 简介
- ES6的全称是ECMAScript6，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范
- let
- ES6中新增的用于声明变量的关键字
- let声明的变量只在所处的块级作用域有效
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 /*
10 let关键字用来声明变量的
11 -let声明的关键字只在块级作用域里有效
12 -在一个大括号中 使用let关键字声明的关键字只在块级有效
13 var声明的关键字不具备此特点
14 -防止循环变量变为全局变量
15 -不存在变量提升
16 -暂时性死区
17 */
18 // console.log(num);//num is not defined
19 let num = 0;
20 if(true){
21 let a = 10;
22 // console.log(a);//10
23 if(true){
24 let c = 56;
25 }
26 // console.log(c);// c is not defined
27 }
28 // console.log(a);//a is not defined
29 console.log("----------防止循环变量变为全局变量---------");
30 for(let i = 0 ; i < 2 ; i++){};
31 // console.log(i);//i is not defined
32 console.log("----------暂时性死区---------")
33 //使用let声明的变量与这个块级作用域进行了绑定
34 var flag = 1;
35 if(true){
36 console.log(flag);// Cannot access 'flag' before initialization
37 let flag = 2;
38 }
39 script>
40 body>
41 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 var arr = [];
10 for(var i = 0 ; i < 2 ; i++){
11 arr[i] = function(){
12 console.log(i);
13 }
14 }
15 //变量i是全局的，函数执行时输出的都是全局作用域下的值
16 arr[0]();//2
17 arr[1]();//2
18 script>
19 body>
20 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 let arr = [];
10 for(let i = 0 ; i < 2 ; i++){
11 arr[i] = function(){
12 console.log(i);
13 }
14 }
15 //每次循环都会产生一个块级作用域，每个块级作用域的变量都是不同的，
16 //函数执行时，是输出自己上一级（循环产生的块级作用域）下的值
17 arr[0]();//0
18 arr[1]();//1
19 script>
20 body>
21 html>
- const
- 声明常量，常量就是值（内存地址）不能变化的量
- 具有块级作用域
- 声明常量时必须赋初始值
- 常量赋值后，值不能修改
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //1.使用const声明的变量具有跨级作用域
10 if(true){
11 const a = 10;
12 console.log(a);
13 }
14 // console.log(a);//a is not defined
15 //2.使用const关键字声明常量时必须要赋初始值
16 // const num;//Missing initializer in const declaration
17 //3.使用const声明的常量在赋值之后不能更改
18 const PI = 3.14;
19 // PI = 0.78;//Assignment to constant variable.
20 const arr = [0,1,2];
21 arr[0] = 3;//不能更改指的是简单数据类型的值和复杂数据类型的地址
22 arr = [0,1,2,3];//Assignment to constant variable.
23
24 script>
25 body>
26 html>
- let、const、var的区别
- 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用let声明的变量，其作用域在该语句所在的代码块内不存在变量提升
- 使用const声明的变量，在后面出现的代码中不能再修改该常量的值
| var |
let |
const |
| 函数级作用域 |
块级作用域 |
块级作用域 |
| 变量提升 |
不存在变量提升 |
不存在变量提升 |
| 值可更改 |
值可更改 |
值不可更改 |
- 解构赋值
- ES6中允许从数组中提取值，按照对应的位置，对变量赋值，对象也可以实现解构
- 数组解构
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //数组解构允许我们按照一一对应的关系从数组中提取值
10 //然后将值赋值给变量
11 //如果解构不成功，变量的值为undefined
12 let [a,b,c] = [1,2,3];
13 console.log(a);
14 console.log(b);
15 console.log(c);
16 let [d,e] = [1];
17 console.log(d);//1
18 console.log(e);//undefined
19 script>
20 body>
21 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //对象解构允许我们使用变量的名字匹配变量的属性
10 //匹配成功属性的值赋值给变量
11 //写法一：
12 let person = {
13 name: 'bbh',
14 age: 30
15 }
16 // let {name,age} = person;
17 // console.log(name);//bbh
18 // console.log(age);//30
19 //写法二
20 //myname和myage属于别名
21 let {name:myname,age:myage} = person;
22 console.log(myname);//bbh
23 console.log(myage);//30
24 script>
25 body>
26 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //箭头函数是用来简化函数定义语法的
10 /*
11 箭头函数
12 -函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
13 -如果形参只有一个，则可以省略小括号
14 */
15 const fn = ()=>{
16 console.log(1);
17 }
18 fn();
19 const add = (num1,num2)=> num1+num2;
20 console.log(add(1,2));
21 const sing = song=>console.log(song);
22 sing("游乐园");
23 script>
24 body>
25 html>
-
- 箭头函数中的this关键字
- 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 var obj = {name: '张三'};
10 function fn(){
11 console.log(this);
12 return ()=>{
13 console.log(this);
14 }
15 }
16 //箭头函数不绑定this且箭头函数没有自己的this关键字
17 //如果在箭头函数中使用this，this关键字将指向箭头函数中函数定义位置中的this
18 const res = fn.call(obj);
19 res();
20 script>
21 body>
22 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //var age = 100;
10 var obj = {
11 age: 20,
12 say: ()=>{
13 alert(this.age);
14 }
15 }
16 obj.say();//undefined
17 script>
18 body>
19 html>
- 剩余参数
- 剩余参数语法允许我们将一个不定数量的参数表示为一个数组
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //注意：箭头函数中无法使用arguments
10 // function sum(first,...args){
11 // console.log(first);
12 // console.log(args);
13 // }
14 // sum(1,2,3,56);
15 const sum = (...args)=>{
16 let total = 0;
17 args.forEach(item => total += item);
18 return total;
19 }
20 console.log(sum(1,2,3,4));
21 script>
22 body>
23 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 let student = ['zhangsan','lisi','wangwu','zhaoliu','sunqi'];
10 let [arg1,...args] = student;
11 console.log(arg1);
12 args.forEach(item=>console.log(item));
13 script>
14 body>
15 html>
- Array的扩展方法
- 扩展运算符
- 扩展运算符可以将数组或者对象转为用逗号分割的参数序列
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //扩展运算符可以将数组拆分成以逗号分割的参数序列
10 let arr = ['b','a','e','k'];
11 // ...arr;//"b","a","e","k";
12 //参数中的逗号被当做输出中的,分隔符
13 console.log(...arr);
14 script>
15 body>
16 html>
-
- 扩展运算符的应用
- 合并数组：将多个数组进行合并
- 展开语法：将伪数组转换为真正的数组
- find():找出第一个符合条件的数组成员
- findIndex()：找到第一个符合条件的数组成员的索引号
- includs()：表示数组中是否包含某个给定的值，返回bool值
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <ul>
9 <li>li>
10 <li>li>
11 <li>li>
12 <li>li>
13 <li>li>
14 <li>li>
15 ul>
16 <script type="text/javascript">
17 //扩展运算符的应用
18 //1.合并数组
19 let arr1 = [1,2,3];
20 let arr2 = [4,5,6];
21 //方法1
22 // let arr3 = [...arr1,...arr2];
23 //方法2
24 arr1.push(...arr2);
25 console.log(arr1);
26 //2.展开语法：将类数组或可遍历对象转换为真正的数组
27 var li = document.querySelectorAll("li");
28 //方法一：
29 // let lis = [...li];
30 // console.log(lis);
31 //方法二：Array.from()第二个参数，提供了伪数组中数据的方法
32 let newArr = Array.from(li,item=>item.innerText=1);
33 console.log(newArr);
34 //3.find()找到第一个符合条件的数组成员
35 let arr = [{
36 id: 1,
37 name: 'bh'
38 },{
39 id: 2,
40 name: 'bk'
41 },{
42 id: 3,
43 name: 'os'
44 }]
45 var res = arr.find(item=>item.id == 4);
46 console.log(res);//有就返回找到的值，没有则返回undefined
47 //4.findIndex()找到第一符合条件的数组成员的索引号
48 res = arr.findIndex(item=>item.id==1);
49 console.log(res);//如果找到就返回index值，没有则返回-1
50 //5.includes()表示某个数组中是否包含给定的值，返回布尔值
51 var arrs = ['bh','bbk','bbh','1',false];
52 console.log(arrs.includes(false));
53 script>
54 body>
55 html>
- String的扩展方法
- 模板字符串：ES6新增的创建字符串的方式，使用反引号定义，可以解析变量
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>title>
6 head>
7 <body>
8 <script type="text/javascript">
9 //模板字符串
10 let name = `这是一个模板字符串`;
11 console.log(name);
12 //1.模板字符串可以解析变量
13 let singer = `Jane`;
14 let say = `${singer} I want love`;
15 console.log(say);
16 //2.模板字符串可以换行
17 var l = `
18 I've
19 hopping
20 you
21 were
22 heaven
23 sent
24 `;
25 console.log(l);
26 //3.在模板字符串中可以调用函数，直接显示函数返回值
27 const fn = () => {
28 return '我是函数';
29 }
30 let html = `我是啥呀? ${fn()}`;
31 console.log(html)
32
33