JS 基础（4）ECMAScript5 —— 内置对象Array、String、Math、Date

[toc]

JavaScript分为三个部分：ECMAScript(JS语言本身基础语法)，DOM(文档对象模型，应用程序编程接口)，BOM(浏览器对象模型)。

JavaScript中的内置对象

js的内置对象有：Array、String、Math、Date。

一、Array（数组对象）

Array是js中最常用的一种类型，Array数组中的每一项可以保持任意类型的数值，数组的大小可以动态调整。

（一）创建数组

创建数组有两种方式：

1.使用Array()构造函数

    语法：new Array()

    小括号（）的用法：

        （1）可以为空

var num = new Array();

        （2）预先知道数组要保存的项目数量

var num = new Array(3);

        （3）向Array构造

var num = new Array(2,34,12,3,"poorpenguin");    //输出[2, 34, 12, 3, "poorpenguin"]

2.使用数组字面量表示法

    由一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开。

var colors =["red","yellow","green"];
var infos =[6,"poorpenguin",true,{email:"740XXXXX@QQ.com"}];

 

（二）数组读写

    读取数组和设置数组的值时，使用方括号 [索引] 方式。

    索引是从0开始设置。

（三）数组长度

    获取数组的长度。

    语法：array.length

    返回值：number

    数组长度的简单应用：

         a.通过设置length从数组的末尾移除项 或 向数组中添加新项。

var arr = [1,2,3,4,5,6];
arr.length = 3;
console.log(arr); //数组arr中的值为[1,2,3]

        b.当把一个值放在超出当前数组大小的位置上时，数组会重新计算长度，长度值为最后一项的索引+1。

var arr=[1,2,3,"a","b"];
arr[99] = "c";
console.log(arr.length); //返回值为100,数组的长度是100
console.log(arr[10]); //返回值是underfined

（三）数组的操作方法

    1.数组的栈方法    push()、unshift()、pop()、shift()。

    （1）push() 将新项加到数组尾部

                语法：array.push(newele1,newele2,newele3,....,newelex);

                功能：把它的参数顺序添加到array数组的尾部。

                返回值：添加后的数组新长度

var arr = [1,2,3,4];
document.write(arr.push(1,43)); //返回值为6

    （2）unshift() 将新项加到数组头部

                语法：arr.unshift(newele1,newele2,newele3,....);

                功能：把它的参数添加到arr数组开头。

                返回值：添加后的数组新长度

       

    （3）pop() 删除数组最后一个元素

                语法：arr.pop();

                功能：删除数组最后一个元素。

                返回值：返回被删除的那个元素。

var arr = [1,2,3,4];
document.write(arr.pop()); //返回值 4
document.write(arr); //返回值 [1,2,3]

 

    （4）shift() 删除数组的第一个元素

                语法：arr.shift();

                功能：删除数组的第一个元素

                返回值：返回被删除的那个元素。

var arr = [1,2,3,4];
document.write(arr.shift()); //返回值 1
document.write(arr); //返回值 [2,3,4]

   

    2. join() 数组转换为字符（String对象中的split()将字符串转换为数组）   

            语法：array.join(separator);

            功能：把数组中的所有元素按指定的分隔符放入一个字符串。

            返回值：字符串

var arr = [1,2,true,"poorpenguin","ac"];
var str = arr.join();
console.log(str);
console.log(typeof(str));

str = arr.join(); //默认情况下是逗号分隔
str = arr.join(""); //12truepoorpenguinac
str = arr.join("|"); //1|2|true|poorpenguin|ac

 

    3.reverse() 颠倒数组 

        语法：array.reverse();

        功能：用于颠倒数组中元素的顺序

        返回值：可以接收也可以不接收

var arr = [1,2,true,"poorpenguin","ac"];
var newArr = arr.reverse();    //也可以直接arr.reverse();不需要变量接收 
console.log(newArr); //返回值["ac", "poorpenguin", true, 2, 1]
console.log(arr);  //返回值["ac", "poorpenguin", true, 2, 1]

 

    4.sort() 数组按一定规则排序 

        语法：arrayObject.sort(sortby);

        功能：用于对数组元素进行排序。

        返回值：排序后的原数组，可接收也可不接收。

        具体用法：

       （1）不带参数，默认将数组中的元素当成字符串，按字符串的规律排序

var arr = [1,21,12,23,123,23,45];
arr.sort();
console.log(arr);    //输出值为 [1, 12, 123, 21, 23, 23, 45]

        （2）数组升序排序，接收比较函数作为参数sort(function(x,y){return x>y;})

var arr = [1,21,12,23,123,23,45];
arr.sort(function(x,y){return x>y;});
console.log(arr);    //输出值为[1, 12, 21, 23, 23, 45, 123]

        （3）数组降序排序，接收参数sort(function(x,y){return x<y;})

var arr = [1,21,12,23,123,23,45];
arr.sort(function(x,y){return x<y;});
console.log(arr);    //输出值为[123, 45, 23, 23, 21, 12, 1]

        

    5.concat() 连接两个数组

        语法：arrayObject.concat(array1,array2...);

        功能：用于连接两个或多个数组

        返回值：一个新的数组，原数组不变。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var arr2 = [6,7,8,9,10,"false"];
var arr3 = [11,12,13,14,"false"];
var newArr = arr1.concat(arr2,arr3);
console.log(newArr);    //返回值[1, 2, 3, 4, 5, true, "poorpenguin", false, 6, 7, 8, 9, 10, "false", 11, 12, 13, 14, "false"]
console.log(arr1);      //返回值[1, 2, 3, 4, 5, true, "poorpenguin", false]

    

    6.slice() 返回截取的数组元素

        语法：arrayObject.slice(start,[end]);

        功能：从已有数组中返回选定的元素。

        参数：

                start（必需）：规定从何处开始选取，如果是负数，那么从数组尾部开始算起。

                end（可选）：规定从何处结束选取，该参数是数组片断结束处的数组下标。

        返回值：一个新的数组，原数组不变。

        PS：

            (1)会返回下标值在 start 到 end 之间不包括end的数组元素。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.slice(2,4);
console.log(newArr);    //返回值[3, 4] 只返回下标为2和3的数组元素
console.log(arr1);      //返回值[1, 2, 3, 4, 5, true, "poorpenguin", false]

            (2)没有end，截取的数组末尾。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.slice(2);
console.log(newArr);    //返回值[3, 4, 5, true, "poorpenguin", false]

            (3)参数为负数时，其值为字符串长度+该负数

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.slice(2,-3); //arr1.length值为8 -3+8=5 等价于arr1.slice(2,5);
console.log(newArr);            //返回值[3, 4, 5]

 

    7. splice() 一个强大的方法，可以实现对数组项的删除、插入和替换

        （1）删除

                语法：arrayObject.splice(index,count);

                功能：删除从index处开始的零个或多个元素。

                参数：

                        index是开始数组项下标。

                        count是要删除的项目数量：设置为0，不会删除项目；不设置，则删除从index开始的所有值。

                返回值：含有被删除的元素的数组。原数组值被改变。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.splice(2);
console.log(newArr);    //返回值 [3, 4, 5, true, "poorpenguin", false]
console.log(arr1);      //返回值 [1, 2]            

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.splice(1,4);
console.log(newArr);    //返回值 [2, 3, 4, 5]
console.log(arr1);      //返回值 [1, true, "poorpenguin", false]

        （2）插入

                语法：arrayObject.splice(index,0,item1,....,itemx);

                功能：在指定位置插入值。

                参数：

                        index是起始位置。

                        count设置为0（要删除0个项）

                        item1....itemx要插入的项

                返回值：[]（空数组），原数组被改变。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.splice(1,0,true,789);
console.log(newArr);    //返回值 []
console.log(arr1);      //返回值 [1, true, 789, 2, 3, 4, 5, true, "poorpenguin", false]

        （3）替换

                语法：arrayObject.splice(index,count,item1,...,itemx);

                功能：在指定的位置插入值，且同时删除从起始位置开始count个数组项。

                参数：

                        index 起始位置

                        count 要删除的数组项的个数

                        item1,...,itemx 要插入的数组项

                返回值：从原始数组中删除的项，原数组被改变。

var arr1 = [1,2,3,4,5,true,"poorpenguin",false];
var newArr = arr1.splice(1,2,true,789,false);
console.log(newArr);    //返回值 [2, 3]被替换（删除）的数组项
console.log(arr1);      //返回值 [1, true, 789, false, 4, 5, true, "poorpenguin", false]

    8.indexOf() 和 lastIndexOf() 查找项在数组中的位置 （ECMAScript5新增）

          支持的浏览器：IE9+、Firefox2+、Safari3+、Opera9.5和Chrome。

        （1）indexOf()

                语法：arrayObject.indexOf(searchValue,[startIndex]);

                功能：从数组的开头（0下标）开始向后查找。

                参数：

                        searchValue 必须，要查找的项。

                        startIndex 可选，默认从0开始。

                返回值：number，从前往后，查找的项在数组中第一次出现的位置，在没有找到的情况下返回-1

                ps：查找的对比是完全相等 ===。

var arr1 = ["1",2,3,1,4,1,5,true,"poorpenguin",false];
var num = arr1.indexOf(1);
console.log(num);    //返回值为3

        （2）lastIndexOf()

                语法：arrayObject.lastIndexOf(searchValue,[startIndex]);
                功能：从数组的末尾开始向前查找

                参数：

                        searchValue 必需，要查找的项

                        startIndex 可选，默认从0开始。

                返回值：number，从后往前，查找的项在数组中第一次出现的位置，在没有找到的情况下返回-1

var arr1 = ["1",2,3,1,4,1,5,10,true,"poorpenguin",false,10,2];
var num = arr1.indexOf(10);
console.log(num);    //返回值为7

        （3）自己封装indexOf()

                在不支持indexOf()函数的浏览器下自己封装查找函数

	var arr = [1,2,3,45,6,7,12,45,12,7];
	function myIndexOf(array,value){
		for(var i=0; i<array.length; ++i){
			if(array[i]===value){    //必需是完全相等
				return i;
			}
		}
		return -1;
	}
	document.write(myIndexOf(arr,100));

 

二、String（字符串对象）

    js中的string对象也是比较常用的。

（一）字符串对象的中字符的遍历

ECMAScript5中可以使用“方括号加字符串索引”来访问或遍历字符串中特定的字符，但是IE7及更早的浏览器会返回underfined

 

1.方括号加字符索引遍历字符串对象（ECMAScipt5）

    语法：str[index]；和数组遍历方式几乎一样。

    参数：i是下标。

var str = "poorpenguin";
console.log(str[0]);        //输出 p
var strName = "字符串对象"
console.log(strName[0]);    //输出 字

//遍历字符串对象
for(var i=0; i<strName.length; ++i){
	document.write(strName[i]+" ");    //输出 字 符 串 对 象 
}字 符 串 对 象 
}

 

2.charAt() 遍历字符串对象（IE7及更早版本能不支持上面的方法可以使用）

    语法：stringObject.charAt(index)；

    功能：返回stringObject字符串对象中index位置的字符。

var str = "poorpenguin";
console.log(str.charAt(0));            //值为 p
var strName = "字符串对象"
console.log(strName.charAt(0));        //值为 字

//遍历字符串对象
for(var i=0; i<strName.length; ++i){
	document.write(strName.charAt(i)+" ");   //输出 字 符 串 对 象
}字 符 串 对 象
}

 

3.charCodeAt() 获取字符串指定位置的字符编码。

    语法：stringObject.charCodeAt(index)；

    功能：返回 stringObject中index位置字符的字符编码。

var str = "poorpenguin";
console.log(str.charCodeAt(0));        //值为 112
var strName = "字符串对象"
console.log(strName.charCodeAt(0));    //值为 23383

4.indexOf() 从一个字符串中搜索给定的子字符串，返回子字符串的位置（从前往后）

    语法： stringObject,indexOf(subString);

    参数 ：可以死单个字符，也可以是字符串。

    功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。（只查找第一个便结束）
    返回值：数值，如果没有找到该子字符串，则返回-1。

var str = "poorpenguin";
console.log(str.indexOf("peng"));            //值为 4
var strName = "从一个字符串中搜索给定的子字符串"    
console.log(strName.indexOf("字符串"));        //值为 3

5.lastIndexOf() 从一个字符串中搜索给定的子字符串，返回子字符串的位置（从后往前）

    功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。（只查找第一个便结束）

    和indexOf（几乎一样）

    

（二）截取字符串对象   

1.slice() 根据 起始 和 结束 位置截取字符串(和数组截取一样)

    语法：stringValue.slice(start,end);

    功能：截取字符串

    参数：

                start：必需，指定字符串的开始位置。

                end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。

                当参数为负数时，会将负数和字符串的长度相加。

var str = "poorpenguin";
var subStr = str.slice(1);
console.log(subStr);	//返回值 oorpenguin
console.log(str)        //不改变原字符串 poorpenguin

subStr = str.slice(1,3);
console.log(subStr);	//返回值 oo

 

2.substring() 根据 起始 和 结束 位置截取字符串

    说明：语法及功能同slice()完全一样

    区别在于：

                    （1）当参数为负数时，自动将参数转换为0。

                    （2）substring() 会将较小的数作为开始位置，将较大的数作为结束位置。

    返回值：返回截取字符串，不改变原字符串。

var str = "poorpenguin";
var subStr = str.substring(-2,6);
console.log(subStr);	//返回值 poorpe
console.log(str)        //不改变原字符串 poorpenguin

subStr = str.substring(1,-33);	//相当于str.substring(0,1);
console.log(subStr);	//返回值 p

3.substr() 根据 起始位置 和 截取长度 截取字符串

    语法：stringObject.substr(start.len);

    功能：截取子字符串

    参数：

            （1）start：必需，指定子字符串的开始位置。

            （2）len：可选，截取的字符串总数，省略时截取至字符串的末尾

            （3）当start为负数时，会将传入的负数与字符串的长度相加。

            （4）当len为负数时，返回空字符串。

    返回值：截取的字符串，原字符串不变。

var str = "poorpenguin";
var subStr = str.substr(-2,6);
console.log(subStr);	//返回值 in
console.log(str)        //不改变原字符串 poorpenguin

subStr = str.substr(1);	
console.log(subStr);	//返回值 oorpenguin

subStr = str.substr(1,-3);	
console.log(subStr);	//返回值 [] 空字符串

 

（三）其他常用字符串对象方法

    其他常用的方法用：

    split()    把字符串分隔成数组

    replace()    替换字符串中的字符

    toUpperCase()    把字符串转换大写

    topLowerCase()    把字符串转换小写

1.split() 把字符串分隔成数组

    语法：stringObject.split(sign);

    功能：把一个字符串安装指定分隔符分割成数组。

    参数：sign 必需，分隔符

    返回值：数组对象

var str = "poorpenguin";
var arr = str.split("");
console.log(arr);		//返回值 ["p", "o", "o", "r", "p", "e", "n", "g", "u", "i", "n"]
console.log(str)    	//不改变原字符串 poorpenguin

str = "all time is no time when it is past";
arr = str.split(" ");
console.log(arr);		//返回值 ["all", "time", "is", "no", "time", "when", "it", "is", "past"]

str = "border-left-color";
subStr = str.split("-");	
console.log(subStr);	//返回值 ["border", "left", "color"]

 

2.replace() 替换字符串中的字符

    语法：stringObject.replace(str,substr)；

    功能：用一些字符（字符串），替换字符串中的指定字符（字符串）。

    参数：str 原字符串中需要被替换的字符（字符串），也可以是正则表达式。

            substr 需要替换的字符（字符串）.

    返回值：替换后的字符串，原字符串不改变。

 

3.toUpperCase() 把字符串转换为大写

    语法：stringValue.toUpperCase()

    功能：把字符串转换为大写

    返回值：返回大写后的新字符串，原字符串不改变

var str = "poorpenguin";
var newStr = str.toUpperCase();
console.log(str);		//poorpenguin
console.log(newStr);	//POORPENGUIN

4.toLowerCase() 把字符串转换为小写

    语法：同上。

    返回值：返回小写后的新字符串，原字符串不改变。

var str = "poorpenguin";
var newStr = str.toUpperCase();
var newStr_2 = newStr.toLowerCase();
console.log(str);		//poorpenguin
console.log(newStr);	//POORPENGUIN
console.log(newStr_2);	//poorpenguin

5.split()、replace()、toUpperCase()和toLowerCase()的综合运用

将 all time is no time when it is past 的首字母大写。

思路：将字符串拆分为数组->遍历数组->大写改变每个字母的第一个字符->拼接字符串

var str = "all time is no time when it is past";
firstWordLowerToUpper(str," "," ");
/*
首字母转大写
 
str 代转字符串
cutSign 分隔字符
linkSign  拼接字符
*/
function firstWordLowerToUpper(str,cutSign,linkSign){
var strArr = str.split(cutSign);
var newStr = "";
for(var i=0,len=strArr.length; i<len; ++i){
    newStr+=strArr[i].replace(strArr[i][0],strArr[i][0].toUpperCase())+(i!=len-1?linkSign:""); //拼接字符串 = 首字母小写转大写 + 拼接字符
}
document.write(newStr);
}

 

三、Math 对象

 

常用的Math对象方法：min()、max()、ceil()、floor()、round()、abs()

1.min() 求一组数中的最小值    

    语法：Math.min(num1,num2,....numN);

    功能：求一组数中的最小值。

    参数：必须是number类型的或隐式转换后为number类型的值，如果是字符串，最后结果会返回NaN

    返回值：number类型（NaN也是number类型）

 

2.max() 求一组数中的最大值    

    语法：Math.max(num1,num2,....numN);

    功能：求一组数中的最大值。

    参数：必须是number类型的或隐式转换后为number类型的值，如果是字符串，最后结果会返回NaN

    返回值：number类型（NaN也是number类型）

 

3.ceil() 向上取整

    语法：Math.ceil(num);

    功能：向上取整，返回大于num的最小整数

    返回值：Number

 

4.floor() 向下取整

 

    语法：Math.floor(num);

    功能：向下取整，返回num的整数部分

    返回值：Number

 

5.round() 四舍五入

    语法：Math.round(num)

    功能：将数值四舍五入为最接近的整数

    返回值：Number

 

6.abs() 取绝对值(手机端计算滑动的距离)

    语法：Math.abs(num);

    功能：返回num的绝对值。

    返回值：Number

 

7.random()  产生一个随机数  

    语法：Math.random();

    功能：返回大于等于0小于1的一个随机数。

    返回值：Number

    基本用法：   

        求n到m之间的随机整数的公式：

var num = Math.floor(Math.random()*(m-n+1)+n);

 

四、Date对象

（一）创建Date对象

    语法：new Date();

    功能：创建一个日期时间对象

    返回值：不传参的情况下，返回当前的日期时间对象。

    ps：如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数（时间戳）或者是用逗号隔开的表示年月日时分秒的参数。

（二）获取年月日时分秒及星期的方法

getFullYear()	返回4位数的年份
getMonth()		返回日期中的月份，返回值为 0 - 11
getDate()		返回月份中的日
getDay()		返回星期，返回值为 0 - 6,可使用数组week = ["日","一","二","三","四","五","六"]存放，按下标取
getHours()		返回小时
getMinutes() 	返回分
getSeconds()	返回秒
getTime()		返回表示日期的毫秒数（时间戳）

 

（三）设置年月日时分秒及星期的方法

setFullYear(year)	设置4位数的年份
setMonth(month)		设置日期中的月份，从0开始，0表示1月
setDate()			设置日期
setDay()			设置星期、从0开始，0表示星期日
setHours()			设置小时
setMinutes()		设置分
setSeconds()		设置秒
setTime()			以毫秒设置日期，会改变整个日期

 

（四）设置方法的运用

    1.50天后是星期几？

		var week = ["日","一","二","三","四","五","六"];
		var today = new Date();

		var year = today.getFullYear();
		var month = today.getMonth();
		var day = today.getDate();

		var temp = new Date(year,month,day+50);	//50天后的时间 设置日后，月和年也会进行相应的变化

		document.write(week[temp.getDay()]); 

    或使用set方法

		var week = ["日","一","二","三","四","五","六"];
		var today = new Date();

		var year = today.getFullYear();
		var month = today.getMonth();
		var day = today.getDate();
		today.setDate(day+50);//50天后的时间

		document.write(week[today.getDay()]);