A.今天学到了什么
1.数组
1.1命名方式
<script>
// 直接量的方式
var arr=[1,2,3];
// 构造函数的方式（了解）
var b =new Array();
b[0]=1;
// 检测一个数据是不是数组
// instanceof 返回boolean值
// Array.isArray();返回boolean值
console.log(b instanceof Array);
</script>
1.2 增加
<script>
// push 从后增加
var arr=[1,2,3];
arr.push(4);
console.log(arr);
// unshift 从头添加
arr.unshift(0);
console.log(arr);
</script>
1.3 concat增加
<script>
var arr=[1,2,3];
var b=arr.concat(4);
console.log(arr);
console.log(b);
</script>
1.4数组的克隆
<script>
var arr=[1,2,3];
var b=[];
// 1.push
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]);
console.log(d);
</script>
1.5 数组删除
<script>
// 从后面删除
var arr=[1,2,3];
arr.pop();
// console.log(arr);
// 从头删除
arr.shift();
console.log(arr);
</script>
1.6 数组的修改
<script>
var arr=[1,2,3,4];
arr.splice(1,1,"h");
console.log(arr);
</script>
1.7 查询
<script>
var arr=[1,2,3,4];
// indexOf 查询对应的下标
// arr.slice(开始的下标 结束的下标) 不包含结束的下标
var a=arr.indexOf(4);
var b=arr.slice(0,2);
console.log(b);
// 传一个参数
var c=arr.slice(0);
console.log(c);
</script>
1.8 splice用法
<script>
// 1.增加
var arr=[1,2,3,4];
// arr.splice(2,0,"hello");
// console.log(arr)
// 2.删除
arr.splice(2,1);
console.log(arr)
</script>
#######1.9 join 的用法
<script>
// w3cschool
// join 将数组转为一个字符串
var arr=["hello","world","good"];
var b=arr.join();
var c=arr.join("|");
var d=arr.join("");
console.log(d);
</script>
2 数组排序
<script>
var arr=[232,34,235,65,82,934,93,6,43]
// 升序
var b=arr.sort(function(a,b){
return a-b;
// 降序 b-a
});
console.log(b);
</script>
3 数组求和
<script>
var arr=[123,3,343,343];
// 求和
var b=arr.reduce(function(a,b){
return a+b;
});
var c=arr.reverse();
// console.log(b);
console.log(c);
// 二维数组
var arr1=[[1,2],[2,3],[3,4],[4,5],"hello"];
console.log(arr1[0][0]);
</script>
4 swiper轮播
5 字符串常用方法
1.获取字符串的长度
var str="hello world";
var len=str.length;
// console.log(len);
2.增加
var add=str.concat("add");
// console.log(add);
3.查询 输出对应下标的字符
var char=str.charAt(2);
// console.log(char);
4.indexOf 输出对应字符的下标
var b=str.indexOf("l");
// console.log(b);
// 截取
var c=str.slice(1,4);
// console.log(c);
// 基本类型的方法不能改变原来的值
// substr(index,length)
// substring(startindex,endindex)
var e=str.substr(1,3);
var d=str.substring(1,4);
// console.log(e);
5.将字符串分割成数组
var h=str.split("");
console.log(h);
//
</script>
6 字符串的其他方法
<script>
// search 方法 返回搜索值的下标
// 如果字符不存在 返回-1
var a ="hello world ";
var b=a.search("h");
console.log(b);
// match 方法 返回一个数组
// 如果字符不存在 返回null
var c=a.match("e");
console.log(c);
// replace 替换掉第一个hello字符
var d=a.replace("hello","good");
// 替换所有的字符
var e=a.replace(/l/g,"*");
console.log(e);
</script>
7 正则表达式
7.1写法
var a="hello world"
// 正则表达式写法
var reg=/l/g;
// var reg=new RegExp("l","g");
var b=a.replace(reg,"*");
console.log(b);
7.2 备选字符集
// 备选字符集
var c="上海,上天走,上去,上来";
var reg=/上[海走]/g;
var d=c.replace(reg,"**");
console.log(d);
var e="12334232d"
var h=/[0-9]/g;
console.log(e.replace(h,"*"));
// 字符集
// [a-z] [A-Z] [0-9]
7.3 预订字符集
//预定义字符集
// \d [0-9]
// \w 数字 字母或者下划线
// \s 除换行以外所有的字符 空格 tab .
//
var u="hello 132321"
var reg=/\d/g;
console.log(u.replace(reg,"**"));
7.4 量词
<input type="text" id="txt">
<button id="btn">btn</button>
<script>
// 量词 规定字符出现的次数
// 正则表达式自带test()方法 返回boolean
// {9}确定数量
// {3,6}出现3-6次
// {3,}至少出现三次
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
var reg=/^\d{6}$/;
btn.onclick=function(){
var value=txt.value;
var result=reg.test(value);
console.log(result);
if(result){
alert("输入的是正确的");
}else{
alert("只能输入6位数字");
}
}
// 不确定数量的量词
// + 出现一次或多次
// ？ 出现0次或1次
// * 出现0次或多次
</script>
7.5选择和分组
<input type="text" id="txt">
<button id="btn">btn</button>
<script>
// ^以xx开头 $以xx结尾
var reg=/^(\+08|0086)?\s*1[3456789]\d{9}$/;
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
btn.onclick=function(){
var value=txt.value;
var result=reg.test(value);
console.log(result);
if(result){
alert("输入的是正确的");
}else{
alert("请输入正确的电话号码");
}
}
</script>
7.6 自定匹配位置
<script>
// 排除 [^abc] 除了abc
var a=" hello";
var reg=/^\s+/g;
console.log(a);
console.log(a.replace(reg,""));
var b="sahenfks";
var reg=/[^s]/g;
console.log(b.replace(reg,"e"));
</script>
7.7 电话号码选择
<script>
// 以 +08或者0086 可有可无
// 可以有多个空格或者没有
// 第一位为1 第二位为3456789 最后九位为数字
var reg=/^(\+08|0086)?\s*1[3456789]\d{9}$/
</script
7.8 match
<script>
// match也可以传正则表达式
var str = "hello 13231234 434";
var reg=/\d+/g;
var arr=str.match(reg);
console.log(arr);
</script>
7.9 过滤
<textarea id="txt" cols="30" rows="10"></textarea>
<button id="btn">过滤</button>
<script>
var reg= /天猫|淘宝/g;
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
btn.onclick=function(){
var value=txt.value;
var filter=value.replace(reg,"**");
txt.value=filter;
}
</script>
7.10 邮箱的正则
<input type="text" id="txt">
<p id="content"></p>
<button id="btn">验证</button>
<script>
// 一串数字，字幕或下划线@一串数字 英文，一串英文
var reg=/^\w+@[a-z0-9]+\.[a-z]+$/
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
var content=document.getElementById("content");
btn.onclick=function(){
var value=txt.value;
var result =reg.test(value);
if(result){
content.innerHTML="邮箱正确";
content.style.color="green";
}else{
content.innerHTML="邮箱格式不正确";
content.style.color="red";
}
}
</script>
7.11总结
字符串中支持正则的方法
strObj.search(regExp)
search()
match()
replace()
split()
正则自带方法
test() 检测一个字符串是否匹配某个模式 返回值为boolean
regExp.test(strObj)
