2 數(shù)據(jù)對象與正則+定時器

作者：wqjcarnation
鏈接：http://www.itdecent.cn/p/5d5a15a5c6c7

數(shù)組

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

創(chuàng)建

  var Obj = new Array();
  var Obj = new Array( Size );
  var Obj = new Array( 元素1, 元素2, …, 元素N );
  var   p1 = ['tom', 28, 'NewYork'];

使用

讀取
數(shù)組名[下標索引];

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

賦值
products [0] = “value1”;
products [1] = “value2”;
數(shù)組的主要屬性length

var Obj = new Array( 1, 2, 3 );
var count = Obj.length;

for循環(huán)賦值取值
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循環(huán)打印
           for(var i=0;i<products.length;i++){
               //alert(products[i]);
           }
           //加強for 循環(huán)到的是數(shù)組下標
           for(var index in products){
               alert(products[index]);
           }
        </script>
    </head>
    <body>
    </body>
</html>

常用方法

http://www.itdecent.cn/writer#/notebooks/30664089/notes/35709661

concat

    <script>
        var array_1=new Array(1,2,3);
        //連接之后變成新的數(shù)組,原數(shù)組沒有變化
        var array_2=array_1.concat(4,5,6);
        for(var index in array_2){
            alert(array_2[index]);
        }
    </script>

join

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

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

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

1,2,3,4,5,6

reverse

reverse() 方法用于顛倒數(shù)組中元素的順序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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()+"<br>");
            document.write("數(shù)組反轉(zhuǎn)后：-------》"+array_2.reverse());
        </script>
    </head>
    <body>
    </body>
</html>

push

push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
push與concat作用相似，都能連接數(shù)組
不同之處：
1）返回值類型不同。concat返回連接后的數(shù)組 push返回新數(shù)組的長度
2）concat連接后原數(shù)組沒變，實際變成了新的數(shù)組
push是對改變原數(shù)組（****）

<script>
        var array_1 = new Array(1, 2, 3, "a", "b");
        array_1.push(4, 5, 6);
        document.write("數(shù)組轉(zhuǎn)成字符串：-------》" + array_1.join() + "<br>");
</script>

pop

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

    <script>
        var array_1 = new Array(1, 2, 3, "a", "b");
        array_1.push(4, 5, 6);
        document.write("數(shù)組轉(zhuǎn)成字符串：-------》" + array_1.join() + "<br>");
        var del=array_1.pop();
        document.write("被刪除的元素-------》" +del+ "<br>");
        document.write("pop后數(shù)組轉(zhuǎn)成字符串：-------》" + array_1.join() + "<br>");
    </script>

學生練習

shift：刪除并返回數(shù)組的第一個元素
slice：從某個已有的數(shù)組返回選定的元素（截取從指定下標開始到指定下標結(jié)束的子數(shù)組）
寫法： arrayObject.slice(start,end) start end為元素下標
arrayObject.slice(start) 省略end時表示截取到尾部
start,end還可以為負數(shù)，表示從尾部開始截取

sort：對數(shù)組的元素進行排序
http://www.w3school.com.cn/jsref/jsref_sort.asp
注意：無論是數(shù)字還是字符串，默認的排序都是按首字母順序，如果數(shù)字想按照大小排序，需要寫排序算法。

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

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

join與toString的異同

相同點：都可以將數(shù)組轉(zhuǎn)換成字符串
不同點：join默認用逗號分隔，但可以通過調(diào)用有參構(gòu)造指定分隔符
toString只能用逗號分隔。不可以定制

制作省市聯(lián)動
參考手冊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一維數(shù)組定義
            var province = new Array();
            //給數(shù)組賦值
            province[0] = "遼寧省";
            province[1] = "吉林省";

            //準備城市信息 二維數(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中第一維的下標為index的數(shù)據(jù)
                //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>

對象

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

JavaScript內(nèi)置對象

常用的內(nèi)部對象
Array、Global、Date、Math、String、Number、Boolean
Array：見上面部分
Global: ECMAScript 中的Global 對象在某種意義上是作為一個終極的“兜底兒對象”來定義的。換句話說，不屬于任何其他對象的屬性和方法，最終都是它的屬性和方法。事實上，沒有全局變量或全局函數(shù)；所有在全局作用域中定義的屬性和函數(shù)，都是Global 對象的屬性。本書前面介紹過的那些函數(shù)，諸如isNaN()、isFinite()、parseInt()以及parseFloat()等看起來都像獨立的函數(shù)，實際上全都是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：計算結(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()：返回當月號數(shù)；（比實際小1）
getDate()：返回當日號數(shù)；
getDay()：返回星期幾；（0表示星期日 1-6就是星期1至星期六）
getHours()：返回小時數(shù)；
getMinutes()：返回分鐘數(shù)；
getSeconds()：返回秒數(shù)；
getTime()：返回毫秒數(shù)；
設(shè)置日期和時間的方法
setYear()：設(shè)置年數(shù)；
setMonth()：設(shè)置當月號數(shù)；（set7表示8月）
setDate()：設(shè)置當日號數(shù)；
setDay()：設(shè)置星期幾；
setHours()：設(shè)置小時數(shù)；
setMinutes()：設(shè)置分鐘數(shù)；
setSeconds()：設(shè)置秒數(shù)；
setTime()：設(shè)置毫秒數(shù)；
課堂練習：
在頁面打印當前年月日時分秒和星期
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):

<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}$/}'); //正則驗證規(guī)則設(shè)置
如：
if(reg.test(username)){
alert("格式正確");
}else{
alert("格式錯誤");
return false;
}
var box = new RegExp('box', 'ig'); //第二個參數(shù)可選模式修飾符
var box = /box/; //直接用兩個反斜杠
var box = /box/ig;
i--大小寫不敏感
g--全局匹配
m-多行匹配

定時器
setTimeout(執(zhí)行的js,毫秒)
setInterval(執(zhí)行的js,毫秒)

兩者區(qū)別setTimeout 延遲幾毫秒執(zhí)行一次js
setInterval 每間隔一定毫秒數(shù)執(zhí)行一段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');

這兩種寫法都是兩部分參數(shù)，第一部分定義驗證規(guī)則，第二部分是屬性
屬性就三個值 i g m
i-忽略大小寫進行匹配
g-全局匹配
m-多行匹配
第一部分規(guī)則是正則的關(guān)鍵。

\d 匹配一個數(shù)字字符。等價于 [0-9]。
\D 匹配一個非數(shù)字字符。等價于 [^0-9]。
\w 用于匹配字母，數(shù)字或下劃線字符。
\W W大寫，可以匹配任何一個字母或者數(shù)字或者下劃線以外的字符
[a-z] 字符范圍。匹配指定范圍內(nèi)的任意字符。
[^a-z] 負值字符范圍。匹配任何不在指定范圍內(nèi)的任意字符。
x|y 匹配 x 或 y

{n} 表示前面的字符或者組合項連續(xù)出現(xiàn)n次 ---待確認
{n,} 表示前面出現(xiàn)的字符或者組合項，至少出現(xiàn)n次
{n,m} 表示前面出現(xiàn)的字符或者組合項，至少出現(xiàn)n次，至多出現(xiàn)m次，（n<＝m）
\d{4} 4個任意的數(shù)字[a-z]{6} --待確認

  <script>
   //6-20位的英文數(shù)字字母下劃線，就可以用下面的規(guī)則
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位英文字母數(shù)字下劃線）
密碼 重復密碼 6位以上英文字母數(shù)字下劃線 密碼和重復密碼必須一致
身份證號：舊身份證號為15位數(shù)字
新身份證號為18位數(shù)字， 或17位數(shù)字，最末位為x或X
email正常的郵箱規(guī)則

常用的正則

驗證郵政編碼：/^\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)]

/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容