>### A.今天学什么？
#### 1.数组
- ##### 1.1 数组构造
- 1.直接创建的方式 --> var arr = [1,2,3];
- 2.构造函数方式 --> var b = new Array(); b[0] = 1; console.log(b);
- 数组为一个object对象 --> console.log(typeof b); // object
- 检测一个变量是否为数组的两种方法
- 1.使用 instanceof 测试b是否为数组对象的一个实例
- instanceof --> 返回boolean值
- console.log(b instanceof Array); // true
- 2.使用Array自带方法isArray()
- 2.Array.isArray() --> 返回boolean值
- console.log(Array.isArray(b));
```
// body
<body>
<script>
// 1.直接创建的方式
var arr = [1,2,3];
// 2.构造函数方式
var b = new Array();
b[0] = 1;
console.log(b);
// 数组是一个对象 Object
console.log(typeof b);
// 检测一个object是否为数组
// 1.使用 instanceof 测试b是否为数组对象的一个实例
// instanceof --> 返回boolean值
console.log(b instanceof Array); // true
// 2.Array.isArray() --> 返回boolean值
console.log(Array.isArray(b));
</script>
</body>
```
- ##### 1.2 数组添加 --> 改变数组原来的内容
- 1.push() --> 在数组末尾进行添加
- 2.unshift --> 从数组起始进行添加
```
// body
<body>
<script>
// --> 改变数组原来的内容
// push() --> 在数组末尾进行添加
var arr = [1,2,3];
arr.push(4);
console.log(arr);
// unshift --> 从数组起始进行添加
arr.unshift(0);
console.log(arr);
</script>
</body>
```
- ##### 1.3 concat数组合并 --> 没有改变数组的内容，而是产生一个新数组
- 参数可以是数字，也可以是数组，在原数组末尾进行添加
```
// body
<body>
<script>
// --> 没有改变数组的内容，而是产生一个新数组
// 参数可以是数字，也可以是数组，在原数组末尾进行添加
var arr = [1,2,3];
var b = arr.concat(4);
console.log(arr);
console.log(b);
</script>
</body>
```
- ##### 1.4 数组克隆
- 1.使用for循环+push进行克隆，或者逆序for循环+unshift方法
- 2.使用concat进行克隆
- 2.1 使用空数组进行数组添加
- 2.2 使用要添加的数组直接concat()空参
```
// body
<body>
<script>
// 数组克隆
var arr = [1,2,3];
var b = [];
// 1.使用for循环+push进行克隆，或者逆序for循环+unshift方法
for (var i = 0;i < arr.length;i++){
b.push(arr[i]);
}
console.log(b);
// 2.使用concat进行克隆
var c = [4,5,6];
// var d = c.concat([7,8]); // [4,5,6,7,8]
// console.log(d);
// 可以使用一个空数组添加c数组，或者使用c.concat();不写参数
var d = [].concat(c);
console.log(d);
</script>
</body>
```
- ##### 1.5 数组删除
- 1.从末尾进行删除 --> pop()，会返回从数组中删掉的值，就是弹出
- 2.从头部进行删除 --> shift()，同样会返回从数组中删掉的值
```
// body
<body>
<script>
// 数组删除
// 1.从末尾进行删除 --> pop()
// 会返回从数组中删掉的值，就是弹出
var arr = [1,2,3];
var a = arr.pop();
console.log(a);
// 2.从头部进行删除 --> shift()
// 同样会返回从数组中删掉的值
var arr2 = [1,2,3];
var a2 = arr.shift();
console.log(a2);
</script>
</body>
```
- ##### 1.6 数组修改
- splice(index,number,item);
- index --> 下标
- number --> 修改多少个
- item --> 修改的项
```
// body
<body>
<script>
// splice(index,number,item);
// index --> 下标
// number --> 修改多少个
// item --> 修改的项
var arr = [1,2,3];
arr.splice(1,1,"a");
console.log(arr);
</script>
</body>
```
- ##### 1.7 数组查询和数组切片
- 数组查询
- 1.通过下标查询数组的值
- 2.通过值查询数组中对应的下标，只返回该值在数组中第一次出现的位置 --> indexOf()
- 数组切片
- slice(startIndex,endIndex) --> 不包含endIndex
- slice() 只传一个参数 --> 则从startIndex截取到数组最后，包括最后一个元素。
```
<body>
<script>
var arr = [1,2,3,4,4];
// 1.通过下标查询数组的值
console.log(arr[0]); // 1
// 2.通过值查询数组中对应的下标，只返回该值在数组中第一次出现的位置 --> indexOf()
var a = arr.indexOf(4);
console.log(a); // 3
// slice(startIndex,endIndex) --> 不包含endIndex
var b = arr.slice(2,4); // [3,4]
console.log(b);
// slice() 只传一个参数 --> 则从startIndex截取到数组最后，包括最后一个元素。
// 也可以用slice() 来进行克隆
var c = arr.slice(2);
console.log(c); // [3,4,4]
</script>
</body>
```
- ##### 1.8 Array的splice方法 --> 拼接
- 1.利用splice进行数组指定位置添加
- number传0，添加的item占据index的位置
- 2.利用splice进行数组删除
- 删除时，不写item值，只传2个参数，从下标为index的地方开始删number个元素
```
// body
<body>
<script>
// splice(index,number,item)
// 1.利用splice进行数组指定位置添加
// number传0，添加的item占据index的位置
var arr = [1,2,3,4];
arr.splice(2,0,"hello");
console.log(arr);
// 2.利用splice进行数组删除
// 删除时，不写item值，只传2个参数，从下标为index的地方开始删number个元素
var arr2 = [1,2,3,4,5];
arr2.splice(1,2);
console.log(arr2)
</script>
</body>
```
- ##### 1.9 join，将数组拼接为字符串
- join() --> 将数组拼接为字符串，参数为分隔符，默认为","
```
// body
<body>
<script>
// join() --> 将数组拼接为字符串，参数为分隔符，默认为","
var arr = ["hello","world","good"];
var b = arr.join();
console.log(b); // hello,world,good
console.log(typeof b); // string
var c = arr.join("-");
console.log(c); // hello-world-good
</script>
</body>
```
- ##### 1.10 数组排序
- arr.sort(function(a,b){return a-b}); --> 将数组正序排序
- 如果想要逆序排序，则方法体 return b-a
```
// body
<body>
<script>
var arr = [22,1,32,12,15];
var b = arr.sort();
console.log(b); // 只排一部分，不要直接这么写
var arr2= [22,1,32,12,15];
var c = arr2.sort(function (a, b2) {
return a-b2; // 逆序使用b2-a
});
console.log(c);
</script>
</body>
```
- ##### 1.11 数组求和
- 使用reduce(function(){})方法
- 根据方法体的不同，也可以用来计算阶层和等
```
// body
<body>
<script>
var arr = [1,2,3,4,5];
var sum = arr.reduce(function (a,b) {
return a+b; // 如果想要求阶层积，则使用 a*b
});
console.log(sum);
</script>
</body>
```
- ##### 1.12 数组反转
- arr.reverse() --> 将数组倒序排列
```
// body
<body>
<script>
var arr = [1,2,3,4,5];
var b = arr.reverse();
console.log(b);
</script>
</body>
```
- ##### 1.13 二维数组
- 二维数组，即数组中嵌套数组
```
// body
<body>
<script>
// 二维数组
var arr = [[1,2],[3,4],"hello"];
console.log(arr[0]); // [1,2];
console.log(arr[0][0]); // 1
</script>
</body>
```
#### 2.string-在js中string为基本类型
- ##### 2.1 基本类型的方法，不会改变原来的值，不同于引用类型
- ##### 2.2 获取字符串长度
- str.length 方法，空格也占用长度
- ##### 2.3 字符串合并
- str.concat(str1) --> 将两个字符串合并，参数str1在str末尾拼接
- ##### 2.4 字符串查询
- charAt(index) --> 输出对应下标的字符
- indexOf(str); --> 返回str在字符串中第一次出现的下标位置的下标，如果不存在于字符串中，则返回-1
- ##### 2.5 字符串截取
- slice()，方法参考数组中的slice()方法
- substr(startIndex,len) --> 截取的起始位置，截取的长度
- substring(startIndex,endIndex) --> 和slice()一样
```
// body
<body>
<script>
// 基本类型的方法，不会改变原来的值，不同于引用类型
var str = "hello world";
// 1.获取字符串长度
var len = str.length;
console.log(len); // 11 空格也算字符串
// 2.字符串合并
// concat(str1) --> 将两个字符串合并，参数str1在str末尾拼接
var add = str.concat(" add");
console.log(add); // hello world add
// 3.字符串查询
// charAt(index) --> 输出对应下标的字符
var char = str.charAt(0);
console.log(char); // h
// indexOf(str); --> 返回str在字符串中第一次出现的下标位置的下标，如果不存在于字符串中，则返回-1
var index = str.indexOf("world");
console.log(index); // 6
// 4.字符串截取
// slice()
var a = "hello world";
var b = a.slice(1,4);
console.log(b); // ell
// substr(startIndex,len) --> 截取的起始位置，截取的长度
var subStr = a.substr(1,4);
console.log(subStr); // ello
// substring(startIndex,endIndex) --> 和slice()一样
var subString = a.substring(1,4); // ell
console.log(subString);
</script>
</body>
```
- ##### 2.6 split()字符串分割
- split() --> 将字符串按分割符分割成数组
- 不写参数则为一个长度为1的数组，其中元素为str
```
// body
<body>
<script>
// split() --> 将字符串按分割符分割成数组
// 不写参数则为一个长度为1的数组，其中元素为str
var str = "hello world";
var arr = str.split(" ");
console.log(arr);
// 如果使用空字符串为分割符，则所有的字符都会被分开
var arr1 = str.split("");
console.log(arr1);
</script>
</body>
```
- ##### 2.7 字符串的方法
- search(value) --> 返回搜索字符的下标，没有搜索到则返回-1
- match(value) --> 将匹配的内容返回一个数组，没有匹配的则返回一个null
- replace(value,newValue) --> 将字符串中第一个value替换为newValue，如果要替换所有的value，则要使用正则
```
// body
<body>
<script>
// search(value) --> 返回搜索字符的下标，没有搜索到则返回-1
var a = "hello hello world";
var b = a.search("h");
console.log(b); // 0
// match(value) --> 将匹配的内容返回一个数组，没有匹配的则返回一个null
var c = a.match("l");
console.log(c); // ["l", index: 2, input: "hello world"]
// replace(value,newValue) --> 将字符串中第一个value替换为newValue
// 如果要替换所有的value，则要使用正则
var d = a.replace("hello","good");
console.log(d); // good world
</script>
</body>
```
#### 3.正则表达式
- ##### 3.1 正则表达式，又称规则表达式，规则字符串中字符出现规则的表达式
- 1.语法： /pattern/attributes
- 2.attributes 为g时，代表全局搜索
- ##### 3.2 备选字符集[abc] --> 特点，必须且只能多选一
- [a-z] [A-Z] [0-9] 连续的备选字符，表示范围
- ##### 3.3 预定义字符集
- 定义：针对常用的备选字符集提供的简化符号
- \d --> [0-9]
- \w --> [0-9a-zA-Z_]
- \s --> 空格，tab，即匹配空白
- . --> 除换行符外所有字符
```
// body
<body>
<script>
// 正则表达式，又称规则表达式，规则字符串中字符出现规则的表达式
// 1.语法： /pattern/attributes
// attributes 为g时，代表全局搜索
var a = "hello world";
var RE = /l/g;
var b = a.replace(RE,"*");
console.log(b); // he**o wor*d
// 2.备选字符集[abc] --> 特点，必须且只能多选一
var a2 = "上海，上天，上去，上海都";
var RE2 = /上[海天]/g;
var b2 = a2.replace(RE2,"**");
console.log(b2); // **，**，上去，**都
var a3 = "1234322dd";
var RE3 = /[0-9]/g;
var b3 = a3.replace(RE3,"*");
console.log(b3); // *******dd
// [a-z] [A-Z] [0-9] 连续的备选字符，表示范围
var a4 = "hello world";
var RE4 = /[a-z]/g;
var b4 = a4.replace(RE4,"*");
console.log(b4); // ***** *****
// 3.预定义字符集
// 定义：针对常用的备选字符集提供的简化符号
// \d --> [0-9]
var a5 = "hello 123123";
var RE5 = /\d/g;
console.log(a5.replace(RE5,"*")); // hello ******
// \w --> [0-9a-zA-Z_]
var a6 = "Hello_World@123";
var RE6 = /\w/g;
console.log(a6.replace(RE6,"*")); // ***********@***
// \s --> 空格，tab，即匹配空白
// . --> 除换行符外所有字符
</script>
</body>
```
- ##### 3.4 量词 --> 规定字符出现的次数
- {m}，规定字符最少出现m次
- regEXp.test(str) --> 正则表达式匹配字符串，返回boolean值
- {a,b} --> 代表出现的次数在a-b这个范围，最少a次，最多b次
- + --> 出现一次或多次
- ? --> 出现0次或一次
- * --> 出现0次或多次
- ^ --> 以什么开头
- $ --> 以什么结尾
- 固定搭配：^正则表达式$ -->表示从开头到结尾的完整匹配
- 排除 [^abc] --> 除了abc
```
// body
<body>
<input type="text" id="txt" />
<button id="btn">确定</button>
<input type="text" id="phoneNum" />
<button id="btn2">确定</button>
<script>
// 4.量词 --> 规定字符出现的次数
// regEXp.test(str) --> 正则表达式匹配字符串，返回boolean值
var RE = /^\d{6}$/; // 这里如果是全局搜索g 则会一次true 一次false 暂时不知道原因
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function () {
var value = txt.value;
var result = RE.test(value);
console.log(value+":"+result);
};
// {a,b} --> 代表出现的次数在a-b这个范围，最少a次，最多b次
// + --> 出现一次或多次
// ? --> 出现0次或一次
// * --> 出现0次或多次
var a2 = "hello 2323";
var RE2 = /\d+/g;
console.log(RE2.test(a2));
// 电话号码匹配正则
// ^ --> 以什么开头
// $ --> 以什么结尾
var phoneRE = /^1[3-9]\d{9}$/;
var phoneNum = "13111111111";
console.log("是否为手机号码："+phoneRE.test(phoneNum));
var phone = document.getElementById("phoneNum");
var btn2 = document.getElementById("btn2");
btn2.onclick = function (ev) {
var value = phone.value;
var result = phoneRE.test(value);
console.log(value+"："+result);
};
// 指定匹配位置 ^ $
// 固定搭配：^正则表达式$ -->表示从开头到结尾的完整匹配
// 指定位置 ^开始的值，$结束的位置
var str = " hello";
var RE3 = /^\s+/; // 将开始位置的空格清空
console.log(str.replace(RE3,""));
// 排除 [^abc] --> 除了abc
var str4 = "abc232";
var RE4 = /[^abc]/g;
console.log(str4.replace(RE4,"*"));
// 电话号码匹配正则2
// 以 +08 或者 0086开头，可有可无 (\+08|0086)?
// 可以有多个空格，或者没有 \s*
// 第一位为1，第二位3-9，后面9位为数字
var RE5 = /^(\+08|0086)?\s*1[3-9]\d{9}$/;
</script>
</body>
```
- ##### 3.5 字符串方法使用正则
- 字符串中，支持正则的方法，search()，match()，replace()，split()
- 正则自带的方法 test()
- str.match(regExp) 返回匹配到的，组成一个数组
- replace 将正则匹配的，替换为指定字符串
- split 按符合正则匹配的分割字符串，返回数组
```
// body
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">过滤</button>
<script>
// 字符串中，支持正则的方法，search()，match()，replace()，split()
// 正则自带的方法 test()
// str.match(regExp) 返回匹配到的，组成一个数组
var str = "hello 13213 121";
var RE = /\d+/g; // 这里不用全局g，则后面的121不会被取到
var arr = str.match(RE);
console.log(arr);
// replace 将正则匹配的，替换为指定字符串
var RE2 = /天猫|淘宝/g;
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
txt.value = value.replace(RE2,"**");
};
// split 按符合正则匹配的分割字符串，返回数组
var str3 = "hello world";
var RE3 = /l/;
console.log(str3.split(RE3));
</script>
</body>
```
- ##### 3.6 标签过滤
```
// body
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">过滤</button>
<script>
var RE = /<[^<>]*>/g;
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
txt.value = value.replace(RE,"");
}
</script>
</body>
```
- ##### 3.7 邮箱验证
```
// body
<body>
<input type="text" id="txt">
<p id="content"></p>
<button id="btn">验证</button>
<script>
// 邮箱的规则，一串数字，字母或者下划线@一串数字英文.一串英文
var RE = /^\w+@[a-z0-9]+\.[a-z]+/;
var txt = document.getElementById("txt");
var content = document.getElementById("content");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
var result = RE.test(value);
console.log(result);
if (result){
content.innerHTML = "邮箱正确："+value;
content.style.color = "green";
}
else{
content.innerHTML = "邮箱格式不合法："+value;
content.style.color = "red";
}
}
</script>
</body>
```
