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

目标

数组（创建、使用、常用方法）
对象（线上学习创建使用对象、掌握Script内置对象）
正则表达式

1、数组

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

添加的方法

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是对改变原数组（****）

<script>
        var array_1 = new Array(1, 2, 3, "a", "b");
        array_1.push(4, 5, 6);
        document.write("数组转成字符串：-------》" + array_1.join() + "<br>");
</script>

join

join() 数组转成字符串。

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

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

1,2,3,4,5,6

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

        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只能用逗号分隔。不可以定制

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>

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>

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

制作省市联动

参考手册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
                                           //http://www.runoob.com/jsref/coll-select-options.html
                    //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>

2、对象

创建、使用（线上）

    <script>
        var obj=new Object();
        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}]
        var stu2={name:"wang.qj",age:18,study:function(content){
            alert("学习科目："+content);
        }};
        alert(stu2.name);
        stu2.study("java");
        //json数组
        var stus=[{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() 解码

 <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

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

锚点

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

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/#

          <script>
            //密码是6-20位之间的a-z A-Z 0-9
            var reg=new RegExp(/^[\w_@]{6,20}$/);
            //调用test方法进行验证
            var result=reg.test("123456_@");
            //结果判断
            if(result){
                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(/^1[3456789]\d{9}$/)

验证东软邮箱

    <script>
        //【英文数字._】@【英文数字】.【英文数字】
        var reg=new RegExp(/^([\w\._]+)@(\w+)\.(\w+)$/);
        //调用test方法进行验证
        var result=reg.test("wang.qj@neusoft.com");
        //结果判断
        if(result){
            alert("验证通过");
        }else{
            alert("验证失败 ");
        }
    </script>

阻止表单自动提交

onsubmit="return functionname();"
function如果返回false阻止表单提交，如果返回true则可以提交

<form id="form1" onsubmit="return validate()">
<input type="text" id="username"/>
<input type="submit"/>
</form>

        function validate() {
        var username = document.getElementById("username").value;
        var regu = new RegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/);
        if (!regu.test(username)) {
            alert("验证错误");
            return false;
        }else{
            return true;
        }
    }

学生练习

制作一个注册页面用户名不能为空并且（6-20位英文字母数字下划线）
密码重复密码 6位以上英文字母数字下划线密码和重复密码必须一致
身份证号：旧身份证号为15位数字
新身份证号为18位数字，或17位数字，最末位为x或X
email正常的邮箱规则
手机号：1开头第2位可以是3-9，后面跟9位数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="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>
        <form action="#" onsubmit="return val();">
            用户名：<input type="text" name="userName" id="userName" placeholder="6-20位的字符"/><br>
            手机号：<input type="text" name="tel" id="tel" /><br>
            身份证：<input type="text" name="idNumber" id="idNumber"/><br>
            邮箱：<input type="text" name="email" id="email"/><br>
            <input type="submit" />
        </form>
    </body>
</html>

常用的正则

验证邮政编码：/^\d{6} $/ 验证固定电话：/^\d{3}-\d{8} | \d{4} - \d{7}$ /
验证身份证号码：/^(\d{15})|(\d{18})|(\d{17}[xX]) $/ 验证移动电话：/^\d13|\d15\d{9}$ /
验证电子邮箱地址：/^\w+((-\w+)|(.\w+))@[A-Za-z0-9] ((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+ $/ /^([\w\.-]+)@(\w+)\.(\w+)$ /

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

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

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

作业

0、练习字符串常用方法
1、输入一个随机位数的数字(10位以内)，逆序打印输出各位数是多少
如：输入：8273842
输出：
2
4
8
3
7
2
8

2、定义函数，求某个年份是否为闰年，并在页面上点击按钮调用函数
3、求100-999之间的水仙花数，放入数组并循环打印出年份

最后编辑于：2020.09.02 16:11:45

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,816评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,729评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,300评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,780评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,890评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,084评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,151评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,912评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,355评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,666评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,809评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,504评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,150评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,121评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,628评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,724评论 2赞 351

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

目标

1、数组

创建

使用

完整样例

常用方法

添加的方法

删除的方法

数组转成字符串

其他方法

push

join

join与toString的异同

concat

reverse

pop

学生练习

制作省市联动

2、对象

JavaScript内置对象

Math

String

锚点

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

阻止表单自动提交

学生练习

常用的正则

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

作业

推荐阅读更多精彩内容

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

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