JavaScript---网络编程(3)-Object、String、Array对象和prototype属性

本节学习JavaScript的对象和方法(函数)~

Object 对象

提供所有 JScript 对象通用的功能。

obj = new Object([value])

参数
obj
必选项。要赋值为 Object 对象的变量名。
value
可选项。任意一种 JScript 基本数据类型。(Number、Boolean、或 String。)如果 value 为一个对象,返回不作改动的该对象。如果 value 为 null、undefined,或者没有给出,则产生没有内容的对象。
说明
Object 对象被包含在所有其它 JScript 对象中;在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法,并在适当的时候通过 JScript 调用。toString 方法是经常被重定义的 Object 方法的例子。

代码演示:

<html>
  <head>
    <title>Object对象的用法演示</title>
  </head>

  <body>
   <script type="text/javascript">
        /*toString():将对象转换成字符串*/
        function show(){
            document.write("show...");
        }

        document.write(show);//默认调用的是toString()
        document.write("<br/>");
        document.write(show.toString());
        document.write("<br/>");
        document.write(show.toLocaleString());
        document.write("<br/>");

        var arr=[1,5,6,20];
        document.write(arr+"<br/>");//默认调用的是toString()
        document.write(arr.toString()+"<br/>");

        /*valueOf(): 返回指定对象的原始值  */
        document.write(arr.valueOf()+"<br/>");//结果和toString()一样
        document.write(show.valueOf());//结果和toString()一样

   </script>
  </body>
</html>

演示结果:

toLocaleString 方法说明:

就是根据你电脑的设置时区,来匹配输出时间的格式,一般在字符串用的少。
说明
toLocaleString 方法返回一个 String 对象,这个对象中包含了用当前区域设置的默认格式表示的日期。
对于公元 1601 和 1999 之间的时间,日期格式要按照用户的“控制面板”中“区域设置”来确定。
F对于此区间外的其他时间,使用 toString 方法的默认格式。
例如,同样是 1 月 5 日,在美国,toLocaleString 可能会返回 “01/05/96 00:00:00”,而在欧洲,返回值则可能是 “05/01/96 00:00:00”,因为欧洲的惯例是将日期放在月份前面。

注意 toLocaleString 只用来显示结果给用户;不要在脚本中用来做基本计算,因为返回的结果是随机器不同而不同的。

String 对象:

可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。

语法
newString = new String([“stringLiteral”])

参数
newString
必选项。要赋值为 String 对象的变量名。

stringLiteral
可选项。任意 Unicode 字符群。

说明
String 对象可用字符串文字显式创建。用这种方法创建的 String 对象(指以标准字符串形式)与用 new 运算符创建的 String 对象处理上不同。所有字符串文字共享公用的全局字符串对象。如果为字符串文字添加属性,则它对所有标准字符串对象都是可用的:

var alpha, beta;
alpha = “这是一个字符串”;
beta = “这也是一个字符串”;

alpha.test = 10;
在前一示例中,这时为 beta 和所有将来的字符串定义 test。然而,在下面的例子中,被添加属性的处理略有不同:

var gamma, delta;
gamma = new String(“这是一个字符串”);
delta = new String(“这是也一个字符串”);

gamma.test = 10;
在这种情况下,不为 delta 定义 test。每个用 new String 声明的 String 对象有其自己的一组成员。这是对 String 对象和字符串文字的处理不同的唯一情况。

replace 方法

返回根据正则表达式进行文字替换后的字符串的复制。
stringObj.replace(rgExp, replaceText)

参数
stringObj
必选项。要执行该替换的 String 对象或字符串文字。该字符串不会被 replace 方法修改。

rgExp
必选项。为包含正则表达式模式或可用标志的正则表达式对象。也可以是 String 对象或文字。如果 rgExp 不是正则表达式对象,它将被转换为字符串,并进行精确的查找;不要尝试将字符串转化为正则表达式。

replaceText
必选项。是一个String 对象或字符串文字,对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。在 Jscript 5.5 或更新版本中,replaceText 参数也可以是返回替换文本的函数。

slice 方法 (String)

返回字符串的片段。
stringObj.slice(start, [end])

参数
stringObj
必选项。是一个 String 对象或文字。

start
必选项。下标以 0 开始的 stringObj 指定部分起始索引。

end
可选项。下标以 0 起始的 stringObj 的指定部分结束索引。

说明
slice 方法返回一个包含 stringObj 的指定部分的 String 对象。

slice 方法一直复制到 end 所指定的元素,但是不包括该元素。如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。

示例
在下面的示例中,slice 方法的两种用法将返回相同的结果。第二个示例中的 -1 指向 str1 中的最后一个字符,并作为提取操作的结束位置。
str1.slice(0)
str2.slice(0,-1)

代码演示:

<html>
<head>
<title>String对象的用法演示</title>
</head>

<body>
    <script type="text/javascript" src="out.js">
        //注意导入顺序,必须先导入,后面才能用
    </script>

    <script type="text/javascript">
        var str = new String("abc123");
        println(str);
        var str2 = "qwe234";
        println(str2);
    </script>
    <!-- 加个小知识点<pre>-按原格式输出到网页(空格回车不忽略) -->
    <pre>
    asdsad
            asfd
            sdf  dsfd
            dsfd   dsf
        </pre>
    <script type="text/javascript">
        //length属性:返回 String 对象的长度
        println(str.length);

        println(str.bold());//bold 方法 把 HTML <B> 标记放置在 String 对象中的文本两端。

        println(str2.bold());

        println(str.charAt(3));
        println(str.concat(str2));//连接str+str2---返回新的字符串

        println(str.fontcolor("red"));//fontcolor 方法
        //把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端。

        println(str.link("http://www.hncu.net"));//link 方法
        //把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。 

        println(str.replace("1", "666"));//将1这个字符替换成666

        println(str.search("bc"));// 1
        //search 方法
        //返回与正则表达式查找内容匹配的第一个子字符串的位置。

        println( str.slice(1, 4));

        println( str.substring(1, 4));//返回位于 String 对象中指定位置的子字符串。
        //substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。
        //例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
        //如果 start 或 end 为 NaN 或者负数,那么将其替换为0。 

        println( str.strike() );//字符串加删除线
        //将 HTML 的<STRIKE> 标识放置到 String 对象中的文本两端。

        println( str.substring(0, 4)+str.substring(4, 5).sub() );
        //sub()  -- 下标-将 HTML 的 <SUB> 标识放置到 String 对象中的文本两端。

        println( str.substr(1,3) ); //从位置1开始,截取3个字符
        str = "aBcewWfd677";
        println( str.toUpperCase() );//返回一个字符串,该字符串中的所有字母都被转化为大写字母。
    </script>

</body>
</html>

out.js–代码:

function println(param){
    document.write(param+"<br/>");
}

function print(param){
    document.write(param);
}

360浏览器8.1 演示结果:

prototype属性的用法演示

返回对象类型原型的引用。
objectName.prototype
objectName 参数是对象的名称。

JS是基于对象的,用对象的时候都是临时去读取复制原型的,这个属性,就是改变那个原型的。

用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

代码演示:

<html>
  <head>
    <title>prototype属性的用法演示</title>
  </head>

  <body>
    <script type="text/javascript" src="out.js">
    </script>

    <script type="text/javascript">
      //※※※利用prototype更改原型时,如果属性或方法已经存在那么是修改,否则就是添加。
      //※※给String原型对象添加一个属性aa
       String.prototype.aa=100;
       var str = "abc123";
       println( str.aa );
       println( "aw12".aa );//只要是String型的,都能调用aa,结果都是100
    </script>

    <script type="text/javascript">
      //※※给String原型对象添加一个函数---以trim()为例--去前后空格
      //过渡版
      function trim(str){
         var start=0;
         var end = str.length-1;
         while(start<=end && str.charAt(start)==' '){
             start++;
         }
         while(start<=end && str.charAt(end)==' '){
             end--;
         }
         return str.substring(start,end+1);
      }
      println( trim("   ewwewe  ewwewe   ") );
      //println( "   ewwewe  ewwewe   ".trim() );

    </script>

    <!--
        <script type="text/javascript">
          //※※给String原型对象添加一个函数---以trim()为例
          //不用传参,将str改为this就可以了。
          //法1---用非匿名函数
          function trim(){
             var start=0;
             var 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.trim=trim;//给原型对象添加一个trim()方法
          println( "  yyy 666   ".trim() );

        </script>

     -->

    <script type="text/javascript">
      //※※给String原型对象添加一个函数---以trim()为例
      //法2---用匿名函数
      String.prototype.trim= function(){ //给原型对象添加一个trim()方法
         var start=0;
         var end = this.length-1;
         while(start<=end && this.charAt(start)==' '){
             start++;
         }
         while(start<=end && this.charAt(end)==' '){
             end--;
         }
         return this.substring(start,end+1);
      };

      println( "  yyrry 666888   ".trim() );

      var sstr = new String("  www eee  ");
      println( sstr.trim() );

    </script>

  </body>

</html>

360浏览器8.1 演示结果:

prototype扩展:

我们现在扩展一下,假如我们先写好js,再导入,就可以直接用我们自己写的那个函数,那个值了。

代码演示:

<html>
  <head>
    <title>利用prototype属性给API进行功能扩展</title>
  </head>

  <body>
    <script type="text/javascript" src="out.js">
    </script>
    <script type="text/javascript" src="stringtools.js">
    </script>

    <script type="text/javascript">
       var str="   hjdsh  ";
       println( str.trim() );//去掉字符串前后空格

       println( str.toCharArray() );//字符串转换为字符数组

       var str2 = "abc123";
       println( str2 );
       println( str2.reverse() );//字符串反转输出

    </script>

  </body>

</html>

stringtools.js的代码:

//给原型对象添加一个trim()方法
String.prototype.trim = function() {
    var start = 0;
    var end = this.length - 1;
    while (start <= end && this.charAt(start) == ' ') {
        start++;
    }
    while (start <= end && this.charAt(end) == ' ') {
        end--;
    }
    return this.substring(start, end + 1);
};

// 给原型对象添加一个toCharArray()方法
String.prototype.toCharArray = function() {
    var chs = [];
    for ( var x = 0; x < this.length; x++) {
        chs[x] = this.charAt(x);
    }
    return chs;
};

// 给原型对象添加一个reverse()方法
String.prototype.reverse = function() {
    //js中,函数当中可以再定义函数--内部函数
    function swap(arr,x,y){
        var temp = arr[x];
        arr[x] = arr[y];
        arr[y] = temp;
    }
    var arr = this.toCharArray();
    for(var x=0,y=arr.length-1; x<y; x++,y--){
        swap(arr,x,y);
    }
    return arr.join("");//join(str)方法-返回字符串,str就是连接数组元素之间的符号。
};

360浏览器8.1 演示结果:

Array对象使用方法

代码演示:

<html>
  <head>
    <title>Array对象使用方法演示</title>
  </head>

  <body>
    <script type="text/javascript" src="out.js">
    </script>
   <script type="text/javascript">
     var arr=["aaa","bbb","ccc","ddd"];
     println(arr);
     var arr2=["111","222","333","okok"];
     var newArr = arr.concat(arr2);
     println(newArr);

     println(newArr.join("-"));

     println("<hr/>");

     //pop() :  移除数组中的最后一个元素并返回该元素。
     println( newArr.pop() );
     println(newArr);
     //push() : 将新元素添加到一个数组中,并返回数组的新长度值。
     arr.push("x1",arr2,"x2");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9
     println(arr+"----二维数组了");
     println(arr.length);
     //arr.push("y1",arr2,"z1");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9
     arr=arr.concat("y1",arr2,"z1");
     //注意1,该方法会把数组arr2当中的每个元素取出来,分别添加到arr当中---arr还是一维数组
     //注意2,concat方法不会改变原来的数组,连接结果以新数组的形式返回。旧arr的长度还是6,新arr的长度是12
     println(arr);
     println(arr.length);

     arr.sort();
     println(arr);

     arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始,删掉3个元素,并且在删除的位置插入:"u1","u2","u3","u4","u5"
     println(arr);

     //※※※做栈和队列的提示
     //unshift---addFirst  concat--addLast()  shift---removeFirst()  pop---removeLast()
     //Array.prototype.addFirst=unshift;

   </script>

    <script type="text/javascript" src="arraytools.js">
    </script>
    <script type="text/javascript">
       var arr=["aaa","bbb","ccc","ddd"];
       var max = arr.getMax();
       println(max);
       println(arr);

    </script>

  </body>

</html>

arraytools.js代码:

//给原型对象添加一个getMax()方法
Array.prototype.getMax = function() {
    var temp=0;
    for(var x=1;x<this.length;x++){
        if(this[x]>this[temp]){
            temp = x;
        }
    }
    return this[temp];
};
Array.prototype.toString = function() {
    return "["+this.join("")+"]";
};

360浏览器8.1 演示结果:

prototype属性真的很强大~~~

时间: 2024-09-23 10:30:32

JavaScript---网络编程(3)-Object、String、Array对象和prototype属性的相关文章

了解JavaScript中对象的prototype属性

一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢?对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法

详解JavaScript异步编程中jQuery的promise对象的作用_jquery

Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行

【JS基础回顾】Array对象及其常用属性以及方法

目的很简单,主要回顾下javascript里面Array常用的一些属性以及方法,虽然经常使用,但其实一些细节没有注意到,总是等到用到的时候再去查有点浪费时间,因此总结了下加深印象 一.Array的几种声明方式 var arr = [1, 2, 3]; var arr = new Array(2); //声明一个数组,长度为2,默认填充值为undefined的元素 var arr = new Array(1, 2, 3); var arr = new Object([1, 2, 3]); 关于第二

《JavaScript专家编程》——第1章 对象和原型 1.1鸟瞰JavaScript

第1章 对象和原型 练习不会造就完美,只有使用最佳的方法来练习才能造就完美. --Vince Lombardi 对专家来说,把JavaScript的核心概念讲上3章似乎有点多,毕竟这些是语言最基本的组成部分.我的主张是,有的人虽然不能读写,但可以说话.就像有的开发人员对JavaScript的基本功能很熟悉,但对里面那些复杂的东西可能就没那么了解了. 本书的目标是像明灯一样照亮语言中那些晦涩的角落.里面包含的很多概念你可能已经试着学习过了,甚至可以假设你已经理解了.这里可以想象一下:你正降落到你大

javascript面向对象编程:js类定义函数时prototype和this的区别

在面向对象编写js脚本时,定义实例方法主要有两种 如下: function ListCommon2(afirst) { var first=afirst; this.do1=function () { alert("first do"+first); } } ListCommon2.prototype.do2=function() { // alert("first do"+first);//会出错,不能访问first this.do1(); } this.do1=

JavaScript 面向对象编程, 第一部分: 继承

javascript|编程|对象|继承 我们将向你展示 JavaScript 如何实现面向对象的语言中的: 继承. 同时, 这些例子将向你展示如何实现类的封装. 在此, 我们不会讨论多态实现. 虽然 JavaScript 是脚本语言, 但它所支持的面向对象编程也是非常强大的. 虽然它没有类和实例, 但它有对象, 原型和隐式的继承. 我们将会解释如何模拟继承及其超类与子类之间关系的形式. 原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 Ja

JavaScript每天必学之数组和对象部分_javascript技巧

对象部分  Object类型  Object 是一个无序的集合,可以存放任意类型对象,所有其他对象都继承自这个对象.  创建Object类型有两种,一种是使用new运算符,一种是字面量表示法.  1.使用new运算符创建Object var obj = new Object();//注意大写,也可以直接写成Object() 注意,通过new Object() 的写法生成新对象,与字面量的写法 obj = {} 是等价的.  2. 使用字面量方式创建: var obj = { name : 'tr

Javascript面向对象编程_js面向对象

Javascript的重要性 使用率 1.在web应用中,涉及到前端界面编程基本上都要用到javascript语言: 2.Web2.0及Ajax推动了javascript语言. 3.随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将不断加大: javascript的特点 简单 动态 基于对象(面向对象) Javascript面向对象概述 Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDri

Javascript面向对象编程(三):非构造函数的继承

Javascript面向对象编程(三):非构造函数的继承 作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生&qu