JavaScript---- 基于对象的操作
Posted Dev_Nick
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript---- 基于对象的操作相关的知识，希望对你有一定的参考价值。
常用对象
为了便于操作基本类型值，ECMAScript 提供了3个特殊的引用类型：Boolean,Number,String。它们是引用类型。当读取基本数据类型时，后台就会创建一个对应的基本包装类对象，所以我们在操作基本数据类型时，可以直接调用一些方法。
1、String对象
创建一个字符串的方式：
方式1：
new String("字符串的内容");
方式2：
var str = "字符串的内容";
字符串常用的方法：
anchor（） 生产锚点
blink（） 为元素添加blink标签
charAt() 返回指定索引位置处的字符。
charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。
fontcolor() 把带有 COLOR 属性的一个 html <FONT> 标记放置在 String 对象中的文本两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML <I> 标记放置在 String 对象中的文本两端。
link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
replace() 返回根据正则表达式进行文字替换后的字符串的复制
split() 切割
Substr() 截取子串
toUpperCase() 转大写
toLowerCase 转小写
代码示例
1 <script type="text/javascript"> 2 document.write("第五章".anchor("five")+"<br/>"); 3 document.write("第五章".blink()+"<br/>"); //现在的浏览器基本都不支持了闪烁标签了 4 document.write("abc".charAt(1)+"<br/>"); 5 document.write("abc".charCodeAt(1)+"<br/>"); //chatCodeAt返回的是索引值对应的字符的码值。 6 document.write("第六章".fontcolor("red")+"<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。 7 document.write("abchellohehehello".indexOf("hello")+"<br/>"); //返回指定字符串第一次出现的索引值。 8 document.write("第五章".italics()+"<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。 9 document.write("百度".link("http://www.baidu.com")+"<br/>"); // 给文本添加一个a标签， 10 document.write("明天我们讲xml".replace("xml","DOM编程")+"<br/>"); // 给文本添加一个a标签， 11 12 var str = "我们-大家-好"; 13 var arr = str.split("-"); 14 for(var index = 0 ; index<arr.length ; index++){ 15 document.write(arr[index]+","); 16 } 17 document.write("<br/>"); 18 document.write("abc".toUpperCase()+"<br/>"); //转大写 19 document.write("ABC".toLowerCase()+"<br/>"); //转小写 20 21 </script>
2、Number对象
创建Number对象的方式：
方式1：
var 变量= new Number(数字)
方式2：
var 变量 = 数字;
常用的方法：
toString() 把数字转换成指定进制形式的字符串。
toFixed() 指定保留小数位,而且还带四舍五入的功能。
代码示例
1 <script type="text/javascript"> 2 3 var num = 10; // 十进制 4 document.write("十进制："+num.toString()+"<br/>"); //默认转化成十进制的字符串 5 document.write("二进制："+num.toString(2)+"<br/>"); 6 document.write("八进制："+num.toString(8)+"<br/>"); 7 document.write("十六进制："+num.toString(16)+"<br/>"); 8 document.write("三进制："+num.toString(3)+"<br/>"); // 101 9 var num2 = 3.455; 10 document.write("保留两位小数:"+num2.toFixed(2)) 11 12 </script>
3、Date对象
创建Date的方法：
dateObj = new Date()dateObj =
new Date(dateVal)dateObj = new
Date(year, month, date[, hours[,
minutes[, seconds[,ms]]]])
常用方法
getFullYear()
getMonth()
getDate()
getHours()
getMinutes()
getSeconds()
代码示例
1 <script type="text/javascript"> 2 /* 3 日期对象（Date） 4 5 6 */ 7 var date = new Date(); //获取到当前的系统时间 8 document.write("年："+ date.getFullYear()+"<br/>"); 9 document.write("月："+ (date.getMonth()+1)+"<br/>"); 10 document.write("日："+ date.getDate()+"<br/>"); 11 12 document.write("时："+ date.getHours()+"<br/>"); 13 document.write("分："+ date.getMinutes()+"<br/>"); 14 document.write("秒："+ date.getSeconds()+"<br/>"); 15 16 //xxxx年yy月dd日 hh:mm:ss 17 18 //document.write("当前时间是："+date.toLocaleString()); 19 document.write("当前时间是："+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+ 20 date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()); 21 22 </script>
实战：在浏览器中显示当前时间
代码示例
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 当前系统时间：<span id="time"></span> 8 </body> 9 10 11 <script type="text/javascript"> 12 13 function getCurrentTime(){ 14 //获取到当前的系统时间 15 var date = new Date(); 16 //把当前系统时间拼装成我指定的格式。 17 var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+ 18 date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); 19 20 //找span对象 21 var spanObj = document.getElementById("time"); 22 //设置span标签体的内容 23 spanObj.innerHTML = timeInfo.fontcolor("red"); 24 } 25 26 getCurrentTime(); 27 28 //定时方法. 29 window.setInterval("getCurrentTime()",1000); /* setInterval 定时方法，第一个参数要指定调用的代码，第二参数是每 隔指定的毫秒数调用指定的代码。*/ 30 31 32 </script> 33 34 35 </html>
注意：JavaScript代码需要在html标签存在的情况下，才能使用。
关于定时器的方法
setInterval(代码, 毫秒数) 每经过指定毫秒值后执行指定的代码。
setTimeout(代码, 毫秒数) 经过指定毫秒值后执行指定的代码（只执行一次）。
4、Math对象
Math对象是一个固有对象，提供基本数学函数和常数。
常用方法
Math对象常用的方法：
ceil 向上取整
floor（） 向下取整
random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
round 四舍五入
代码示例
1 <script type="text/javascript"> 2 3 document.write("向上取整："+ Math.ceil(3.14)+"<br/>"); 4 document.write("向下取整："+ Math.floor(3.14)+"<br/>"); 5 document.write("随机数："+ Math.random()+"<br/>"); 6 document.write("四舍五入："+ Math.round(3.75)+"<br/>"); 7 8 </script>
5、数组对象
创建方式
方式1：
var 变量名 = new Array(); 创建一个长度为0的数组。
方式2：
var 变量名= new Array(长度) 创建一个指定长度的数组对象。
方式3：
var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组 的对象。
方式4：
var 变量名 = ["元素1","元素2"...];
注意：在javascript中数组的长度是可以发生变化的。
常用方法
sort()对当前数组进行排序，并返回已经进行了排序的此Array对象。不会创建新对象，是在指定数组中直接进行排序。
reverse()对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。 不会创建新对象，是在指定数组中直接进行排序。
push( [item1 [item2 [. . . [itemN ]]]] )将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。
pop()移除数组中的最后一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
shift()移除数组中的第一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])移除从 start 位置开始的指定个数的元素，并插入新元素，从而修改
concat([item1[, item2[, . . . [, itemN]]]])返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。如果某一项为数组，那么添加其内容到 array1 的末尾。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。 slice(start, [end]) 返回一个包含了指定的部分元素的数组。将返回索引大于等于start且小于end的一段。原数组不变。
join(separator)把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。如果数组中有元素没有定义或者为 null，将其作为空字符串处理。
代码示例
1 <script type="text/javascript" > 2 3 var arr1 = ["狗娃","狗剩","铁蛋"]; 4 var arr2 = ["永康","才厚"]; 5 6 /* 7 arr1 = arr1.concat(arr2); //concat把arr1与arr2的数组元素组成一个新的数组返回。 8 for(var index in arr1){ 9 document.write(arr1[index]+","); 10 } 11 12 13 var elements = arr1.join(","); // join使用指定的分隔符把数组中的元素拼装成一个字符串返回。 14 document.write("数组的元素："+elements); 15 16 17 pop ：移除数组中的最后一个元素并返回该元素。 18 19 document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>"); 20 21 arr1.push("永康"); // 将新元素添加到一个数组中，并返回数组的新长度值。 22 23 arr1.reverse(); //翻转数组的元素 24 25 document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。 26 27 28 var subArr = arr1.slice(1,2); //指定数组 的开始索引值与结束索引值截取数组的元素，并且返回子数组。 29 document.write("子数组的元素："+subArr.join(",")+"<br/>"); 30 31 32 33 34 arr1 = [19,1,20,5]; 35 arr1.sort(sortNumber); //排序，排序的时候一定要传入排序的方法。 36 37 function sortNumber(num1,num2){ 38 return num1-num2; 39 } 40 41 42 arr1.splice(1,1,"张三","李四","王五"); //第一个参数是开始删除元素的 索引值， 第二参数是删除元素的个数，往后的数据就是插入的元素。 43 44 */ 45 46 document.write("数组的元素："+arr1.join(",")); 47 48 </script>
自定义对象
在javascript没有类的概念，只要有函数即可创建对象。
自定义对象的方式
方式1： 使用无参的函数创建对象。
例子：
function Person(){}
var p = new Person(); //创建了一个Person对象了
p.id = 110;
p.name = "狗娃";
方式2：使用带参的函数创建对象。
function Person(id,name){
this.id = id;
this.name = name;
this.say = function(){
alert(name+"呵呵");
}
}
var p = new Person(110,"狗剩"); //创建对象
方式3： 使用Object函数创建对象。
var p = new Object();
p.id = 110;
p.name = "铁蛋";
方式4：使用字面量的方式创建。
var p = {
id:110,
name:"狗娃",
say:function(){
alert(this.name+"呵呵");
}
}
代码示例
自定义数组工具对象
1 /* 2 需求：编写一个js文件，在js文件中自定义一个数组工具对象， 3 该工具对象要有一个找到最大值的方法，与找元素对应的索引值的方法。 4 */ 5 6 //创建ArrayTool的对象 7 8 var tool = new ArrayTool(); 9 10 function ArrayTool(){ 11 12 //找最大值 13 this.getMax = function(arr){ 14 var max = arr[0]; 15 for(var i = 1 ; i<arr.length ;i++){ 16 if(arr[i]>max){ 17 max = arr[i]; 18 } 19 } 20 return max; 21 } 22 23 //找元素 的索引值 24 this.searchEle = function(arr,target){ 25 for(var i = 0 ; i<arr.length ; i++){ 26 if(arr[i] ==target){ 27 return i; 28 } 29 } 30 return -1; 31 } 32 }
以上是关于JavaScript---- 基于对象的操作的主要内容，如果未能解决你的问题，请参考以下文章
javascript制作图javascript制作图片无限懒加载，轻松又实用片无限懒加载，轻松又实用
IOC 控制反转Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )(代码片