下面小编就为大家带来一篇 JavaScript 原生对象常用方法总结 (推荐)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面都是我学习 W3C School 教程中有关 JavaScript 写的学习笔记,每个方法我都亲身测试过,每个方法的用途和参数列表,我都是在经过我亲身实践后加上了我自己的一点理解,解释的还算比较详细。现记录下来,以便查阅:
javascript 之 Array 类:
创建 js 数组两种方式:
var arr = []; 或
var arr = new Array();
() 里可以指定长度,也可以不指定,指不指定都无所谓,
因为 js 里的数组长度是可变的
concat(arr1,arr2,arr3......arrx):js 数组合并, 返回合并后的新数组, 至少需要传递一个数组,也可以传递多个数组
- var arr1 = new Array(3);
- arr1[0] = "George";
- arr1[1] = "John";
- arr1[2] = "Thomas";
- arr1[3] = "Jeery";
- var arr2 = new Array(3);
- arr2[0] = "James";
- arr2[1] = "Adrew";
- arr2[2] = "Martin";
- var arr3 = new Array(3);
- arr3[0] = "Java";
- arr3[1] = "C#";
- arr3[2] = "PHP";
- var arr4 = arr1.concat(arr2,arr3);
- alert(arr4);
join(): 将数组元素按指定的分隔符拼接成一字符串返回,默认分隔符为英文逗号
- var arr = new Array(3)
- arr[0] = "George";
- arr[1] = "John";
- arr[2] = "Thomas";
- arr[3] = "Jeery";
- arr.join(".");
sort(fn): 数组排序, 默认是按英文字母的 ASC 码升序排列,比如 apple 排在 orange 前面,其实
sort 还可以接收一个参数,该参数 function 类型,有点类似于 java 里的比较器的意思,
就是说如果不想按默认的比较规则来排序,就必须提供一比较函数,该函数有两个参数 a、b,
如果返回值小于 0,则 a 排在 b 前面
如果返回值大于 0,则 b 排在 a 前面
如果返回值等于 0,则 a、b 位置不变
- var arr = new Array(6);
- arr[0] = 5;
- arr[1] = 23;
- arr[2] = 4;
- arr[3] = 18;
- arr[4] = 88;
- arr[5] = 10;
- arr.sort(sortNumber);
- function sortNumber(a, b)
- {
- return a - b;
- }
pop():删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。
如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
- var arr = new Array(6);
- arr[0] = 5;
- arr[1] = 23;
- arr[2] = 4;
- arr[3] = 18;
- arr[4] = 88;
- arr[5] = 10;
- var a = arr.pop();
- alert(a);
- for(var x in arr){
- alert(arr[x]);
- }
push(n1,n2,n3,....nx): 向数组末尾添加一个或多个元素,并返回添加后数组的长度,
注意,此方法操作的是原数组对象,不会创建副本。此方法可以接收多个参数,
至少要传递一个参数
- var arr = new Array(6);
- arr[0] = 5;
- arr[1] = 23;
- arr[2] = 4;
- arr[3] = 18;
- arr[4] = 88;
- arr[5] = 10;
- var len = arr.push(44,80);
- alert(len);
- for(var x in arr){
- alert(arr[x]);
- }
reverse(): 颠倒数组中元素的顺序, 即如果原来数组元素是 1,2,3,4,5, 调用 reverse() 后,
元素顺序为 5,4,3,2,1, 注意,此方法直接操作的是原数组对象,不会创建副本。
- var arr = [3,5,11,6,90,0];
- arr.reverse();
- for(var x in arr){
- alert(arr[x]);
- }
shift(): 删除数组的第一个元素,并返回它删除的那个元素
如果数组已经为空,则 shift() 不改变数组,并返回 undefined 值
注意,此方法直接操作的是原数组,不会创建副本对象
- var arr = [3,5,11,6,90,0];
- var a = arr.shift();
- alert(a);
- for(var x in arr){
- alert(arr[x]);
- }
slice(start,end): 用于截取 start 和 end 之间的数组元素并存入新数组返回
注意,此方法不会修改原数组,会创建数组副本对象。
如果 end 未指定,则表示直接从 start 直到数组末尾,
如果 start 或 end 为负数,表示从后面开始算起,比如
-1,表示从倒数第一个元素算起,以此类推。
截取的区间范围是 [start,end), 前闭后开区间, 且 start 必须小于 end
如果没找到一个元素,则返回一个空数组即数组的长度为 0
- var arr = [3,5,11,6,90,0];
- var a = arr.slice(2,4);
- alert(a.join());
- splice(index,howmany,element1,.....,elementX):
用于删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或
多个值来替换那些被删除的元素,并返回刚刚删除的元素组成的新数组。
注意:此方法是直接操作的原数组对象,不会创建对象副本
第一个参数:表示从 index 位置开始删除,index 从零开始计算
第二个参数:表示从 index 位置开始,往后连续删除几个元素,前两个参数是必需的,后面的参数是可选的。
后面的参数是用添加的元素,添加的元素从 index 处开始添加,如果后面添加的元素个数大于
实际删除的元素个数,多出几个,后面的元素就往后移动几位。比如你实际删除了 4 个元素,
而实际你后面添加了 6 个元素,那最终会从 index 处开始添加 6 个元素,由于前面只删除 4 个元素,
位置不够,所以后面的元素会自动往后移动 2 位。
- var arr = [3,5,11,6,90,0,15,57,70,20];
- var a = arr.splice(0,4,1,2,3,4,5,6);
- alert(a);
- for(var x in arr){
- alert(arr[x]);
- }
unshift(element1,.....,element):
向数组开头添加一个或多个元素,并返回添加后的数组长度。至少要传一个参数。
注意此方法是直接操作原数组,最后添加的元素 index=0, 以此类推。
- var arr = [3,5,11,6,90,0,15,57,70,20];
- arr.unshift(22,23,24);
- alert(arr.toString());
- alert(arr.length);
扩展 Array 的函数:
- Array.prototype.indexOf = function(o){
- for(var i = 0,len=this.length; i<len;i++){
- if(this[i] == o){
- return i;
- }
- }
- return -1;
- }
- Array.prototype.remove = function(o){
- var index = this.indexOf(o);
- if(index != -1){
- this.splice(index,1);
- }
- return this;
- }
- var arr = [3,5,11,6,90,0,15,57,70,20];
- arr.remove(90);
- alert(arr.toString());
- alert(arr.length);
js 中 Number 类常用方法:
toFixed(): 将数字四舍五入为指定小数位数的数字,参数值范围为 [0,20], 表示四舍五入后保留的小数位数,
如果没有传入参数,默认参数值等于 0
- var num = 12.5563;
- alert(num.toFixed());
- alert(num.toFixed(2));
toprecision(): 用于将数字精确到指定长度,方法接收参数一个参数,参数的范围为 [0,21]
参数表示数字的位数,如果数字总位数大于参数值且数字是小数,那么会进行
四舍五入,如果数字总位数小于参数值且数字是小数,那么多出的小数位会自动补零
如果数字总位数小于参数值且数字为整数,那么会改用科学计数法表示。
- var num1 = 100009;
- var num2 = 100;
- var num3 = 11111111.00009;
- var num4 = 1.00609;
- alert(num1.toPrecision(5));
- alert(num2.toPrecision(5));
- alert(num3.toPrecision(15));
- alert(num4.toPrecision(3));
isNaN(num): 判断是否为数字,这个方法很有用
js 中 String 类常用方法:
charAt(index):用于返回指定位置的字符,index 从 0 开始计算
charCodeAt(index): 用于返回指定字符的 ASCII 码
concat(element1,element2......elementx): 用于拼接两个或多个字符串
indexOf(): 用于返回指定字符在字符串中第一次出现的索引,从第一个字符开始查找,找到立即返回。
lastIndexOf(): 用于返回指定字符在字符串中第一次出现的索引,不过是从最后面一个字符开始查找。
match(): 用于检索与指定正则匹配的子串,如果开启了全局检索模式,且有多个符合条件的子串,那么
返回的是一个数组。
- var str = "hello world! how are you? what are you doing?";
- var arr = str.match(/you/g);
- alert(arr);
- var str="1 plus 2 equal 3"
- alert(str.match(/\d\s/g));
replace():用于字符串替换操作,接收两个参数。
第一个参数:表示待替换的字符串,或者是替换的正则表达式
第二个参数:替换文本,也可以是一个 function 的返回值
注意此方法不会改变原字符串对象,而是返回新字符串对象。
- var str = "I like Java,Java is so easy to learning!Let's together for Java";
- var test = str.replace(/Java/g,"Javascript");
- alert(str);
- alert(test);
- var name = "Doe , John";
- alert(name.replace(/(\w+)\s*, \s*(\w+)/, "$2 | $1"));
- var name = "I like java,java is so easy!";
- var test = name.replace(/java/g, function(m,i){alert(m);alert(i);return "javascript";});
- alert(test);
用 function 返回值作为替换文本时,function 里有两个参数:
m 表示前面第一个参数即正则匹配到的子串,第二个参数是该子串在原字符串中的索引位置
search(): 用于返回指定子串或符合指定正则表达式的子串在原字符串中第一次出现的索引,
如果没有找到,则返回 - 1
var str = "I like javascript.";
alert(str.search("javascript"));
slice(start,end): 用于截取 start,end 指定区间内的字符串并返回,
此方法不会操作原字符串对象数据,而是创建字符串副本保存截取后的字符串数据
如果 end 未指定,则表示直接从 start 直到数组末尾,
如果 start 或 end 为负数,表示从后面开始算起,比如
-1,表示从倒数第一个元素算起,以此类推。
截取的区间范围是 [start,end), 前闭后开区间, 且 start 必须小于 end
如果没找到一个元素,则返回一个空字符串
- var str = "hello world!";
- var test = str.slice(-2,-1);
- alert(test);
- alert(str);
split(): 以指定的分割字符或正则表达式的匹配字符来分割原字符串,返回结果以数组形式表示。
此方法还可以接收第二个参数,第二个参数可以限制最终返回的数组元素最大个数。
var str="How are you doing today?"
alert(str.split(/\s/));
substr(): 用于字符串截取,方法接收两个参数,
第一个参数 start, 表示从 start 索引位置开始截取,索引从 0 开始计算,如果此参数值是负数,
则会从字符串结尾开始计算,比如 - 1 表示最后一个字符,-2 表示倒数第二个字符,以此类推。
第二个参数 length, 表示截取的字符串长度,此参数为可选,如不指定此参数,
则默认会一直截取到字符串结尾。
注意:此方法已不建议使用
var str = "I like javascript!";
alert(str.substr(7,10));
substring(): 用于截取 start 与 end 索引区间内的字符串,区间范围为 [start,end], 前闭后开
注意: 参数 start 和 end 必须为非负整数,
如 start 为负数,则默认会将 start 赋值为 0,
如 end 为负数,则默认会将 end 赋值为 0,且截取区间改为 [0,start)。
如果 start 大于 end,那么会首先交换两个参数值的位置,即区间改为 [end,start)
- var str1 = "I like javascript!":
- alert(str1.substring(7,18));
- var str2 = "I like javascript!";
- alert(str2.substring(3,-3));
toLowerCase():把字符串转换成小写
toUpperCase():把字符串转换成大写
js 中 Date 对象常用方法:
Date(): 此方法为 Date 类的构造函数,此方法接收日期格式字符串,
若不给构造函数传参,则默认是取系统当前时间
构造函数可以接收一个距 1970-01-01 的毫秒数来构建 Date 对象,
也可以接收规定格式的日期字符串来构建 Date 对象
//var date = new Date("06 05,1987"); // 火狐 OK IE 不 OK
//var date = new Date("6 5,1987"); // 火狐 OK IE 不 OK
//var date = new Date("06 05,1987 23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("6 5,1987 23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("1987,06 05"); // 火狐 OK IE 不 OK
//var date = new Date("1987,6 5"); // 火狐 OK IE 不 OK
//var date = new Date("1987,06,05"); // 火狐 OK IE 不 OK
//var date = new Date("1987,6,5"); // 火狐 OK IE 不 OK
//var date = new Date("1987,06 05,23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("1987,6 5,23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("1987,06,05,23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("1987,6,5,23:12:33"); // 火狐 OK IE 不 OK
//var date = new Date("1987/6/5,23:12:33"); // 火狐和 IE 都 OK
//var date = new Date("1987/06/05,23:12:33"); // 火狐和 IE 都 OK
//var date = new Date("06/05/1987,23:12:33"); // 火狐和 IE 都 OK
//var date = new Date("6/5/1987,23:12:33"); // 火狐和 IE 都 OK
//var date = new Date("1987/6/5"); // 火狐和 IE 都 OK
//var date = new Date("1987/06/05"); // 火狐和 IE 都 OK
//var date = new Date("06/05/1987"); // 火狐和 IE 都 OK
var date = new Date("6/5/1987"); // 火狐和 IE 都 OK
//var date = new Date("06-05-1987"); //IE OK,火狐不 OK
//var date = new Date("6-5-1987"); //IE OK,火狐不 OK
//var date = new Date("1987-06-05"); // 火狐 OK,IE 不 OK
alert(date);
通过上面这些示例,足以说明,如果 Date() 构造函数需要接收一个日期格式字符串的话,
那么字符串格式应如下给定:
yyyy/m/d
yyyy/MM/d
yyyy/m/d HH:mm:ss
yyyy/MM/d HH:mm:ss
m/d/yyyy
MM/dd/yyyy
m/d/yyyy HH:mm:ss
MM/dd/yyyy HH:mm:ss
getDate(): 返回一个月中的某一天, 返回值范围:1-31
getDay(): 返回一周中的第几天也就是星期几,返回值范围:0-6,0 表示星期天,6 表示星期六
getMonth(): 返回日期中的月份数字,返回值范围:0-11,0 表示 1 月,11 表示 12 月,这个有点变态
getFullYear():返回日期中的年份数字,用 4 位数字表示而不是 2 位数字的缩写形式
getHours():返回小时数,返回值范围:0-23
getMinutes(): 返回分钟数:返回值范围:0 -59
getSeconds(): 返回秒数,返回值范围:0-59
getMilliseconds(): 返回毫秒数,返回值范围:0-999,这个方法命名我表示不能理解,为何 Seconds 首字母不大写?
getTime():返回指定的日期距 1970 年 1 月 1 日 00:00:00 之间的毫秒数。
parse(): 用于将符合规定的日期字符串转换成日期,并返回该日期至 1970-01-01 的毫秒数
注意:此方法是静态方法,不用能用 Date 对象调用,而应该使用 Date 类调用。
//var date = Date.parse("1987-06-05"); // 火狐 OK,IE 不 OK
//var date = Date.parse("06-05-1987"); //IE OK,火狐不 OK
//var date = Date.parse("06/05/1987"); //IE 和火狐都 OK
var date = Date.parse("1987/06/05"); //IE 和火狐都 OK
//var date = Date.parse("6/5/1987"); //IE 和火狐都 OK
//var date = Date.parse("1987/6/5"); //IE 和火狐都 OK
//var date = Date.parse("1987/06/05 23:12:22"); //IE 和火狐都 OK
//var date = Date.parse("6/5/1987 23:12:22"); //IE 和火狐都 OK
//var date = Date.parse("1987/6/5 23:12:22"); //IE 和火狐都 OK
alert(date);
通过上面的这些示例,不难看出,parse 方法接收的日期字符串格式比较兼容的格式为:
yyyy/MM/dd
yyyy/m/d
MM/dd/yyyy
M/d/yyyy
yyyy/MM/dd HH:mm:ss
yyyy/m/d HH:mm:ss
MM/dd/yyyy HH:mm:ss
M/d/yyyy HH:mm:ss
setDate(): 设置一个月中的某一天, 取值范围:1-31
setDay(): 设置一周中的第几天也就是星期几,取值范围:0-6,0 表示星期天,6 表示星期六
setMonth(): 设置日期中的月份数字,取值范围:0-11,0 表示 1 月,11 表示 12 月,这个有点变态
setFullYear():设置日期中的年份数字,用 4 位数字表示而不是 2 位数字的缩写形式
setHours():设置小时数,取值范围:0-23
setMinutes(): 设置分钟数:取值范围:0 -59
setSeconds(): 设置秒数,取值范围:0-59
setMilliseconds(): 设置毫秒数,取值范围:0-999,这个方法命名我表示不能理解,为何 Seconds 首字母不大写?
setTime():设置指定的日期距 1970 年 1 月 1 日 00:00:00 之间的毫秒数。
toString(): 将 Date 对象转换成字符串形式, 默认是格林威治标准时间格式即 GMT 格式
toTimeString():将 Date 对象的时间部分转成字符串形式,GMT 格式
toDateString(): 将 Date 对象的日期部分转成字符串形式,GMT 格式
toLocaleString:根据本地语言的日期规则表示,中文下是 yyyy 年 MM 月 dd 日 hh:mm:ss
Date.UTC(year,month,day,hours,minutes,seconds,ms):
此方法用于根据世界时返回距离 1970-01-01 的毫秒数,前 3 个参数是必须的,其余参数是可选的,
分别表示年、月、日、小时、分钟、秒、毫秒,
此方法返回的毫秒数可以传递给 Date() 构造函数,
Date 对象的 toString 方法默认是转换成 GMT 格式,对于我们来说,不适用,我们往往希望显示为 yyyy-MM-dd hh:mm:ss 格式,
Date 原生对象没有提供这个功能,只好自己扩展了,
- Date.prototype.format =
- function(format) {
- var o = { "M+" : this.getMonth() + 1,
- //month 月
- "d+" : this.getDate(),
- //day 日
- "h+" : this.getHours(),
- //hour 时
- "m+" : this.getMinutes(),
- //minute 分
- "s+" : this.getSeconds(),
- //second 秒
- "q+" : Math.floor((this.getMonth() + 3) / 3),
- //quarter季度
- "S" : this.getMilliseconds() //millisecond毫秒
- }
- if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- }
- for (var k in o) {
- if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
- }
- }
- return format;
- }
使用示例:
- var date = new Date();
- alert(date.format("yyyy-MM-dd hh:mm:ss"));
js 的原生 Date 类也没有提供 add 方法即在原日期基础先添加或减去指定天数,现扩展如下:
- Date.prototype.dateAdd =
- function(interval, number) {
- var d = this;
- var k = {
- 'y': 'FullYear',
- 'q': 'Month',
- 'm': 'Month',
- 'w': 'Date',
- 'd': 'Date',
- 'h': 'Hours',
- 'n': 'Minutes',
- 's': 'Seconds',
- 'ms': 'MilliSeconds'
- };
- var n = {
- 'q': 3,
- 'w': 7
- }; eval('d.set' + k[interval] + '(d.get' + k[interval] + '()+' + ((n[interval] || 1) * number) + ')');
- return d;
- }
interval 参数:
y 年
q 季度
m 月
d 日
w 周
h 小时
n 分钟
s 秒
ms 毫秒
number 参数:时间间隔,必须为数字,为正数表示获取指定间隔的未来的日期,为负数表示过去的日期
// 用于计算两个日期之间的时间间隔,
// 使用此方法还能比较两个日期的大小,如果返回值大于 0,表示 objDate2 比较大,
// 如果小于 0,表示 objDate2 比较小
- Date.prototype.dateDiff = function(interval, objDate2) {
- var d = this,
- i = {},
- t = d.getTime(),
- t2 = objDate2.getTime();
- i['y'] = objDate2.getFullYear() - d.getFullYear();
- i['q'] = i['y'] * 4 + Math.floor(objDate2.getMonth() / 4) - Math.floor(d.getMonth() / 4);
- i['m'] = i['y'] * 12 + objDate2.getMonth() - d.getMonth();
- i['ms'] = objDate2.getTime() - d.getTime();
- i['w'] = Math.floor((t2 + 345600000) / (604800000)) - Math.floor((t + 345600000) / (604800000));
- i['d'] = Math.floor(t2 / 86400000) - Math.floor(t / 86400000);
- i['h'] = Math.floor(t2 / 3600000) - Math.floor(t / 3600000);
- i['n'] = Math.floor(t2 / 60000) - Math.floor(t / 60000);
- i['s'] = Math.floor(t2 / 1000) - Math.floor(t / 1000);
- return i[interval];
- }
interval 参数:参照上面 dateAdd 方法的 interval 参数说明,
objDate2:另一个日期对象
js 中的 Math 类:
此类是静态类,不能通过构造函数创建实例的,所以提供的方法都是静态方法,直接通过类名调用
abs(): 获取数字的绝对值,如果提供的参数是字符串,则会首先尝试将其转换成数字,如果不能
转成数字,则直接返回 NaN, 如果能,则返回其绝对值。
ceil(): 对传入的参数进行向上取整计算,如果传入的不是数字,则会尝试将其进行数字转换,
不能转换则之间则直接返回 NaN
floor(): 对传入参数进行向下取整计算,如果传入的不是数字,则会尝试将其进行数字转换,
不能转换则之间则直接返回 NaN
max(x1,x2,x3.....xn): 返回指定参数中的最大值,如果指定参数中有一个不能转换成数字,则直接
返回 NaN, 如果没有传入参数,则返回负无穷大
min(x1,x2,x3.....xn):返回指定参数中的最小值,如果指定参数中有一个不能转换成数字,则直接
返回 NaN, 如果没有传入参数,则返回正无穷大
pow(x,y): 返回 x 的 y 次幂, 如果计算结果是负数,则返回 NaN, 如果由于计算结果太大,导致浮点溢出,
则返回正无穷大
random(): 返回 0 ~ 1 之间的一个随机数。
round(x): 与 x 最接近的整数。如果 x 是正数,那么 0.5 会转成 1,如果是 - 0.5,那么会舍掉,
-0.50001 才会转成 - 1
sqrt(x): 返回一个数的平方根, 如果 x 小于 0,则返回 NaN,
如果传入的不是数字,则会尝试将其进行数字转换,
不能转换则之间则直接返回 NaN
js 的 RegExp 正则对象:
创建正则对象两种方式:
1. /pattern/attributes
pattern 是正则表达式部分,
attributes:可选参数,包含属性 "g"、"i" 和 "m" 等取值
g: 表示全局匹配 (查找所有匹配而非在找到第一个匹配后停止)
i: 表示忽略大小写
m: 表示多行匹配
2,new RegExp(pattern,attributes), 第二个参数可选
以上这篇 JavaScript 原生对象常用方法总结 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0224/265802.html