您现在的位置是:首页 > 技术学习 > javascript 网站首页 技术学习 javascript

JS的内置对象(Date、String、Array、Math、Event)

简介 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,定义数组的方法:

  1. var 数组名 = new Array(); 空数组
  2. var 数组名 = new Array(n); 有n个空元素的数组
  3. 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的属性

  1. E; (常量e);
  2. LN2; (ln2);
  3. LN10; (ln10);
  4. LOG2E; (log2e);
  5. LOG10E;
  6. PI; (π);
  7. SQRT2; (根号二) ;
  8. 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;
}

附常见的事件方式:

  1. onclick 鼠标点击
  2. onmouseover 鼠标划过
  3. onmouseout 鼠标移开
  4. onmousemove 鼠标移动
  5. onmouseup 鼠标左键抬起
  6. onmousedown 鼠标左键按下
  7. ondblclick 鼠标双击
  8. onsubmit 表单提交事件
  9. oncontextmenu 鼠标右键打开菜单事件
  10. onfocus 鼠标聚焦
  11. onblur 鼠标失焦
  12. onselect 内容选中
  13. onchange 内容发生改变
  14. onload 加载事件
  15. onunload 卸载事件
  16. onkeydown 键盘按下(常配合keyCode键码使用)
  17. onkeyup 键盘抬起(常配合keyCode键码使用)
  18. onkeypress 键盘点击(按下加抬起)(常配合keyCode键码使用)

 
个人CSDN博客

Top