第2章数据对象与正则(9课时)

目标

数组（创建、使用、常用方法）

对象（线上学习创建使用对象、掌握Script内置对象）

正则表达式

1、数组

http://www.w3school.com.cn/jsref/jsref_obj_array.asp

创建

varObj=newArray();varObj=newArray(Size);varObj=newArray(元素1,元素2,…,元素N);varp1=['tom',28,'NewYork'];

使用

读取

数组名[下标索引];

varproducts=newArray(“洗衣粉”,“香皂”,“洗洁精”);// 商品列表varproduct=products[1];// 取出第二种商品

赋值

products [0] = “value1”;products [1] = “value2”;

数组的主要属性length

varObj=newArray(1,2,3);varcount=Obj.length;

for循环赋值取值

for(vari=0;i<products.length;i++){products[i]=“2000”+i;}for(varindexinproducts){alert(products[index]);}

完整样例

<!DOCTYPE html><html><head><metacharset="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

常用方法

https://www.jianshu.com/writer#/notebooks/30664089/notes/35709661

添加的方法

push :从后面追加（**）

unshift：从前面插入

splice：删除和添加

concat：连接

删除的方法

splice：删除和添加

pop：从后面删除

shift():从前面删除

数组转成字符串

join:把数组转成用指定分隔符分隔的字符串（）

toString():把数组转成用逗号分隔的字符串（

）

其他方法

[reverse()]：反转

sort():排序

slice：截取

最常用的三个方法:push join toString

push

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

push与concat作用相似，都能连接数组

不同之处：

1）返回值类型不同。concat返回连接后的数组 push返回新数组的长度

2）concat连接后原数组没变，实际变成了新的数组

push是对改变原数组（****）

join

join() 数组转成字符串。

document.write("数组转成字符串：-------》"+array_2.join())

打印结果为数组元素用逗号分隔

1,2,3,4,5,6

toString：把数组转换为字符串，并返回结果

function sortNumber(a, b) {

return a - b;

}

vararr=newArray(6);arr[0]="10";arr[1]="5";arr[2]="40";arr[3]="25";arr[4]="1000";arr[5]="1";document.write(arr+" ");document.write("原始的sort结果"+arr.sort()+" ");document.write("排序算法sort结果"+arr.sort(sortNumber)+" ");document.write("toString后的结果"+arr.toString()+" ");document.write("join后的结果"+arr.join(";")+" ");</script>

join与toString的异同

相同点：都可以将数组转换成字符串

不同点：join默认用逗号分隔，但可以通过调用有参构造指定分隔符

toString只能用逗号分隔。不可以定制

concat

reverse

reverse() 方法用于颠倒数组中元素的顺序。<!DOCTYPE html><html><head><metacharset="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()+" "); document.write("数组反转后：-------》"+array_2.reverse());</script></head><body></body></html>

pop

pop() 方法用于删除并返回数组的最后一个元素。

学生练习

shift：删除并返回数组的第一个元素

slice：从某个已有的数组返回选定的元素（截取从指定下标开始到指定下标结束的子数组）

写法： arrayObject.slice(start,end) start end为元素下标

arrayObject.slice(start) 省略end时表示截取到尾部

start,end还可以为负数，表示从尾部开始截取

sort：对数组的元素进行排序

http://www.w3school.com.cn/jsref/jsref_sort.asp

注意：无论是数字还是字符串，默认的排序都是按首字母顺序，如果数字想按照大小排序，需要写排序算法。

制作省市联动

参考手册http://www.w3school.com.cn/jsref/index.asp

http://www.runoob.com/jsref/coll-select-options.html

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="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

2、对象

创建、使用（线上）

obj.name="wang.qj";

obj.age=18;

obj.sayName=function(name){

alert("我的名字叫"+name);

}

alert(obj.age);

obj.sayName(obj.name);

</script>//主要掌握这种对象创建的方式//json格式的对象有两种 //{}表示对象形式 []对象数组//{key:value,key:value}//[{key:value,key:value},{key:value,key:value},{key:value,key:value}]varstu2={name:"wang.qj",age:18,study:function(content){alert("学习科目："+content);}};alert(stu2.name);stu2.study("java");//json数组varstus=[{name:"wang.qj",age:18},{name:"张三",age:19}];alert("json数组"+stus[0].name);

JavaScript内置对象

常用的内部对象

Array、Global、Date、Math、String、Number、Boolean

Array：见上面部分

Global: ECMAScript 中的Global 对象在某种意义上是作为一个终极的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是Global 对象的属性。本书前面介绍过的那些函数，诸如isNaN()、isFinite()、parseInt()以及parseFloat()等看起来都像独立的函数，实际上全都是Global对象的方法。还有就是常见的一些特殊值，如：NaN、undefined等都是它的属性。

http://www.w3school.com.cn/jsref/jsref_obj_global.asp

encodeURI() 编码，加密

encodeURIComponent() 编码。支持中文和特殊字符

decodeURI() 解码，解密

decodeURIComponent() 解码

**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):

<scripttype="text/javascript">document.write(Math.abs(7.25) + " ")document.write(Math.abs(-7.25) + " ")document.write(Math.abs(7.25-10))</script>

ceil(x):

exp(x):

floor(x):

round(x):

sqrt(x):

random():

String

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

var string_name = “string of text”;

var string_name = new String(“string of text”)

属性

length：返回String对象的长度

方法：同学试一下。重点试indexOf lastIndexOf replace substring substr charAt charCodeAt

锚点

第1章 date

Date

代码样例：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><ahref="#chap01">第1章 date</a><ahref="#chap02">第2章 String</a></a> </a> <aname="chap01">Date</a> <aname="chap02">String</a> </body></html>

3、正则表达式语法（讲）##

两种写法

第一种字面量方式

var reg = /abcd/g；

var box = /box/; //直接用两个反斜杠

var box = /box/ig;

第二种 new 对象的方式

var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符

这两种写法都是两部分参数，第一部分定义验证规则，第二部分是属性

属性就三个值 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次，字符串最少是n个字符

{n,m} 表示前面出现的字符或者组合项，至少出现n次，至多出现m次，（n<＝m）字符串长度是n-m之间

\d{4} 4个任意的数字[a-z]{6} --待确认

在线正则表达测试网址:http://tool.oschina.net/regex/#

验证身份证号

varreg=newRegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}[xX]$)/);if(reg.test("65010495093007167C")){alert("格式正确");}else{alert("格式错误");}

验证手机号

var reg=new RegExp(/^1[3456789]\d{9}$/)

验证东软邮箱

阻止表单自动提交

onsubmit="return functionname();"

function如果返回false阻止表单提交，如果返回true则可以提交

<form id="form1"onsubmit="return validate()"><input type="text"id="username"/><input type="submit"/></form>functionvalidate(){varusername=document.getElementById("username").value;varregu=newRegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/);if(!regu.test(username)){alert("验证错误");returnfalse;}else{returntrue;}}

学生练习

制作一个注册页面用户名不能为空并且（6-20位英文字母数字下划线）

密码重复密码 6位以上英文字母数字下划线密码和重复密码必须一致

身份证号：旧身份证号为15位数字

新身份证号为18位数字，或17位数字，最末位为x或X

email正常的邮箱规则

手机号：1开头第2位可以是3-9，后面跟9位数字

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">//阻止自动提交 //1 onsubmit绑定一个函数 , //2在函数里返回true/false 如果返回TRUE,表单正常提交,返回false阻止提交 function val(){ //通过id分别获取用户名,手机号,身份证号邮箱 var name=document.getElementById("userName").value; var tel=document.getElementById("tel").value; var id=document.getElementById("idNumber").value; var email=document.getElementById("email").value; //用正则进行验证 //6-20位的英文数字下划线 var reg_name=new RegExp(/^[\w]{6,20}$/); var reg_tel=new RegExp(/^1[3456789]\d{9}$/); var reg_id=new RegExp(/^(\d{15})|(\d{18})|(\d{17}[xX])$/); //wangqj@neusoft.com var reg_email=new RegExp(/^[\w\.]+@[\w]+\.\w+$/); if(!reg_name.test(name)){//用户名验证通过 alert("用户名不合法"); return false; } if(!reg_tel.test(tel)){//手机号验证通过 alert("手机号不合法"); return false; } //继续验证身份证号 if(!reg_id.test(id)){ alert("身份证号不合法"); return false; } //再验证email if(!reg_email.test(email)){ alert("email不合法"); return false; } return true; }</script></head><body><formaction="#"onsubmit="return val();">用户名：<inputtype="text"name="userName"id="userName"placeholder="6-20位的字符"/> 手机号：<inputtype="text"name="tel"id="tel"/> 身份证：<inputtype="text"name="idNumber"id="idNumber"/> 邮箱：<inputtype="text"name="email"id="email"/> <inputtype="submit"/></form></body></html>

常用的正则

验证邮政编码：/^\d{6}

验证身份证号码：/^(\d{15})|(\d{18})|(\d{17}[xX])

验证电子邮箱地址：/^\w+((-\w+)|(.\w+))@[A-Za-z0-9] ((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+

gim小例子（感兴趣的试验一下）

试着将i或g去掉，在控制台看结果

varregx=/w3school/ig;varstr="Visit W3SchoolaW3school";varrs=str.match(regx);console.log("rs:",rs);

转至：↓

链接：https://www.jianshu.com/p/5d5a15a5c6c7

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

第2章 数据对象与正则(9课时)

第2章数据对象与正则(9课时)