第2章數(shù)據(jù)對象與正則(9課時)

目標(biāo)

數(shù)組（創(chuàng)建、使用承匣、常用方法）

對象（線上學(xué)習(xí)創(chuàng)建使用對象魄懂、掌握Script內(nèi)置對象）

正則表達(dá)式

1熊楼、數(shù)組

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

創(chuàng)建

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

使用

讀取

數(shù)組名[下標(biāo)索引];

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

賦值

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

數(shù)組的主要屬性length

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

for循環(huán)賦值取值

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循環(huán)打印? ? ? ? ? for(var i=0;i

常用方法

http://www.reibang.com/writer#/notebooks/30664089/notes/35709661

添加的方法

push :從后面追加（**）

unshift：從前面插入

splice：刪除和添加

concat：連接

刪除的方法

splice：刪除和添加

pop：從后面刪除

shift():從前面刪除

數(shù)組轉(zhuǎn)成字符串

join:把數(shù)組轉(zhuǎn)成用指定分隔符分隔的字符串（）

toString():把數(shù)組轉(zhuǎn)成用逗號分隔的字符串（

）

其他方法

[reverse()]：反轉(zhuǎn)

sort():排序

slice：截取

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

push

push() 方法可向數(shù)組的末尾添加一個或多個元素鸭叙，并返回新的長度觉啊。

push與concat作用相似，都能連接數(shù)組

不同之處：

1）返回值類型不同沈贝。concat返回連接后的數(shù)組 push返回新數(shù)組的長度

2）concat連接后原數(shù)組沒變杠人，實際變成了新的數(shù)組

push是對改變原數(shù)組（****）

join

join() 數(shù)組轉(zhuǎn)成字符串。

document.write("數(shù)組轉(zhuǎn)成字符串：-------》"+array_2.join())

打印結(jié)果為數(shù)組元素用逗號分隔

1,2,3,4,5,6

toString：把數(shù)組轉(zhuǎn)換為字符串宋下，并返回結(jié)果

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結(jié)果"+arr.sort()+" ");document.write("排序算法sort結(jié)果"+arr.sort(sortNumber)+" ");document.write("toString后的結(jié)果"+arr.toString()+" ");document.write("join后的結(jié)果"+arr.join(";")+" ");</script>

join與toString的異同

相同點(diǎn)：都可以將數(shù)組轉(zhuǎn)換成字符串

不同點(diǎn)：join默認(rèn)用逗號分隔嗡善，但可以通過調(diào)用有參構(gòu)造指定分隔符

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

concat

reverse

reverse() 方法用于顛倒數(shù)組中元素的順序学歧。<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><script>var array_1=new Array(1,2,3,"a","b");? ? ? ? ? ? //連接之后變成新的數(shù)組,原數(shù)組沒有變化? ? ? ? ? ? var array_2=array_1.concat(4,5,6);? ? ? ? ? ? /* for(var index in array_2){? ? ? ? ? ? ? ? alert(array_2[index]);? ? ? ? ? ? } */? ? ? ? ? ? document.write("數(shù)組轉(zhuǎn)成字符串：-------》"+array_2.join()+" ");? ? ? ? ? ? document.write("數(shù)組反轉(zhuǎn)后：-------》"+array_2.reverse());</script></head><body></body></html>

pop

pop() 方法用于刪除并返回數(shù)組的最后一個元素罩引。

學(xué)生練習(xí)

shift：刪除并返回數(shù)組的第一個元素

slice：從某個已有的數(shù)組返回選定的元素（截取從指定下標(biāo)開始到指定下標(biāo)結(jié)束的子數(shù)組）

寫法：? arrayObject.slice(start,end)? start end為元素下標(biāo)

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

start,end還可以為負(fù)數(shù)，表示從尾部開始截取

sort：對數(shù)組的元素進(jìn)行排序

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

注意：無論是數(shù)字還是字符串枝笨，默認(rèn)的排序都是按首字母順序袁铐，如果數(shù)字想按照大小排序，需要寫排序算法伺帘。

制作省市聯(lián)動

參考手冊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一維數(shù)組定義? ? ? ? ? ? var province = new Array();? ? ? ? ? ? //給數(shù)組賦值? ? ? ? ? ? province[0] = "遼寧省";? ? ? ? ? ? province[1] = "吉林省";? ? ? ? ? ? ? ? ? ? ? ? //準(zhǔn)備城市信息二維數(shù)組? ? ? ? ? ? //二維數(shù)組? ? ? ? ? ? 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);? ? ? ? ? ? ? ? //獲取元素在數(shù)組中的真實索引? ? ? ? ? ? ? ? var index=provinces.selectedIndex-1;? ? ? ? ? ? ? ? //讀取citys中第一維的下標(biāo)為index的數(shù)據(jù)? ? ? ? ? ? ? ? //citys[index] 是實際需要加載的城市的信息? ? ? ? ? ? ? ? //為了解決選項重復(fù)添加的問題,需要在每次添加前先清空city下拉列表框? ? ? ? ? ? ? ? city.options.length=0;? ? ? ? ? ? ? ? for(var i=0;i

2昭躺、對象

創(chuàng)建忌锯、使用（線上）

? ? ? ? obj.name="wang.qj";

? ? ? ? obj.age=18;

? ? ? ? obj.sayName=function(name){

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

? ? ? ? }

? ? ? ? alert(obj.age);

? ? ? ? obj.sayName(obj.name);

? ? </script>//主要掌握這種對象創(chuàng)建的方式//json格式的對象有兩種? //{}表示對象形式? []對象數(shù)組//{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("學(xué)習(xí)科目："+content);}};alert(stu2.name);stu2.study("java");//json數(shù)組varstus=[{name:"wang.qj",age:18},{name:"張三",age:19}];alert("json數(shù)組"+stus[0].name);

JavaScript內(nèi)置對象

常用的內(nèi)部對象

Array伪嫁、Global、Date偶垮、Math张咳、String帝洪、Number、Boolean

Array：見上面部分

Global: ECMAScript 中的Global 對象在某種意義上是作為一個終極的“兜底兒對象”來定義的脚猾。換句話說葱峡，不屬于任何其他對象的屬性和方法，最終都是它的屬性和方法龙助。事實上砰奕，沒有全局變量或全局函數(shù)；所有在全局作用域中定義的屬性和函數(shù)提鸟，都是Global 對象的屬性军援。本書前面介紹過的那些函數(shù)，諸如isNaN()称勋、isFinite()胸哥、parseInt()以及parseFloat()等看起來都像獨(dú)立的函數(shù)，實際上全都是Global對象的方法赡鲜。還有就是常見的一些特殊值空厌，如：NaN、undefined等都是它的屬性银酬。

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

encodeURI() 編碼嘲更，加密

encodeURIComponent() 編碼。支持中文和特殊字符

decodeURI() 解碼揩瞪，解密

decodeURIComponent() 解碼

**eval：計算結(jié)果? **

alert(eval(2+2)); 也支持function定義

Date：

參考網(wǎng)址：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()：返回年數(shù)哮内；（小于2000年返回兩位）

getFullYear()：返回年數(shù)；

getMonth()：返回當(dāng)月號數(shù)壮韭；（比實際小1）

getDate()：返回當(dāng)日號數(shù)北发；

getDay()：返回星期幾；（0表示星期日 1-6就是星期1至星期六）

getHours()：返回小時數(shù)喷屋；

getMinutes()：返回分鐘數(shù)琳拨；

getSeconds()：返回秒數(shù)；

getTime()：返回毫秒數(shù)屯曹；

設(shè)置日期和時間的方法

setYear()：設(shè)置年數(shù)狱庇；

setMonth()：設(shè)置當(dāng)月號數(shù)；（set7表示8月）

setDate()：設(shè)置當(dāng)日號數(shù)恶耽；

setDay()：設(shè)置星期幾密任；

setHours()：設(shè)置小時數(shù)；

setMinutes()：設(shè)置分鐘數(shù)偷俭；

setSeconds()：設(shè)置秒數(shù)浪讳；

setTime()：設(shè)置毫秒數(shù)；

課堂練習(xí)：

在頁面打印當(dāng)前年月日時分秒和星期

yyyy年MM月dd日 HH:mm:ss 星期***

Math

參考網(wǎng)址：

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對象的長度

方法：同學(xué)試一下涌萤。重點(diǎn)試indexOf lastIndexOf replace substring substr charAt charCodeAt

錨點(diǎn)

第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淹遵、正則表達(dá)式語法（講）##

兩種寫法

第一種字面量方式

var? reg = /abcd/g口猜；

var? box = /box/;? ? ? ? ? ? //直接用兩個反斜杠

var? box = /box/ig;

第二種 new 對象的方式

var? box = new RegExp('box', 'ig');? //第二個參數(shù)可選模式修飾符

這兩種寫法都是兩部分參數(shù)，第一部分定義驗證規(guī)則透揣，第二部分是屬性

屬性就三個值 i g m

i-忽略大小寫進(jìn)行匹配

g-全局匹配

m-多行匹配

第一部分規(guī)則是正則的關(guān)鍵济炎。

\d? ? ? 匹配一個數(shù)字字符。等價于 [0-9]辐真。

\D? ? 匹配一個非數(shù)字字符须尚。等價于 [^0-9]。

\w? ? 用于匹配字母侍咱，數(shù)字或下劃線字符恨闪。

\W? ? W大寫，可以匹配任何一個字母或者數(shù)字或者下劃線以外的字符

[a-z]? 字符范圍放坏。匹配指定范圍內(nèi)的任意字符咙咽。

[^a-z] 負(fù)值字符范圍。匹配任何不在指定范圍內(nèi)的任意字符淤年。

x|y 匹配 x 或 y

{n}? ? 表示前面的字符或者組合項連續(xù)出現(xiàn)n次? ,字符串固定n個長度---待確認(rèn)

{n,}? ? 表示前面出現(xiàn)的字符或者組合項钧敞，至少出現(xiàn)n次，字符串最少是n個字符

{n,m} 表示前面出現(xiàn)的字符或者組合項麸粮，至少出現(xiàn)n次溉苛，至多出現(xiàn)m次，（n<＝m）字符串長度是n-m之間

\d{4}? ? 4個任意的數(shù)字[a-z]{6}? ? ? ? ? ? ? --待確認(rèn)

在線正則表達(dá)測試網(wǎng)址:http://tool.oschina.net/regex/#

驗證身份證號

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

驗證手機(jī)號

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;}}

學(xué)生練習(xí)

制作一個注冊頁面用戶名不能為空并且（6-20位英文字母數(shù)字下劃線）

密碼重復(fù)密碼 6位以上英文字母數(shù)字下劃線密碼和重復(fù)密碼必須一致

身份證號：舊身份證號為15位數(shù)字

新身份證號為18位數(shù)字愚战，或17位數(shù)字，最末位為x或X

email正常的郵箱規(guī)則

手機(jī)號：1開頭第2位可以是3-9齐遵，后面跟9位數(shù)字

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">//阻止自動提交? ? ? ? ? ? //1 onsubmit綁定一個函數(shù) ,? ? ? ? ? ? //2在函數(shù)里返回true/false 如果返回TRUE,表單正常提交,返回false阻止提交? ? ? ? ? ? function val(){? ? ? ? ? ? ? ? //通過id分別獲取用戶名,手機(jī)號,身份證號郵箱? ? ? ? ? ? ? ? var name=document.getElementById("userName").value;? ? ? ? ? ? ? ? var tel=document.getElementById("tel").value;? ? ? ? ? ? ? ? var id=document.getElementById("idNumber").value;? ? ? ? ? ? ? ? var email=document.getElementById("email").value;? ? ? ? ? ? ? ? //用正則進(jìn)行驗證? ? ? ? ? ? ? ? //6-20位的英文數(shù)字下劃線? ? ? ? ? ? ? ? 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)){//手機(jī)號驗證通過? ? ? ? ? ? ? ? ? ? alert("手機(jī)號不合法");? ? ? ? ? ? ? ? ? ? return false;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? //繼續(xù)驗證身份證號? ? ? ? ? ? ? ? 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位的字符"/> 手機(jī)號：<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去掉寂玲，在控制臺看結(jié)果

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

轉(zhuǎn)至：↓

鏈接：http://www.reibang.com/p/5d5a15a5c6c7

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)梗摇，非商業(yè)轉(zhuǎn)載請注明出處拓哟。

第2章 數(shù)據(jù)對象與正則(9課時)

第2章數(shù)據(jù)對象與正則(9課時)