作者：wqjcarnation
链接：https://www.jianshu.com/p/5d5a15a5c6c7
数组
http://www.w3school.com.cn/jsref/jsref_obj_array.asp
创建
var Obj = new Array();
var Obj = new Array( Size );
var Obj = new Array( 元素1, 元素2, …, 元素N );
var p1 = ['tom', 28, 'NewYork'];
使用
读取
数组名[下标索引];
var products = new Array( “洗衣粉”, “香皂”, “洗洁精” ); // 商品列表
var product = products[ 1 ]; // 取出第二种商品
赋值
products [0] = “value1”;
products [1] = “value2”;
数组的主要属性length
var Obj = new Array( 1, 2, 3 );
var count = Obj.length;
for循环赋值取值
for(var i=0;i<products .length;i++){
products [i] = “2000”+i;
}
for(var index in products ){
alert(products[index]);
}
完整样例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var array_a=new Array();
array_a[0]="hello";
array_a[1]="world";
array_a[2]="123";
array_a[3]="234";
//alert(array_a[3]);
var products = new Array( "洗衣粉", "香皂", "洗洁精"); // 商品列表
//var product = products[ 1 ]; // 取出第二种商品
//alert(product);
//普通for循环打印
for(var i=0;i<products.length;i++){
//alert(products[i]);
}
//加强for 循环到的是数组下标
for(var index in products){
alert(products[index]);
}
</script>
</head>
<body>
</body>
</html>
常用方法
https://www.jianshu.com/writer#/notebooks/30664089/notes/35709661
concat
<script>
var array_1=new Array(1,2,3);
//连接之后变成新的数组,原数组没有变化
var array_2=array_1.concat(4,5,6);
for(var index in array_2){
alert(array_2[index]);
}
</script>
join
join() 数组转成字符串。
document.write("数组转成字符串：-------》"+array_2.join())
打印结果为数组元素用逗号分隔
1,2,3,4,5,6
reverse
reverse() 方法用于颠倒数组中元素的顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var array_1=new Array(1,2,3,"a","b");
//连接之后变成新的数组,原数组没有变化
var array_2=array_1.concat(4,5,6);
/* for(var index in array_2){
alert(array_2[index]);
} */
document.write("数组转成字符串：-------》"+array_2.join()+"<br>");
document.write("数组反转后：-------》"+array_2.reverse());
</script>
</head>
<body>
</body>
</html>
push
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push与concat作用相似，都能连接数组
不同之处：
1）返回值类型不同。concat返回连接后的数组 push返回新数组的长度
2）concat连接后原数组没变，实际变成了新的数组
push是对改变原数组（****）
<script>
var array_1 = new Array(1, 2, 3, "a", "b");
array_1.push(4, 5, 6);
document.write("数组转成字符串：-------》" + array_1.join() + "<br>");
</script>
pop
pop() 方法用于删除并返回数组的最后一个元素。
<script>
var array_1 = new Array(1, 2, 3, "a", "b");
array_1.push(4, 5, 6);
document.write("数组转成字符串：-------》" + array_1.join() + "<br>");
var del=array_1.pop();
document.write("被删除的元素-------》" +del+ "<br>");
document.write("pop后数组转成字符串：-------》" + array_1.join() + "<br>");
</script>
学生练习
shift：删除并返回数组的第一个元素
slice：从某个已有的数组返回选定的元素（截取从指定下标开始到指定下标结束的子数组）
写法： arrayObject.slice(start,end) start end为元素下标
arrayObject.slice(start) 省略end时表示截取到尾部
start,end还可以为负数，表示从尾部开始截取
sort：对数组的元素进行排序
http://www.w3school.com.cn/jsref/jsref_sort.asp
注意：无论是数字还是字符串，默认的排序都是按首字母顺序，如果数字想按照大小排序，需要写排序算法。
toString：把数组转换为字符串，并返回结果
<script type="text/javascript">
function sortNumber(a, b) {
return a - b;
}
var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";
document.write(arr + "<br />");
document.write("原始的sort结果"+arr.sort()+ "<br />");
document.write("排序算法sort结果"+arr.sort(sortNumber)+ "<br />");
document.write("toString后的结果"+arr.toString()+ "<br />");
document.write("join后的结果"+arr.join(";")+ "<br />");
</script>
join与toString的异同
相同点：都可以将数组转换成字符串
不同点：join默认用逗号分隔，但可以通过调用有参构造指定分隔符
toString只能用逗号分隔。不可以定制
制作省市联动
参考手册http://www.w3school.com.cn/jsref/index.asp
http://www.runoob.com/jsref/coll-select-options.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//js一维数组定义
var province = new Array();
//给数组赋值
province[0] = "辽宁省";
province[1] = "吉林省";
//准备城市信息 二维数组
//二维数组
var citys = new Array();
citys[0] = new Array();
citys[1] = new Array();
citys[0][0] = "沈阳市";
citys[0][1] = "抚顺市";
citys[0][2] = "本溪市";
citys[0][3] = "辽阳市";
citys[0][4] = "鞍山市";
citys[1][0] = "吉林市";
citys[1][1] = "四平市";
citys[1][2] = "松源市";
citys[1][3] = "长春市";
function showCity(){
//alert("加载市");
//获取用户省的下拉列表框选择了哪一个
var provinces=document.getElementById("province");
var city=document.getElementById("city");
//alert("被选中的省的索引："+provinces.selectedIndex);
//获取元素在数组中的真实索引
var index=provinces.selectedIndex-1;
//读取citys中第一维的下标为index的数据
//citys[index] 是实际需要加载的城市的信息
//为了解决选项重复添加的问题,需要在每次添加前先清空city下拉列表框
city.options.length=0;
for(var i=0;i<citys[index].length;i++){
//把城市信息添加到城市下拉列表中
//alert(citys[index][i]);
//obj.add(new Option("文本","值")); //这个只能在IE中有效
//obj.options.add(new Option("text","value")); //这个兼容IE与firefox
//alert(Number(""+index+""+i));
city.options.add(new Option(citys[index][i],Number(""+index+""+i)));
}
}
</script>
</head>
<body>
省<select name="province" id="province" onchange="showCity()">
<option value="">请选择省</option>
<script>
for (var i = 0; i < province.length; i++) {
document.write("<option value=" + i + ">" + province[i] + "</option>");
}
</script>
</select>
城市：<select name="city" id="city">
<option value="">请选择城市</option>
</select>
</body>
</html>
对象
创建、使用（线上）
JavaScript内置对象
常用的内部对象
Array、Global、Date、Math、String、Number、Boolean
Array：见上面部分
Global: ECMAScript 中的Global 对象在某种意义上是作为一个终极的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是Global 对象的属性。本书前面介绍过的那些函数，诸如isNaN()、isFinite()、parseInt()以及parseFloat()等看起来都像独立的函数，实际上全都是Global对象的方法。还有就是常见的一些特殊值，如：NaN、undefined等都是它的属性。
encodeURI() 编码，加密
encodeURIComponent() 编码。支持中文和特殊字符
decodeURI() 解码，解密
decodeURIComponent() 解码
<script>
var box = '//张三';
alert("加密的："+encodeURI(box)); //只编码了中文
var box = '//张三';
alert("加密的："+encodeURIComponent(box));//特殊字符和中文编码了
var box = '//张三';
alert("解密的"+decodeURI(encodeURI(box))); //还原
var box = '//张三';
alert("解密的"+decodeURIComponent(encodeURIComponent(box)));//还原
</script>
**eval：计算结果 **
alert(eval(2+2)); 也支持function定义
Date：
参考网址：http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var date = new Date(“July 4,2004,6:25:22”)
var date = new Date(“July 4,2004”)
var date = new Date(2004,7,4,6,25,22)// 2004年8月4日
var date = new Date(2004,7,4)// 2004年8月4日
var date = new Date(“2004/7/4”)
var date = new Date(Milliseconds)
var date = new Date();
获取日期和时间的方法
getYear()：返回年数；（小于2000年返回两位）
getFullYear()：返回年数；
getMonth()：返回当月号数；（比实际小1）
getDate()：返回当日号数；
getDay()：返回星期几；（0表示星期日 1-6就是星期1至星期六）
getHours()：返回小时数；
getMinutes()：返回分钟数；
getSeconds()：返回秒数；
getTime()：返回毫秒数；
设置日期和时间的方法
setYear()：设置年数；
setMonth()：设置当月号数；（set7表示8月）
setDate()：设置当日号数；
setDay()：设置星期几；
setHours()：设置小时数；
setMinutes()：设置分钟数；
setSeconds()：设置秒数；
setTime()：设置毫秒数；
课堂练习：
在页面打印当前年月日时分秒和星期
yyyy年MM月dd日 HH:mm:ss 星期***
Math
参考网址：
http://www.w3school.com.cn/jsref/jsref_obj_math.asp
属性：PI LN10 SQRT1-2等
如： var pi_value=Math.PI;
方法：
abs(x):
<script type="text/javascript">
document.write(Math.abs(7.25) + "<br />")
document.write(Math.abs(-7.25) + "<br />")
document.write(Math.abs(7.25-10))
</script>
ceil(x):
exp(x):
floor(x):
round(x):
sqrt(x):
random():
String
var string_name = “string of text”;
var string_name = new String(“string of text”)
属性
length：返回String对象的长度
方法：同学试一下。重点试indexOf lastIndexOf replace substring substr charAt charCodeAt
锚点
<a href="#chap01">第1章 date</a>
<a name="chap01">Date</a>
代码样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#chap01">第1章 date</a>
<a href="#chap02">第2章 String</a>
</a>
<br><br><br><br><br><br><br>
</a>
<br><br><br><br><br><br><br>
<a name="chap01">Date</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="chap02">String</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
</html>
正则表达式
var reg= new RegExp('/^\w{6,20}$/}'); //正则验证规则设置
如：
if(reg.test(username)){
alert("格式正确");
}else{
alert("格式错误");
return false;
}
var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符
var box = /box/; //直接用两个反斜杠
var box = /box/ig;
i--大小写不敏感
g--全局匹配
m-多行匹配
定时器
setTimeout(执行的js,毫秒)
setInterval(执行的js,毫秒)
两者区别setTimeout 延迟几毫秒执行一次js
setInterval 每间隔一定毫秒数执行一段js
clearInterval(名字);清除定时器
clearTimout(名字);
写法：
<script>
var t=setTimeout("alert(new Date())",5000);
</script>
<script>
var t=setInterval("alert(new Date())",1000);
</script>
学生练习
把上面做的时钟改为每秒刷新的
正则表达式语法 （讲）##
两种写法
第一种字面量方式
var reg = /abcd/g；
第二种 new 对象的方式
var reg = new RegExp('abcd'，'g');
这两种写法都是两部分参数，第一部分定义验证规则，第二部分是属性
属性就三个值 i g m
i-忽略大小写进行匹配
g-全局匹配
m-多行匹配
第一部分规则是正则的关键。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\w 用于匹配字母，数字或下划线字符。
\W W大写，可以匹配任何一个字母或者数字或者下划线以外的字符
[a-z] 字符范围。匹配指定范围内的任意字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。
x|y 匹配 x 或 y
{n} 表示前面的字符或者组合项连续出现n次 ---待确认
{n,} 表示前面出现的字符或者组合项，至少出现n次
{n,m} 表示前面出现的字符或者组合项，至少出现n次，至多出现m次，（n<＝m）
\d{4} 4个任意的数字[a-z]{6} --待确认
<script>
//6-20位的英文数字字母下划线，就可以用下面的规则
var reg=new RegExp(/^\w{6,20}$/);
if(reg.test("wangq")){
alert("格式正确");
}else{
alert("格式错误");
}
</script>
验证身份证号
var reg=new RegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/);
if(reg.test("65010495093007167C")){
alert("格式正确");
}else{
alert("格式错误");
}
验证邮编
var reg=new RegExp(/^\d{6}$/);
if(reg.test("123456")){
alert("正确");
}else{
alert("错误");
}
阻止表单自动提交
onsubmit="return functionname();"
function如果返回false阻止表单提交，如果返回true则可以提交
<form id="form1" onsubmit="return validate()">
<input type="text" id="username"/>
<input type="submit"/>
</form>
function validate(){
var name=document.getElementById("username").value;
alert("验证错误");
return false;
}
学生练习
制作一个注册页面用户名不能为空并且（6-20位英文字母数字下划线）
密码 重复密码 6位以上英文字母数字下划线 密码和重复密码必须一致
身份证号：旧身份证号为15位数字
新身份证号为18位数字， 或17位数字，最末位为x或X
email正常的邮箱规则
常用的正则
验证邮政编码：/^\d{6} [图片上传失败...(image-a0573e-1553582541439)]
/
验证身份证号码：/^\d{15} | \d{18} | \d{17}[x X] [图片上传失败...(image-7fa723-1553582541439)]
/
验证电子邮箱地址：/^\w+((-\w+)|(.\w+))@[A-Za-z0-9] ((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+[图片上传失败...(image-67e51f-1553582541439)]
/
网友评论