zoukankan      html  css  js  c++  java
  • 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>
    View Code

    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>
    View Code

    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>
    View Code

    实战:在浏览器中显示当前时间

    代码示例

     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>
    View Code

    注意: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>
    View Code

    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>
    View Code

    自定义对象

    在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 }
    View Code
  • 相关阅读:
    PHP session
    PHP范例注册审核
    php文件操作
    JSON 弹窗
    PDO
    CSP-S2020 游记
    Meissel-Lehmer算法 学习笔记
    [AGC046C] Shift 题解
    Min_25筛学习笔记
    GDOI2020 游记
  • 原文地址:https://www.cnblogs.com/nicker/p/6291177.html
Copyright © 2011-2022 走看看