JavaScript基礎視頻教程總結（041-050章）

時間 2019-12-09

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>041-050章總結</title>
</head>
<body>
    
<pre> 041. 嵌套的for循環 </pre>
<script type="text/javascript">
    console.log("第041");
    //這個for循環執行幾回，圖形的高度就是多少
    for (var i=0;i<5;i++) {
        // 在循環的內部再建立一個循環，用來控制圖形的寬度
        for (var j=0;j<5-i;j++) {
            document.write("* ")
        }
        document.write("<br>")
    }
</script>

<pre> 042. 練習 </pre>
<script type="text/javascript">
    console.log("第042");
    /*
     * 1.打印99乘法表
     *   1*1=1
     *   1*2=2 2*2=4
     *   1*3=3 2*3=6 3*3=9
     *   1*4=4 2*4=8 3*4=12 4*4=16  
     *                      ....9*9=81
     */
    for (var i=1;i<=9;i++) {
        for (var j=1;j<=i;j++) {
            document.write( j +"*"+ i + "= " + i*j +" ,");
        }
        document.write("<br>")
    }
</script>

<pre> 043. for循環練習 </pre>
<script type="text/javascript">
    console.log("第043");
    // 打印出1-100之間全部的質數
    for (var i=2;i<=100;i++) {
        //建立一個布爾值，用來保存結果，默認i是質數
        var flag=true;
        //判斷i是不是質數
        //獲取到2-i之間的全部的數
        for (var j=2;j<i;j++) {
            if( i%j==0 ){
                flag =false;
                break;
            }
        }
        //若是是質數，則打印i的值
        if(flag){
            console.log(i);
        }
    }
</script>

<pre> 044. break和continue </pre>
<script type="text/javascript">
    console.log("第044");
    /*
     * break關鍵字能夠用來退出switch或循環語句。
     * 不能在if語句中使用break和continue,循環內的if內可使用。
     * break關鍵字，會當即終止離他最近的那個循環語句。
     */
    for(var i=0 ; i<5 ; i++){
        if(i == 2){
            break;
        }
        console.log(i); //0 1
    }
    for(var i=0 ; i<5 ; i++){
        console.log("@外層循環"+i)
        for(var j=0 ; j<5; j++){
            break;
            console.log("內層循環:"+j);
        }
    }
    /*
     * 能夠爲循環語句建立一個label，來標識當前的循環
     * label:循環語句
     * 使用break語句時，能夠在break後跟着一個label，
     *  這樣break將會結束指定的循環，而不是最近的
     */
    outer1:
    for(var i=0 ; i<5 ; i++){
        console.log("@外層循環"+i);
        inner1:
        for(var j=0 ; j<5; j++){
            break outer1; // 外層循環終止了，內側也終止。
            console.log("內層循環:"+j);
        }
    }
    /*
     * continue關鍵字能夠用來跳過當次循環
     *  一樣continue也是默認只會對離他最近的循環循環起做用
     */
    /*for(var i=0 ; i<5 ; i++){
        if(i==2){
            continue;
        }
        console.log(i);
    }*/
    outer2:
    for(var i=0 ; i<5 ; i++){
        //console.log("@--->"+i);
        for(var j=0 ; j<5 ; j++){
            if(j==3){
                continue outer2;
            }
            //continue outer2;
            console.log("-->"+j);
        }
        console.log("@--->"+i);
    }
</script>

<pre> 045. 質數練習的改進 </pre>
<script type="text/javascript">
    console.log("第045");
    //測試以下的程序的性能
    //在程序執行前，開啓計時器
    //console.time("計時器的名字")能夠用來開啓一個計時器
    //它須要一個字符串做爲參數，這個字符串將會做爲計時器的標識
    console.time("test");
    for ( var i=2; i<=10000; i++ ) {
        //console.log(zhi);
        var flag = true;
        for ( var j=2; j<Math.sqrt(i); j++ ) {  // 能夠經過Math.sqrt()對一個數進行開方11.4ms
            if( i%j==0 ){
                // 若是進入判斷則證實i不是質數,修改flag值爲false
                flag = false;
                // 一旦進入判斷，則證實i不多是質數了，此時循環再執行已經沒有任何意義了,使用break來結束循環
                break;// 不加221ms,加上break爲24ms
            }
        }
        if(flag){
            //console.log(i);
        }
    }
    //終止計時器
    //console.timeEnd()用來中止一個計時器，須要一個計時器的名字做爲參數
    console.timeEnd("test");
</script>

<pre> 046. 對象的簡介
若是使用基本數據類型的數據，咱們所建立的變量都是獨立，不能成爲一個總體。
對象屬於一種複合的數據類型，在對象中能夠保存多個不一樣數據類型的屬性。
對象的分類：
1.內建對象
- 由ES標準中定義的對象，在任何的ES的實現中均可以使用
- 好比：Math String Number Boolean Function Object....
2.宿主對象
- 由JS的運行環境提供的對象，目前來說主要指由瀏覽器提供的對象
- 好比 BOM DOM
3.自定義對象
    - 由開發人員本身建立的對象
</pre>
<script type="text/javascript">
    console.log("第046");
    //建立對象
    /*
     * 使用new關鍵字調用的函數，是構造函數constructor
     * 構造函數是專門用來建立對象的函數
     * 使用typeof檢查一個對象時，會返回object
     */
    var obj1 = new Object();
    console.log(obj1)
    console.log(Object)
</script>

<pre> 047. 對象的基本操做 </pre>
<script type="text/javascript">
    console.log("第047");
    //在對象中保存的值稱爲屬性
    // 向對象添加屬性 語法：對象.屬性名 = 屬性值;
    var obj2 = new Object()
    obj2.name = "孫悟空";
    obj2.gender = "男";
    obj2.age = 18;
    //讀取對象中的屬性 語法：對象.屬性名
    //若是讀取對象中沒有的屬性，不會報錯而是會返回undefined
    console.log(obj2.gender);
    console.log(obj2.hello); //undefined
    //修改對象的屬性值語法：對象.屬性名 = 新值
    obj2.name = "tom";
    // 刪除對象的屬性 語法：delete 對象.屬性名
    delete obj2.name;
    console.log(obj2.name);
    console.log(obj2.age);
</script>

<pre> 048. 屬性名和屬性值 </pre>
<script type="text/javascript">
    console.log("第048");
    var obj3 = new Object();
    /*
     * 屬性名：
     *  - 對象的屬性名不強制要求遵照標識符的規範,什麼亂七八糟的名字均可以使用
     *  - 可是咱們使用是仍是儘可能按照標識符的規範去作
     */
    obj3.name = "孫悟空";
    obj3.var = "var";
    console.log(obj3.var)
    /*
     * 若是要使用特殊的屬性名，不能採用.的方式來操做
     *  須要使用另外一種方式：語法：對象["屬性名"] = 屬性值
     *  讀取時也須要採用這種方式
     * 使用[]這種形式去操做屬性，更加的靈活，
     * 在[]中能夠直接傳遞一個變量，這樣變量值是多少就會讀取那個屬性
     */
    obj3["123"] = 789;
    obj3["nihao"] = "你好";
    var n = "nihao";
    console.log(obj3[n]);
    //屬性值 JS對象的屬性值，能夠是任意的數據類型 甚至也能夠是一個對象
    obj3.test = true;
    obj3.test = null;
    obj3.test = undefined;
    //建立一個對象
    var obj4 = new Object();
    obj4.name = "豬八戒";
    //將obj4設置爲obj3的屬性
    obj3.test = obj4;
    console.log(obj3.test.name);
    console.log(obj3);
    /*
     * in 運算符
     *  - 經過該運算符能夠檢查一個對象中是否含有指定的屬性 若是有則返回true，沒有則返回false
     *  - 語法："屬性名" in 對象
     */
    console.log(obj3.test2); // undefined
    //檢查obj3中是否含有test2屬性
    console.log("test2" in obj3);
    console.log("test" in obj3);
    console.log("name" in obj4);
</script>

<pre> 049. 基本數據類型和引用數據類型
基本數據類型
String Number Boolean Null Undefined
引用數據類型
Object
JS中的變量都是保存到棧內存中的，
基本數據類型的值直接在棧內存中存儲，
值與值之間是獨立存在，修改一個變量不會影響其餘的變量
對象是保存到堆內存中的，每建立一個新的對象，就會在堆內存中開闢出一個新的空間，
而變量保存的是對象的內存地址（對象的引用），若是兩個變量保存的是同一個對象引用，
當一個經過一個變量修改屬性時，另外一個也會受到影響.
</pre>
<script type="text/javascript">
    console.log("第049");
    var a = 123;
    var b = a;
    a++;
    console.log("a = "+a); //124
    console.log("b = "+b); //123
    var obj5 = new Object();
    obj5.name = "孫悟空";
    var obj6 = obj5;
    //修改obj的name屬性
    obj5.name = "豬八戒";
    console.log(obj5.name); // 豬八戒
    console.log(obj6.name); // 豬八戒
    //設置obj6爲null
    obj6 = null;
    console.log(obj5);
    console.log(obj6);
    var c = 10;
    var d = 10;
    //console.log(c == d);
    var obj7 = new Object();
    var obj8 = new Object();
    obj7.name = "沙和尚";
    obj8.name = "沙和尚";
    console.log(obj7);
    console.log(obj8);
    /*
     * 當比較兩個基本數據類型的值時，就是比較值。
     * 而比較兩個引用數據類型時，它是比較的對象的內存地址，
     * 若是兩個對象是一摸同樣的，可是地址不一樣，它也會返回false
     */
    console.log(obj7 == obj8); //false
</script>

<pre> 050. 對象字面量
使用對象字面量，能夠在建立對象時，直接指定對象中的屬性
語法：{屬性名:屬性值,屬性名:屬性值....}
對象字面量的屬性名能夠加引號也能夠不加，建議不加,
若是要使用一些特殊的名字，則必須加引號
屬性名和屬性值是一組一組的名值對結構，
名和值之間使用:鏈接，多個名值對之間使用,隔開
若是一個屬性以後沒有其餘的屬性了，就不要寫.
</pre>
<script type="text/javascript">
    console.log("第050");
    // 使用對象字面量來建立一個對象
    var obj9 = {};
    obj9.name = "孫悟空";
    var obj10 = {
        name:"豬八戒",
        age:13,
        gender:"男",
        test:{name:"沙僧"},
        conprint: function(){
            console.log(this.age)
            }
    };
    console.log(obj10.test);
    console.log(obj10.conprint());
</script>

</body>
</html>