JS基础加强

最新推荐文章于 2024-09-14 18:52:56 发布

snake_hand

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量118

点赞数

文章标签： javascript json c# ViewUI

9、面向对象

1、JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，JavaScript中String、Date等“类”都被叫做“对象”，挺怪。JavaScript中声明类（类不是类，是对象）：

function Person(name,age) {

this.name = name;

this.age =age;

this.sayHello=function(){

alert("你好，我是"+this.name+"，我"+this.age+"岁了");

}

var p1 = new Person("tom",20);

p1.sayHello();

必须要声明类名，function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加的。var p1 = Person("tom", 30);//不要丢了new，否则就变成调用函数了，p1为undefined。new 相当于创建了函数的一个实例

View Code

<html>
<head>
    <title ></ title>
    <script type="text/javascript">
        //js中没有类的概念 只是我们把它看做面向对象语言来使用
        function Person(name,age,sex) {
            this .name = name;
            this .age = age;
            this .sex = sex;
            this .sayHi = function () {
                alert( "我是:" + this .name + "  今年:"+ this .age);
            }
        }
        //需要用new实例化函数"类" 否则会将Person("yimao", 18, "男");作为事件调用
        var p1 = new Person( "yimao", 18, "男" );
        p1.sayHi();
        alert(p1); //[object Object]
        var p2 = Person("yimao" , 18, "男");
        //alert(p2); //undefined
    </script >
</head>
<body>
</body>
</html>

10、String

length属性；

charAt方法；取第几个字符

indexOf lastIndexOf

Substr(start,length)、substring(start,end)

split

match、replace、search方法，正则表达式相关

View Code

<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        var str = "i LoVe you 爱老虎油   i LOVE you  i love you" ;
        alert(str.length); //包括空格在内的长度
        alert(str.charAt(1)); //索引为1的字符 输出为空 索引都是从0开始
        alert(str.charCodeAt(0)); //返回字母i的计算机ascall码
        alert(str.indexOf( "love" ));//返回love第一次出现索引位置
        alert(str.lastIndexOf( "love" ));//返回love最后一次出现索引位置
        var email = "123@163.com" ;
        alert(str.substr(str.indexOf( "love" ), "love" .length)); //结果为love  substr(起始索引位置，截取长度)
        alert(str.substring(0, 2));  //substring(start,end)//substring（起始索引位置，结束索引位置）
        alert(str.substring(str.indexOf( "love" ),str.indexOf("love" ) + "love" .length));
        var r = /\s+/;//正则表达式放在/中/
        var arr = str.split(r);//意味 截取时可以按照多个空格截取
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
        var arr = str.match(/love/g);// /love/将love作为正则表达式 进行匹配 g意思为全局  就是返回全部符合项 返回love这样的数组
        var s = str.replace(/love/g, "hate" ); //  找到所有的love替换成为hate
        var n = str.search("love" ); // 搜索love 第一个字符串的位置  即l所在位置
        var s = str.replace(/love/gi, "hate" ); //g全局匹配 i是忽略大小写的
        alert(s);
    </script >
</ head>
<body>
</body>
</html>

11、动态数组

JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。

View Code

<html>
< head>
    <title ></ title>
    <script src="js/practics.js" type="text/javascript"></ script >
    <script type="text/javascript">
        var names = new Array();
        names[0] = "ly" ;
        names[1] = "lz" ;
        names[2] = "ls" ;
        names[3] = "lzhao" ;
        //alert(names);//显示ly,lz,ls,lzhao  names自动帮我们调用了join的方法 并且join()参数为空时默认用逗号分隔
        //alert(names.join("--"));//ly--lz--ls--lzhao  //JS中join是array的方法
不像.Net中是string的方法
        //for (var i = 0; i < names.length; i++) {
            //alert(names[i]);//ly  lz  ls lzhao
        //}
        //求数组最大值
        var arr = new Array();
        arr[0] = 18;
        arr[1] = 20;
        arr[2] = 12;
        var max=  getMax(arr);
        //alert(max);//20
        var arr = ["abc" , "123", "efc" , "456" ];
        //alert(myJoin(arr, "~")); //abc~123~efc~456
        //数组翻转  数组同样是传递引用
        var arr = ["a" , "b", "c" , "d" , "e"];
        myReverse(arr);
        //alert(arr);//e,d,c,b,a
        //交换两个数 复制传递
        var n1 = "5" ;
        var n2 = "6" ;
        swap(n1, n2);
        alert(n1 + "==" + n2);//5==6
    </script >
</ head>
<body>
</body>
</html>

使用到的practics.js文件

View Code

//求一个数组中的最大值。定义成函数。
function getMax(arr) {
    if (arr) {
        var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i];
            }
        }
        return max;
    }
}
//将一个字符串数组输出为|分割的形式，比如“鸣人|卡卡西|一毛”。
//不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔符连接成一个字符串。
//function myJoin(arr) {
//    if (arr) {
//        var str = arr[0];
//        for (var i = 1; i < arr.length; i++) {
//            str = str + "|" + arr[i];
//        }
//        return str;
//    }
//}
//myJoin(arr) 默认用|分割每一项
//myJoin(arr,"~") 指定分隔符
function myJoin(arr, sep) {
    if (arr) {
        //如果sep没赋值
        if (!sep) {
            sep = "|" ;
        }
        var str = arr[0];
        for (var i = 1; i < arr.length; i++) {
            str += sep + arr[i];
        }
        return str;
    }
}
//将一个字符串数组的元素的顺序进行反转。{"3","a","8","haha"} {"haha","8","a","3"}。
//不要使用JavaScript中的反转函数。提示：第i个和第length-i-1个进行交换。定义成函数。myreverse
function myReverse(arr) {
    for ( var i = 0; i < arr.length / 2; i++) {
        //交换位置
        var tmp = arr[i];
        arr[i] = arr[arr.length - i - 1];
        arr[arr.length - i - 1] = tmp;
    }
}
//交换两个变量
function swap(n1, n2) {
    var tmp = n1;
    n1 = n2;
    n2 = tmp;
}

12、字典

JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。

像Hashtable、Dictionary那样用，而且像它们一样效率高。

View Code

<html>
<head>
    <title ></ title>
    <script type="text/javascript">
        var dic = new Array();
        dic[ "zs" ] = "张三" ;
        dic[ "ls" ] = "李四" ;
        dic[ "ww" ] = "王五" ;
        dic[ "zl" ] = "赵六" ;
        //alert(dic["ls"]);//李四
        //alert(dic.ls); //李四
        //for (var key in dic) {
            //alert(key + "==" + dic[key]);//zs==张三 ls==李四 ...
        //}
        var arr = ["a" , "b", "c" , "d" ];
        for (var key in arr) {
            //alert(key + "==" + arr[key]);//0==a 1==b....
        }
     
        var dic = { "zs" : "张三", "ls" : "李四" , "ww": "王五" };
        for (var key in dic) {
            alert(key + "==" + dic[key]);//zs==张三...
        }
        alert(dic instanceof Array); //false  instanceof 判断dic是否是Array类型
    </script >
</head>
<body>
</body>
</html>

13、Json

1、Json对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

2、数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

3、值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套

View Code

<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        var json = { "zs" : "张三", "li" : "李四" , "ww": "王五" };
        //alert(json.li);//李四
        for (var key in json) {
            //alert(key + "==" + json[key]);//zs==张三...
        }
        var json = { "zs" : { "name": "张三" , "age" : 18, "sex": "男" },
            "ls" : { "name" : "李四", "age" : 19, "sex" : "男" },
            "ww" : {"name" : "王五", "age" :20,"sex" : "男"}
        };
        //alert(json.ww.name);//王五
        //alert(json.ww.age);//20
        //alert(json.ww.sex);//男
        for (var key in json) {
            alert(key + "==" + json[key].name + "," + json[key].age); //zs==张三，18...
        }
       //数组是Value
        var json = {
            "class1" :
                    [{ "name" :"张三" , "age":18},
                    { "name" :"李四" , "age":19},
                    { "name" :"王五" , "age":20 }]
            };
        var cls = json.class1;
        for (var i = 0; i < cls.length; i++) {
            alert(cls[i].name + "==" + cls[i].age);//张三==18
        }
    </script >
</ head>
<body>
</body>
</html>

14、For

for循环可以像C#中的foreach一样用

View Code

<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        function Person(name,age,sex) {
            this .name = name;
            this .age = age;
            this .sex = sex;
            this .sayHi = function () {
                alert( "我是:" +name+ "年龄:" +age);
            }
        }
        var p1 = new Person( "lz", 18, "男" );
        for (var key in p1) {
            alert(key); //name  age sex sayHi
        }
        //for (var key in document) {
            //document.write(key + "<br />" + document[key] + "<br><br>");
        //}
    </script >
</ head>
<body>
</body>
</html>

15.扩展方法

扩展方法的声明要在使用扩展方法之前执行。

View Code

<html>
<head>
    <title ></ title>
    <script type="text/javascript">
        //扩展方法 类似C#中的扩展方法
        String.prototype.quot = function (str) {
            //如果参数为空，给它一个默认值 默认添加双引号
            if (!str) {
                str = "\"" ;
            }
            return str + this + str;
        }
        var s = "abc" ;
        //alert(s.quot("/")); // /abc/
        alert(s.quot()); // "abc"
    </script >
</head>
<body>
</body>
</html>