JavaScript内置对象

JavaScript内置对象

JS的对象也分为内置对象和定义对象

• 例如，Java中Object、String、System属于内置对象
• 例如，自定义的Person、Student属于自定义的对象。JS的自定义对象是函数实现的

JS内置对象 String

String 对象属性

属性 描述
length 字符串的长度

String 对象方法

  方法             	描述                  
  charAt(x)      	返回在指定位置的字符。         
  indexOf(x)     	检索字符串。              
  lastIndexOf(x) 	从后向前搜索字符串。          
  split(x)       	把字符串分割为字符串数组。       
  substring(x, y)	提取字符串中两个指定的索引号之间的字符。
  substr(x)      	从起始索引号提取字符串中指定数目的字符。

演示代码

<script type="text/javascript">
    /*
    String对象
    */
    var str = "abc"// typeof 输出string
    var str2 = new String(str); //typeof 输出 object
    //以上定义方式,都可以使用String对象的方法

    var s = "a-b-c-de-FG";
    //字符串的长度
    //alert(s.length);

    //指定索引找字符
    //alert(s.charAt(1));

    //字符第一次出现的索引
    //alert(s.indexOf("c"));

    //字符最后一次出现的索引
    //alert(s.lastIndexOf("c"));

    //切割字符串
    /*  
    var strArr = s.split("-");
    for(var i = 0 ; i < strArr.length;i++){
    	alert(strArr[i]);
    }
	*/

    //获取索引之间的字符
    //alert(s.substring(1,3));

    //获取索引开始到长度的字符
    //alert(s.substr(1,3));

</script>

JS内置对象 Date

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

Date 对象方法

  方法              	描述                           
  getFullYear()   	从 Date 对象以四位数字返回年份。          
  getMonth()      	从 Date 对象返回月份 (0 ~ 11)。      
  getDate()       	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  getTime()       	返回 1970 年 1 月 1 日至今的毫秒数。     
  toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。    

演示代码：

<script type="text/javascript">
    /*
	 * Data对象
	 * 创建方式直接new
	 */
    var date = new Date();
    //拼接年月日
    alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
    //获取毫秒值
    alert(date.getTime());
    //根据本地时间格式，把 Date 对象转换为字符串。
    alert(date.toLocaleString());
</script>

JS内置对象 Math

Math是数学计算的对象,此对象无需创建,直接Math.调用

Math 对象方法

  方法      	描述            
  ceil(x) 	对数进行上舍入       
  floor(x)	对数进行下舍入。      
  round(x)	把数四舍五入为最接近的整数。

演示代码：

<script type="text/javascript">
    /*
	Math对象:直接调用
	*/
    //向上取整
    alert(Math.ceil(3.14));
    //向下取整
    alert(Math.floor(3.14));
    //四舍五入取整
    alert(Math.round(3.14));
</script>

JS内置对象 Array

Array 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型。

创建 Array 对象的语法:

new Array();
new Array(size);
new Array(element0, element0, ..., elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

Array 对象属性

属性			描述

length		设置或返回数组中元素的数目。

演示代码：

<script type="text/javascript">
    //定义数组对象
    var arr1 = new Array();
    //赋值元素
    arr1[0] = 1;
    arr1[1] = "a";
    arr1[2] = 2.2;
    alert(arr1);

    //定义数组对象
    var arr2 = new Array(3);
    //打印数组长度
    alert(arr2.length);

    //定义数组对象
    var arr3 = new Array(3,4,5,"a",true);
    alert(arr3);

    //开发中最常用方式
    var arr4 = [1,2,3,4,"a","b","c"];
    for(var i = 0 ; i< arr4.length;i++){
        alert(arr4[i]);
    }

    //定义二位数组
    var arr5 = [
        [1,2,3],["a",4,"b"],[true,5,false]
    ];
    //打印3
    alert(arr5[0][2]);
    //打印a
    alert(arr5[1][0]);
    //打印false
    alert(arr5[2][2]);
</script>

案例：省市二级联动

在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。

案例实现

步骤1：给注册页面添加select标签

<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
	<option value="">----请-选-择-省----</option>
	<option value="0">北京</option>
	<option value="1">吉林省</option>
	<option value="2">山东省</option>
	<option value="3">河北省</option>
	<option value="4">江苏省</option>
</select>
<select id="cityId" style="width:150px">
	<option value="">----请-选-择-市----</option>
</select>

步骤2：js实现

<script type="text/javascript">
    // 定义二维数组:存储省市信息
    var pros = [
        ["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"]
    ];
    function selectCity(province){
        //获取选中省份的市数组
        var cityArr = pros[province];
        //获取城市的select标签对象
        var cityEle = document.getElementById("cityId");

        //添加之前先清空option子标签
        cityEle.innerHTML="";
        //创建请选择的option子标签
        var optionEle = document.createElement("option");
        optionEle.innerHTML="----请-选-择-市----";
        cityEle.appendChild(optionEle);
        //遍历数组,几个元素就创建几个子option标签
        for(var i = 0;i < cityArr.length;i++){
            //创建子标签
            var optionEle = document.createElement("option");
            //设置子标签的标签体内容
            optionEle.innerHTML=cityArr[i];
            //添加子标签
            cityEle.appendChild(optionEle);
        }	
    }	
</script>

JS内置对象 RegExp正则表达式

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建 RegExp 对象的语法

直接量方式创建RegExp对象语法：

var reg = /pattern/; //返回一个新的 RegExp 对象

通过构造器方式创建 RegExp 对象语法：

var reg = new RegExp(pattern); //返回一个新的 RegExp 对象

方括号

方括号用于查找某个范围内的字符：

  表达式   	描述                  
  [abc] 	查找方括号之间的任何字符。       
  [^abc]	查找任何不在方括号之间的字符。     
  [0-9] 	查找任何从 0 至 9 的数字。    
  [a-z] 	查找任何从小写 a 到小写 z 的字符。
  [A-Z] 	查找任何从大写 A 到大写 Z 的字符。
  [A-z] 	查找任何从大写 A 到小写 z 的字符。

量词

量词					描述

n+					匹配任何包含至少一个 n 的字符串。

n*					匹配任何包含零个或多个 n 的字符串。

n?					匹配任何包含零个或一个 n 的字符串。

n{X}				匹配包含 X 个 n 的序列的字符串。

n{X,Y}				匹配包含 X 至 Y 个 n 的序列的字符串。

n{X,}				匹配包含至少 X 个 n 的序列的字符串。

n$					匹配任何结尾为 n 的字符串。

^n					匹配任何开头为 n 的字符串。

RegExp 对象方法

方法				描述	
test()				检索字符串中指定的值。返回 true 或 false。

定义方式: 直接定义和创建对象方式
<script type="text/javascript">
    /*
	正则表达式定义
	1. new RegExp对象
	2. 正则被定义在俩个//内

	[0-9][a-z][A-Z]{5}
	^匹配开头
	$匹配结尾
	*/
    var reg = new RegExp("^[0-9]{5}$");
    //正则对象方法test,测试与字符串是否匹配
    var flag = reg.test("a2345");
    alert(flag);

    var reg1 = /^[0-9]{5}$/;
    flag = reg1.test("6789 ");
    alert(flag);
</script>