Xiaoqiang の HTML5 モバイル開発ロード (28) - JavaScript レビュー 3-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Xiaoqiang の HTML5 モバイル開発ロード (28) - JavaScript レビュー 3

黄舟

Feb 04, 2017 pm 02:20 PM

1. 基本的なデータ型

number: 数値型

string: 文字列 (s は小文字であることに注意してください: string が基本型です)

boolean: ブール型 //最初の 3 つは対応するパッケージングクラスを持っています

null: 空の型

未定義: 未定義の型

テスト1:

<html>  
    <!--基本类型测试-->  
    <head>  
        <script>  
            function f1(){   //number类型  
        /*有返回值时也不能function void f1(){}*/  
                alert(&#39;hello&#39;);  
    /*alert(); 弹出消息框*/  
                alert(&#39;hehe&#39;);  
                var i=100;  
    //js当中字符串可用单引号也可用双引号  
                i=&#39;hello&#39;;  
        //typeof是一个运算符，可以返回变量实际存放的数据的类型  
                alert(typeof i);  
    /*js是弱类型语言 不能： number i=100; 不能在声明时指明其类型，在运行时才能确定*/  
            }  
            function f2(){   //string类型  
                var str1=&#39;hello&#39;;  
                var str2=&#39;hello&#39;;  
                if(str1==str2){  
                    alert("str1==str2");  
                }else{  
                    alert("str1!=str2");  
                }  
                var str3=&#39;100&#39;;  
                var i=100;  
                if(str3==i){ //两个＝号，进行类型转换  
                    alert("str3==i");  
                }else{  
                    alert("str3!=i");  
                }  
                if(str3===i){ //三个=号，不进行类型转换  
                    alert("str3==i");  
                }else{  
                    alert("str3!=i");  
                }  
            }  
            function f3(){  //boolean类型  
                //布尔类型只有两个值：true/false;  
                var flag=true;  
                alert(typeof flag);  
              //var str="abc";  
                var str=new Object();//创建一个对象,对象会转换为true;  
                var str=null; //转换为false;  
                var str;  //undefined 转换为false;  
                //强制转换，非空的字符串转换为true,非零的数字转换为true;  
                if(str){  
                    alert(&#39;结果为真&#39;);  
                }else{  
                    alert(&#39;结果为假&#39;);  
                }  
            }  
            function f4(){  //null类型  
                var obj=null;  
            //null类型只有一个值——null;  
            //输出的结果是Object  
                alert(typeof obj);  
            }  
            function f5(){ //undefined类型  
                var obj;  
                alert(typeof obj);  
            }  
        </script>   
    </head>  
    <body style="font-size:30px;">  
        <input type="button" value="演示基本类型的使用"  
        onclick="f1();"/>  
    </body>  
</html>

ログイン後にコピー

テスト2: parseInt

<html><span style="white-space:pre">  </span>  
    <head>  
        <script>  
        /*number--->string  
          string---->number  
        */  
            function f1(){  //字符串变数字  
        //      var str1=&#39;fsfs&#39;;     读出NaN  
        //              var str1="1234fsfs";  可以读出1234  
        //              var str1="fsfs1234";   不可以读出  
        //              var str1="22323.08";  
                var str1=&#39;1234&#39;;  
        //window.parseInt();  window可以省略  
                var n1=parseInt(str1);  
//js浮点运算会有误差，先放大x倍，再缩小x倍  
        //      var n2=parseFloat(str1);  
        //undefined + 数字 ＝ NaN  
                alert(n1+100);  
            }  
            function f2(){  
                var n1=100;  
        //number--->Number(对应的包装类型)  再调用toString();  
                var s1=n1.toString();  
            //      var s1=n1+&#39;&#39;;  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="演示基本数据类型" onclick="f1();"/>  
    </body>  
</html>

ログイン後にコピー

テスト3: stringメソッド

length属性: 文字列の長さを返す

charAt(index): 文字を返す指定された位置で

substring(from,to): 部分文字列を返します

indexOf(str): 元の文字列内の文字列の位置を返します

lastIndexOf(str):

match(regexp): 通常の文字列を返します式式の配列

Interception

function f4(){ //string的方法  
    var str1="abcdef";  
    var str2=str1.substring(1,4);  
    alert(str2);  
}

ログイン後にコピー

Regular

function f5(){  
    var str="asdfas12323adfasf23423";  
  //在js中用/reg/,在执行时，会将//内的内容转换成一个RegExp对象  
    var reg=/[0-9]+/g;    
  //reg中是一个对象，不是字符串,注意加一个g搜索整个字符串，还有i忽略大小写。  
    var arr=str.match(reg);  
    alert(arr);  
}

ログイン後にコピー

Find

function f6(){  
    var str1="sdf1223asdfasf23423";  
    var reg=/[0-9]+/;  
    //alert(typeof reg);  
    alert(reg instanceof RegExp);  
    var index = str1.search(reg);  
    alert(index);  
}

ログイン後にコピー

Replace

function f7(){  
    var str1="sdf444asdfadf4423";  
    var reg=/[0-9]+/g;  
    var str2 = str1.replace(reg,&#39;888&#39;);  
    alert(str2);  
}

ログイン後にコピー

2. オブジェクト型(配列、関数、その他は次の記事で)

1. Array

js配列可変長

jsの配列要素は任意(異なる種類のデータを混在して格納可能)

<html>  
    <head>  
        <script>  
            function f1(){  //创建数组的第一种方式  
                var arr=new Array();  //()可以省略不写  
                arr[0]=1;  
                arr[3]=2;  
                arr[5]=&#39;abc&#39;;  
                alert(arr.length);  
                alert(arr[1]);  
                alert(arr[3]);        
            }  
            function f2(){ //第二种方式  
                var arr=[];  
                arr[0]=1;  
                arr[3]=22;  
                var arr=[1,2,3,4,5,6];  
                arr[7]=11;  
                alert(arr.length);  
            }  
            function f3(){ //多维数组的创建  
                var arr = new Array();  
                arr[0]=[1,2,3,4,5];  
                arr[1]=[6,7,8,9,10,11,12,13];  
                arr[2]=[14,15,16,17,18,19];  
                for(var i=0;i<arr.length;i++){  
                    for(j=0;j<arr[i].length;j++){  
                        alert(arr[i][j]);  
                    }  
                }  
            }  
            function f4(){ //数组常用的属性和方法  
                var arr=[11,22,33,44];  
                arr.length=2;  //数组的长度可以写,后面的被砍掉  
                alert(arr);  
                alert(typeof abc);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="数组的使用" onclick="f4()"/>  
    </body>  
</html>

ログイン後にコピー

配列内の一部の関数

<html>  
    <head>  
        <script>  
            function f1(){  
                var a1 = [1, 2, 3];  
                var str = a1.join(|);  
                alert(str);  
            }  
            function f2(){  
                var a1 = [1, 2, 3];  
                 var a2 = [4, 5, 6];  
                 var a3 = a1.concat(a2); //数组连接  
                 alert(a3);  
            }  
            function f4(){  
                var a1 = [1, 2, 3];  
                var a2 = a1.reverse(); //是对原有数组翻转  
                alert(a2);  
                alert(a1);  //原数组变了  
            }  
            function f5(){  
                var a1 = [1, 2, 3, 4, 5, 6];  
                var a2 = a1.slice(2,4); //对数组截取  
                alert(a2);  
                alert(a1); //原数组没有变化  
            }  
            function f6(){  
                var a1 = [5, 1, 7, 2, 8];  
                var a2 = a1.sort(); //从小到大  
                alert(a2);  
            }  
            function f7(){  
                var a1 = [15, 111, 7, 22, 88];  
                var a2 = a1.sort(); //默认按照字典顺序排序  
                alert(a2);   
            }  
            function f8(){  
                var a1 = [15, 111, 7, 22, 88];  
                var a2 = a1.sort(function(t1, t2){  
                    return t2-t1;  
                });   
                alert(a2);   
            }  
            function f9(){  //按照字符串长度排序  
                var a1 = [&#39;abc&#39;, &#39;bb&#39;, &#39;casd&#39;, &#39;a&#39;];  
                var a2 = a1.sort(function(t3, t4){  
                    return t4.length-t3.length;  
                });   
                alert(a2);   
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="f9()"/>  
    </body>  
</html>

ログイン後にコピー

2. 関数

関数を定義する

関数関数名(パラメータ){

関数本体

}

注意すべきいくつかの問題

a. 戻り値の型宣言はできませんが、戻り値は存在できます。

b. 関数の本質はオブジェクト、つまり Function 型のインスタンスです。関数名はこのオブジェクトのアドレスを格納する変数です (関数名は変数です)。引数オブジェクトを使用してパラメータにアクセスできます

d. 関数はオーバーロードできません

<html>  
    <!--函数的使用-->  
    <head>  
        <script>  
            function add(a1, a2){  
                return a1+a2;  
            }  
            function test(){  
                var sum = add(1, 1);  
                alert(sum);  
            }  
            function test2(){  
            //  alert(typeof add);  
                alert(add instanceof Function);  //函数是Function类型的实例  
                var f2 = add;           //存放的是对象的地址  
                add = null;              //add指向空  
                var sum = f2(1, 1);         //等价于 add(1, 1);  
                alert(sum);  
            }  
            function add2(arg1, arg2){  
                //return  arg1 + arg2;  
                return arguments[0]+arguments[1];  
            }  
            function add3(arg1, arg2){  //首先指向一个对象  
                return arg1+arg2+100;  
            }  
            function add3(){    //指向了另一个对象  
                return arguments[0]+arguments[1];  
            }  
            function test3(){  
                //var sum = add2(1);         //结果为NaN,因为arg2是undifined  
                //var sum(1, 1, 1);    //结果为2  
                //var sum=add(1, 1);  
                //var sum = add2(1, 1, 1);  
                var sum = add3(1, 1);  
                alert(sum);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="test3()"/>  
    </body>  
</html>

ログイン後にコピー

他のオブジェクトタイプについては、次の記事を参照してください

以上がXiaoqiangのHTML5モバイル開発(28) - JavaScriptレビュー3の内容です。関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。