Javascript学习总结-面向对象-(五)

1. 面向对象

JavaScript面向对象的脚本语言,此时开发者在开发的时候需要找对象,默认提供了内置的对象。也可以根据开发者的需求自己定义对象。

1.1.     基本数据类型包装类

为了便于操作基本类型值,ECMAScript 提供了3个特殊的引用类型:Boolean,Number,String。它们是引用类型。当读取基本数据类型时,后台就会创建一个对应的基本包装类对象,所以我们在操作基本数据类型时,可以直接调用一些方法。 

1.1.1.  String

 

//通过构造函数创建String 对象

var b = new String("java");

var c = new String("java");

document.write(b + "," + c);

document.write(b == c);

//false

//比较字符串的值是否相等

document.write(b.valueOf() == c.valueOf());

 

//属性

var a = "helloworld";

document.write(a.length);

 

 

常见的方法:

Anchor() 生产锚点

Blink()   为元素添加blink标签

charAt()    返回指定索引位置处的字符。

charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。

Concat()    回字符串值,该值包含了两个或更多个提供的字符串的连接。

Fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端

indexOf()    返回 String 对象内第一次出现子字符串的字符位置

italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。

Link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。

Replace()      返回根据正则表达式进行文字替换后的字符串的复制

Split()        切割  

Substr()       截取子串

toUpperCase()  转大写

toLowerCase()  转小写

//方法

document.write("第五章".anchor("ch1"));

document.write("第五章".blink());

//    返回在指定位置的字符。

document.write("第五章".charAt(0));

document.write("a".charCodeAt(0));

document.write("第五章".concat("abc"));

document.write("第五章".fontcolor("#ff0000"));

document.write("第五章".indexOf("五"));

document.write("第五章".italics());

document.write("第五章".link());

document.write("helloworld".replace(/l/g, "L"));

document.write("<br/>");

var names = "jack-lili-lucy".split("-");

for (var temp in names) {

   document.write(names[temp] + "<br/>");

}

document.write("<br/>");

document.write("helloworld".substr(1, 2)); //el

document.write("helloworld".substring(1, 2));//e

document.write("helloworld".toUpperCase());

document.write(new String("java").toString() == new String("java").toString());

1.1.2.  Number

构造函数

//创建number对象

var a = 12;

var b = new Number(12);

document.write(a + ":" + b);

//比较数值true

document.write(a == b);

//没有转型false

document.write(a === b);

//false

document.write(new Number(12) == new Number(12));

//false

document.write(new Number(12) === new Number(12));

// false

document.write(new Number(12).valueOf() == new Number(12).valueOf());

//true

document.write(new Number(12).valueOf() === new Number(12).valueOf());

  

属性:

document.write("最大值" + Number.MAX_VALUE + "</br>");

document.write("最小值" + Number.MIN_VALUE + "</br>");

方法

//方法

document.write(new Number(12).toString(10) + "<br/>");

document.write(new Number(12).toString(2) + "<br/>");

document.write(new Number(12).toString(8) + "<br/>");

document.write(new Number(12).toString(16) + "<br/>");

document.write(new Number(12.12345) + "<br/>");

document.write(new Number(12.12345).toFixed() + "<br/>");

document.write(new Number(12.12345).toFixed(2) + "<br/>");

document.write(new Number(12.12345).toFixed(3) + "<br/>");

备注:toFixed()是指定小数位数。

1.2.     Math类

Math工具类中的方法

       max()

       min()

       random()

       ...更多请看文档

document.write(Math.ceil(12.34) + "<br/>");

//13

document.write(Math.floor(12.34) + "<br/>");

//12

document.write(Math.round(12.54) + "<br/>");

//13

document.write(Math.round(12.35) + "<br/>");

//12

document.write(Math.random() + "<br/>");

//0~1

document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>");

document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>");

1.3.     Date对象

setInterval(代码, 毫秒数) 每经过指定毫秒值后执行指定的代码。

setTimeout(代码, 毫秒数)  经过指定毫秒值后执行指定的代码(只执行一次)。

查看文档学习Date的其他方法

function showDate() {

   //获取系统时间

   var date = new Date();

   //获取年 月 日时分秒

   var str = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + "星期" + date.getDay() + " " + date.getHours() + "时" + date.getMinutes() + "分" + date.getMinutes() + "分" + date.getSeconds() + "秒"

   //将格式化好的时间显示在叶面的span标签体中

   var span = document.getElementById("mydate");

   //给span标签设置标签体内容

   span.innerHTML = str.fontcolor("red");

   //调用定时函数

   window.setTimeout("showDate()", 1000);

}

//调用函数

showDate();
 

1.4.     数组

 数组定义:

 创建数组的基本方式有2种.

 第一种是使用Array的构造函数

 不指定长度

    var arrs=new Array(); 

    如果确定知道数组保存的数量,可以通过构造函数传递数组的长度

指定长度

        var arrs=new Array(20);

        该数组有20个元素,每一项的默认值都是undefined

指定元素

        var arrs=new Array("hello"); 会创建一个元素的数组.

第二种方式

指定元素

        创建一个包含3个字符串的数组

        var arrs=["aa","bb","cc"];

        创建一个空数组

        var arrs=[];

        var values=[1,2];

数组初始化

       var arrs=["aa","bb","cc"];

       color[2]="xx";//修改第3项

       color[3]="zz";//新增第4项

数组遍历:

       for(var i = 0; i < arr.length; i++){

           alert(arr[i]);

       }  

       或

       for( var i in arr ){

           // i 是遍历出的数组中的索引,从0开始,一直到最大索引。

           // 如果有其他属性,也会遍历出来,其实索引就是数组对象的属性。

           alert(arr[i]);

       }

注意:

JS数组可以动态增长:

//数组的声明和初始化,注意:数组的长度取决于整数下标的个数

var arr = new Array();

arr[0] = "aa";2

arr[1] = "bb";

arr[6] = 'xx';

document.write(arr + "<br/>");

//遍历数组

for (var i = 0; i < arr.length; i++) {

   document.write(arr[i]+"<br/>");

}

//下标越界时:

var arr = ["aa", "bb"];

document.write(arr[200]);

// 显示undefined

常见方法

Array中的方法:

       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,将其作为空字符串处理。

 

var a = [1, 2, 3];

//    连接两个或更多的数组,并返回结果。

document.write(a.concat([100, 30]) + "<br/>");

document.write(a.concat([100, 30], [60, 90]) + "<br/>");

//    把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

var b = a.join("$");

document.write(b + "<br/>");

document.write( typeof b + "<br/>");

//string

//    删除并返回数组的最后一个元素

document.write(a.pop() + "<br/>");

//    向数组的末尾添加一个或更多元素,并返回新的长度。

document.write(a.push(99, 78) + "<br/>");

//    把数组转换为字符串,并返回结果。

document.write(a.toString() + "<br/>");

// 返回数组对象的原始值

var c = a.valueOf();

document.write( typeof c + "<br/>");

排序:

var a = [100, 9, 20, 3, 7, 96];

document.write(a + "<br/>");

//如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序

a.sort();

document.write(a + "<br/>");

//指定比较方式

a.sort(compareTo);

document.write(a + "<br/>");

function compareTo(a, b) {

   return a - b;

}

1.5.     自定义对象

1.5.1.  无参构造函数

 

/*

 * 自定义对象

 *

 *  */

function Person() {

   window.document.write("constructor()<br>");

}

 

var person = new Person();

//定义属性

person.name = "jack";

person.age = 23;

//定义方法

person.work = function() {

   window.document.write("person working...<br/>");

};

//获取构造函数

window.document.write(person.constructor + "<br/>");

 

window.document.write(person.name + "," + person.age + "<br/>");

person.work();

 

1.5.2.  有参数构造函数

function Person(name, age) {

   this.name = name;

   this.age = age;

   this.work = function() {

      alert(this.name + ":" + this.age);

   }

}

 

var person = new Person("jack", 28);

person.work();

 

1.5.3.  Object方式

/*

 * 自定义对象Object方式

 *

 *  */

var person = new Object();

person.name = "jack";

person.age = 28;

person.sayHello = function() {

   document.write(this.name + ":" + this.age);

}

person.sayHello();

该例子创建了一个名为person的对象,并添加了2个属性(name age)和一个方法(sayHello)

使用构造函数模式方式创建对象:

    先自定义类,其实就是定义一个和类名相同的函数。

    再使用new关键字调用定义好的类。

    (任何函数,只要通过new操作符来调用,那它就可以作为构造函数)

说明:

       要将属性与方法赋给this,这样才是表示是对象的属性,如果写var str则是方法中的局部变量。

       不要写new Object()。

       不要写return语句。 

    JS在new Person()会做如下事:

       1,创建一个新对象。

       2,this指向新对象。

       3,执行构造方法中的代码。

       4,返回新对象。

字面量方式创建对象:

var person={

   name:"李四",

   age:88,

   eat:function(){

      alert("eating...");

   }

};

alert(person.name+person.age);

person.eat();

1.6.prototype

 “prototype”字面翻译是“原型”,是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。

Prototype注意的细节:

  1. prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
  2. prototype的值是一个对象
  3. 可以任意修改函数的prototype属性的值。
  4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

需求:

  自定义一个数组的工具类。 

function arrTool(){}

var ArrayTool  = new arrTool();

ArrayTool.getMax = function(arr)

{

    var max = 0;

   

    for(var x=1; x<arr.length; x++)

    {

       if(arr[x]>arr[max])

           max = x;

    }

    return arr[max];

};

ArrayTool.getMin = function(arr)

{

    var min = arr[0];

   

    for(var x=1; x<arr.length; x++)

    {

       if(arr[x]<min)

           min = arr[x];

    }

    return min;

}

/*

ArrayTool.getMax = getMax;

//获取最值。

function getMax(arr)

{

    var max = 0;

   

    for(var x=1; x<arr.length; x++)

    {

       if(arr[x]>arr[max])

           max = x;

    }

    return arr[max];

}

*/

ArrayTool.binarySearch = function(arr,key)

{

    var min,max,mid;

   

    min = 0;

    max = arr.length-1;

   

    while(min<=max)

    {

       mid  = (min+max)>>1;

      

       if(key>arr[mid])

           min = mid + 1;

       else if(key<arr[mid])

           max = mid - 1;

       else

           return mid;

    }

    return -1;

}

/*

ArrayTool.binarySearch = halfSearch;

//折半查找,必须是对有序的数组。

function halfSearch(arr,key)

{

    var min,max,mid;

   

    min = 0;

    max = arr.length-1;

   

    while(min<=max)

    {

       mid  = (min+max)>>1;

      

       if(key>arr[mid])

           min = mid + 1;

       else if(key<arr[mid])

           max = mid - 1;

       else

           return mid;

    }

    return -1;

}

 把数组的工具方法添加到javascript内置对象Array中。

 

    Array.prototype.getIndex = function(element)

{

    for(var x=0; x<this.length; x++)

    {

       if(this[x]==element)

           return x;

    }

    return -1;

}

Array.prototype.getMin = function()

{

    var min = this[0];

    for(var x=1; x<this.length;x++)

    {

       if(this[x]<min)

           min = this[x];

    }

    return min;

}  

给字符串添加新的方法

// JavaScript Document

//给字符串string对象添加新功能。

//去除字符串两端的空格。

String.prototype.trim = function()

{

    var start,end;

    start = 0;

    end = this.length-1;

   

    while(start<=end && this.charAt(start)==" ")

       start++;

      

    while(start<=end && this.charAt(end)==' ')

       end--;

      

    return this.substring(start,end+1);

}

 

//将字符串变成数组。

String.prototype.toCharArray = function()

{

    var arr = new Array(this.length);

   

    for(var x=0; x<this.length; x++)

    {

       arr[x] = this.charAt(x);

    }

   

    return arr;

}

//将字符串进行反转。

String.prototype.reverseString = function()

{

    var arr = this.toCharArray();  

   

    return arr.reverse().join("");

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值