您现在的位置是:首页 > 技术学习 > javascript 网站首页 技术学习 javascript
JS的内置对象(Date、String、Array、Math、Event)
- 技术学习
- 2019-04-18
- 192已阅读
- 0
简介
var myDate = new Date();// 创建一个时间对象的实例。默认是电脑的系统时间。 也可自定义时间:var d = new Date(2017,10,1);或...
1. 日期对象Date
var myDate = new Date();
// 创建一个时间对象的实例。默认是电脑的系统时间。
也可自定义时间:var d = new Date(2017,10,1);或 var d = new Date("oct 1,2017");
有了时间对象,我们可以使用它的方法来获取或设置相应的值:
一、获取:
1. myDate.getTime(); // 获取时间,以毫秒为单位从1970年1月1日到现在的毫秒数。
2. myDate.getFullYear();//获取年份(四位数表示) 常用。
3. myDate.getYear(); // 获取年份
4. myDate.getMonth(); // 获取月份,1-12月对应的值是:0-11
5. myDate.getDay(); // 获取星期几,周日到周六分别对应0-6
6. myDate.getDate(); // 获取日期,返回某月中的一天,1-31
7. myDate.getHours(); // 获取小时,24小时制 0-23
8. myDate.getMinutes(); // 获取分钟 0-59
9. myDate.getSeconds(); // 获取秒 0-59
10. myDate.getMilliseconds(); // 获取毫秒数 0-999
11. myDate.getTimezoneOffset(); // 获取本地时间与格林威治标准时间 (GMT) 的分钟差
12. myDate.getUTCFullYear(); // 根据世界时获取四位数的年份
13. myDate.getUTCHours(); // 根据世界时获取小时 0-23
14. 其他获取UTC方法同上。在get后加大写UTC
二、设置时间(方法和获取类似)
1. myDate.setFullYear();//获取年份(四位数表示) 常用。
2. myDate.setMonth(); // 获取月份,1-12月对应的值是:0-11
3. myDate.setHours(); // 获取小时,24小时制 0-23
4. 其他设置时间方法参照上面三个的使用方法
三、时间对象的其他方法
1. myDate.toString(); // 把 Date 对象转换为字符串。
2. myDate.toTimeString(); // 把 Date 对象的时间部分转换为字符串。
3. myDate.toDateString(); // 把 Date 对象的日期部分转换为字符串。
4. myDate.toGMTString(); // 请使用 toUTCString() 方法代替。
5. myDate.toUTCString(); // 根据世界时,把 Date 对象转换为字符串。
6. myDate.toLocaleString(); // 根据本地时间格式,把 Date 对象转换为字符串。
7. myDate.toLocaleTimeString(); // 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
8. myDate.toLocaleDateString(); // 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
9. myDate.valueOf(); // 返回 Date 对象的原始值(即从1970年1月1号到对象所在时间的毫秒数)。
示例代码:
var myDate = new Date();
console.log(myDate.getTime()); // 1499660923853
console.log(myDate.getFullYear()); // 2017
console.log(myDate.getYear()); // 117
console.log(myDate.getMonth()); // 6
console.log(myDate.getDay()); // 1
console.log(myDate.getDate()); // 10
console.log(myDate.getHours()); // 12
console.log(myDate.getMinutes()); // 28
console.log(myDate.getSeconds()); // 43
console.log(myDate.getMilliseconds()); // 853
console.log(myDate.getTimezoneOffset()); // -480
console.log(myDate.getUTCFullYear()); // 2017
console.log(myDate.getUTCHours()); // 4
console.log(myDate.setFullYear(2020)); // 1594355323853
console.log(myDate.toString()); // Fri Jul 10 2020 12:28:43 GMT+0800 (CST)
console.log(myDate.toTimeString()); // 12:28:43 GMT+0800 (CST)
console.log(myDate.toDateString()); // Fri Jul 10 2020
console.log(myDate.toUTCString()); // Fri, 10 Jul 2020 04:28:43 GMT
console.log(myDate.toLocaleString()); // 2020/7/10 下午12:28:43
console.log(myDate.toLocaleTimeString()); // 下午12:28:43
console.log(myDate.toLocaleDateString()); // 2020/7/10
console.log(myDate.valueOf()); // 15943553238530
2. 字符串对象
2-1 常见的字符串的写法
var myString = new String("Hello World!"); // 创建新字符串
var myString = String("Hello World!"); // 将括号里的转化为字符串
var myString = "Hello World!"; //最常见的写法
2-2 字符串的常见属性和方法
先定义一个字符串:
var myString = "Hello World!";
2-2-1 toUpperCase() toLowerCase()大小写转化
// 创建新字符串,不修改原字符串,可用来赋值给新变量
toUpperCase(); // 转化为大写
toLowerCase(); // 转化为小写
myString.toUpperCase(); // HELLO WORLD!
myString.toLowerCase(); // hello world!
2-2-2 length 属性
myString.length; // 12
// 获取字符串的长度是多少,这个是个属性,不加括号。
2-2-3 concat 连接两个字符串
var mystr1 = "a";
var mystr2 = "b";
mystr1.concat(mystr2); // "ab"
2-2-4 charAt 返回指定位置字符
// 语法:charAt(index);
myString.charAt(1); // e
// 返回下标为1的位置的字符,下标从0开始
2-2-5 indexOf 返回指定字符串首次出现的位置
/* 语法:
indexOf("str");
indexOf("str",startPos); // startPos: 起始位置
返回指定字符串首次出现的位置下标,若没找到,则返回-1;
*/
myString.indexOf("l"); // 2
// 返回“l”首次出现的位置,从0开始。
myString.indexOf("l",4); // 9(别忘了空格)
// 返回“l”从下标4开始,第一次出现的位置。(下标从0开始)
lastIndexOf(); // 最后一次出现的位置
2-2-6 search 返回指定正则匹配的字符串首次出现的位置
var myReg = /l/;
// 或者:
var myReg = new RegExp("l");
myString.search(myReg); // 2
2-2-7 split 字符串分割
spilt(","); // 以逗号为分割符将字符串分割为数组。
split(";",3); // 以分号为分割符将字符串分割为数组,最多分割3次。
myString.split(" "); // ["Hello", "World!"]
2-2-8 substring 提取两个指定位置之间的字符
// 创建新字符串,不修改原字符串,可用来赋值给新变量
/* 语法:
substring(startPos,stopPos);
返回内容从start~stop-1,不包括stop位置
startPos:非负整数(若为负,则变为0),开始位置(包含该位置)
stopPos:非负整数(若为负,相当于起始位置为0,结束位置为startPos位置),
停止位置(不包含该位置),不写默认到字符串结尾(包含最后一个位置)。
*/
myString.substring(0,3); // Hel
myString.substring(-1,3); // Hel
myString.substring(3,-1); // Hel
2-2-9 slice 提取指定长度的字符串
// 创建新字符串,不修改原字符串,可用来赋值给新变量
/*
语法:
slice(startPos,stopPos);
返回内容从start~stop-1,不包括stop位置,当stop位置在start位置之前,则匹配不到。
startPos: 开始位置(包含该位置),若为负,则指倒数第几个
stopPos: 停止位置(不包含该位置),若为负,则指倒数第几个。不写默认到字符串结尾(包含最后一个位置)。
*/
myString.slice(0,3); // Hel
myString.slice(-1,3); // "",没匹配到,为空
myString.slice(3,-1); // lo World
2-2-10 substr 提取指定长度的字符串
// 创建新字符串,不修改原字符串,可用来赋值给新变量
/*
语法:
substr(startPos,length);
返回从开始位,之后的指定长度字符串
startPos:非负整数(若为负,则变为从倒数第几个开始数起),开始位置(包含该位置)
length:提取的字符串长度,不写默认到结尾处
*/
myString.substr(2,2); // ll
myString.substr(-3,2); // ld
myString.substr(2,-1); // "",没匹配到。为空
2-2-11 replace 替换指定字符串
// 创建新字符串,不修改原字符串,可用来赋值给新变量
/*
语法:
replace(被替换掉的内容,用来替换的内容);
注:被替换掉的内容是:字符串 或者 没带全局标识的正则时,replace只会替换第一个匹配的字符,
当用正则并加上全局标识g时,可以替换所有匹配到的值。
*/
myString.replace("!","。"); //Hello World。
var str = "aaaaa";
str.replace("a","b"); // baaaa
str.replace(/a/,"b"); // baaaa
str.replace(/a/g,"b"); // bbbbb
2-2-12 charCodeAt 返回指定位置的字符的编码
// 语法:charCodeAt(index); 返回下标index的位置的字符编码。
myString.charCodeAt(3); // 108
2-2-13 fromCharCode() 返回指定编码对应的字符
// 语法:String.fromCodeAt(编码);返回指定编码对应的字符串。(这是原生字符串对象String自带方法)
String.fromCodeAt(108); // l
2-2-14 localeCompare 用本地特定的顺序来比较两个字符串
/*
返回值有三个:
-1 前面小于后面;
0 前面等于后面;
1 前面大于后面。
*/
var str1 = 'a';
var str2 = 'b';
str1.localeCompare(str2); // -1
2-2-15 sub()、sup() 将字符串显示为下/上标
console.log(myString.sub()); // <sub>Hello World!</sub>
document.write(myString.sub()); // Hello World!(下标的形式输出的,字体较小)
3. 数组对象
3-1 常见的数组的写法
数组Array,定义数组的方法:
- var 数组名 = new Array(); 空数组
- var 数组名 = new Array(n); 有n个空元素的数组
- var 数组名 = ['元素1','元素2','元素3']; 有3个元素的数组,最常见的写法。当是空数组时直接写[];
3-2 数组的常见属性和方法
var myArray = [1,2,3,'a','b'];
var arr1 = [1,2,3,4];
var arr2 = ['a','b','c'];
3-2-1 下标属性
myArray[3]; // a 返回数组下标为3(即第四个)的元素的值。下标从0开始
3-2-2 length属性
myArray.length; // 5 返回数组的长度
3-2-3 concat数组连接
// 连接后创建新的数组
arr1.concat(arr2); // [1,2,3,4,'a','b','c']
arr1.concat(5); // [1,2,3,4,5]
3-2-4 join 用指定的分割符将数组连接为字符串
myArray.join('-'); // 1-2-3-a-b (不写默认使用","连接)
3-2-5 reverse 颠倒数组元素顺序
// 改变原数组,不创建新数组
var arr3 = [1,2,3,4];
arr3.reverse(); // [4,3,2,1]
console.log(arr3); // [4,3,2,1]
3-2-6 pop、push 在数组末尾删除/添加一个元素
// 改变原数组,不创建新数组
var arr4 = [1,2,3,'a'];
arr4.pop(); // a 返回值是删除的那个元素
arr4.push('b'); // 4 返回的是添加元素后数组的新长度
console.log(arr4); // [1,2,3,'b']
3-2-7 shift、unshift 在数组头部删除/添加一个元素
// 改变原数组,不创建新数组
var arr5 = [1,2,3,'a'];
arr5.shift(); // 1 返回值是删除的那个元素
arr5.unshift('b'); // 4 返回的是添加元素后数组的新长度
console.log(arr5); // ['b',2,3,'a']
3-2-8 slice 获取指定位置间的元素
// 返回的是新的数组,不改变原来的数组
/*
语法:
slice(startPos,stopPos);
返回内容从start~stop-1,不包括stop位置,当stop位置在start位置之前,则匹配不到。
startPos: 开始位置(包含该位置),若为负,则指倒数第几个
stopPos: 停止位置(不包含该位置),若为负,则指倒数第几个。不写默认到字符串结尾(包含最后一个位置)。
*/
var arr6 = [1,2,3,4,5]
arr6.slice(0,2); // [1, 2]
arr6.slice(-1,2); // [],没匹配到,为空数组
arr6.slice(1,-1); // [2, 3, 4]
console.log(arr6); // [1,2,3,4,5]
3-2-9 splice 从数组里选取元素可实现添加和删除
// 修改原数组,不创建新数组,但是返回值是和splice(startPos,length)这一部分匹配的内容
/*
语法:
splice(startPos,length); 删除
splice(startPos,length,新元素,新元素...) 用新元素替换旧元素
splice(startPos,0,新元素,新元素...) 添加新元素,因为删除长度为0,可以认为没删除
*/
var arr7 = [1,2,3,4,5,6]
arr7.splice(1,3); // [2,3,4]
console.log(arr7); // [1,5,6]
var arr8 = [1,2,3,4,5,6];
arr8.splice(1,3,'a','b'); // [2,3,4]
console.log(arr8); // [1, "a", "b", 5, 6]
var arr9 = [1,2,3,4,5,6];
arr9.splice(1,0,'a','b'); //[]
console.log(arr9); // [1, "a", "b", 2, 3, 4, 5, 6]
3-2-10 sort 数组排序
// 修改原数组,但不创建新数组。
// 适用于字符串排序,数字的话会把数字当字符串处理。
var arr10 = ['a','d','g','b','c'];
var arr11 = [1,2,5,15,20,3,34];
var arr12 = ['1','2','5','15','20','3','34'];
arr10.sort(); // ["a", "b", "c", "d", "g"]
arr11.sort(); // [1, 15, 2, 20, 3, 34, 5]
arr12.sort(); // ["1", "15", "2", "20", "3", "34", "5"]
// sort(); 括号里可以跟参数,参数可以是函数
var arr13 = [1,2,5,15,20,3,34];
arr13.sort(function(n1,n2){
// 机制是:return值是负的话,n1 < n2; 为正的话,n1 > n2; 为0的话,n1 = n2。
return n1 - n2; // 数字升序排列
// return n2 - n1; // 数字降序排列
}); // [1, 2, 3, 5, 15, 20, 34]
console.log(arr13); // [1, 2, 3, 5, 15, 20, 34]
3-2-11 toString 将数组转化为字符串
var arr14 = ['a','b','c']
arr14.toString(); // a,b,c 以逗号连接
4. Math 数学对象
4-1 Math的属性
- E; (常量e);
- LN2; (ln2);
- LN10; (ln10);
- LOG2E; (log2e);
- LOG10E;
- PI; (π);
- SQRT2; (根号二) ;
- SQRT1_2; (根号二分之一)
常用:Math.PI; // π
4-2 Math的方法
Math.abs(x); // (|x|绝对值)
Math.ceil(1.01); // 2 向上取整
Math.floor(1.99); // 1 向下取整
Math.max(x,y); // 取xy中的最大值
Math.min(x,y); // 取xy中的最小值
Math.random(); // 0~1 之间的随机数;
Math.round(x); // 四舍五入为整数
Math.sin(x); // 三角函数正弦sin
Math.asin(x); // 三角函数反正弦
Math.exp(x); // e的x次方
Math.log(x); // ln(x)
Math.pow(x,y); // x的y次方
Math.sqrt(x); // 根号x
// 注:max,min是不支持数组的。
5. Event 事件对象
function (e){
var oEvent = e || event; // 这是对浏览器进行兼容。event是IE版本的写法,
// 鼠标事件
oEvent.clientX; // 事件触发时鼠标在可视区的x坐标的值。
oEvent.clientY; // 事件触发时鼠标在可视区的y坐标的值。
// 键盘事件
oEvent.keyCode; // 当前触发事件的键盘按键对应的键码。不同的键键码不同
// 键盘其他属性
oEvent.ctrlKey/shiftKey/altKey; // 这些是布尔值,当按着ctrl、shift、alt时为true;
// 阻止默认行为
// 方法一,常规写法:
oEvent.preventDefault(); // IE的方法,IE8以下不支持。
oEvent.returnValue = false; // W3C方法,火狐不支持。
// 阻止冒泡
oEvent.cancelBubble = true; // IE方法,但新版本火狐和chorme也支持。
oEvent.stopPropagation(); // W3C方法,IE不支持。
// 方法二,普通写法:
return false;
}
附常见的事件方式:
- onclick 鼠标点击
- onmouseover 鼠标划过
- onmouseout 鼠标移开
- onmousemove 鼠标移动
- onmouseup 鼠标左键抬起
- onmousedown 鼠标左键按下
- ondblclick 鼠标双击
- onsubmit 表单提交事件
- oncontextmenu 鼠标右键打开菜单事件
- onfocus 鼠标聚焦
- onblur 鼠标失焦
- onselect 内容选中
- onchange 内容发生改变
- onload 加载事件
- onunload 卸载事件
- onkeydown 键盘按下(常配合keyCode键码使用)
- onkeyup 键盘抬起(常配合keyCode键码使用)
- onkeypress 键盘点击(按下加抬起)(常配合keyCode键码使用)