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:"[email protected]"}];
(二)数组读写
读取数组和设置数组的值时,使用方括号 [索引] 方式。索引是从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() 将新项加到数组尾部
var arr = [1,2,3,4]; document.write(arr.push(1,43)); //返回值为6
(2)unshift() 将新项加到数组头部
语法:arr.unshift(newele1,newele2,newele3,....);(3)pop() 删除数组最后一个元素
var arr = [1,2,3,4]; document.write(arr.pop()); //返回值 4 document.write(arr); //返回值 [1,2,3]
(4)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);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() 连接两个数组
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() 返回截取的数组元素
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]
var arr1 = [1,2,3,4,5,true,"poorpenguin",false]; var newArr = arr1.slice(2); console.log(newArr); //返回值[3, 4, 5, true, "poorpenguin", false]
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)删除
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)插入
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)替换
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()
var arr1 = ["1",2,3,1,4,1,5,true,"poorpenguin",false]; var num = arr1.indexOf(1); console.log(num); //返回值为3
(2)lastIndexOf()
功能:从数组的末尾开始向前查找
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()
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及更早的浏览器会返回underfined1.方括号加字符索引遍历字符串对象(ECMAScipt5)
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);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);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() 根据 起始 和 结束 位置截取字符串
区别在于:
(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对象
返回值:不传参的情况下,返回当前的日期时间对象。
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()]);