第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

完整样例

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(";")+"
");

join与toString的异同

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

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

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

concat

reverse

reverse() 方法用于颠倒数组中元素的顺序。

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

//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、对象

创建、使用（线上）

//主要掌握这种对象创建的方式//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):

document.write(Math.abs(7.25) + "
")document.write(Math.abs(-7.25) + "
")document.write(Math.abs(7.25-10))

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

代码样例：

第1章 date第2章 String













Date


























































String

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则可以提交

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位数字

//阻止自动提交            //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])$/);                //[email protected]                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;            }用户名：
手机号：
身份证：
邮箱：

常用的正则

验证邮政编码：/^\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

来源：

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