javascript第六天----for循環

js是什麼

語法本身---變量---數據類型--控制結構
DOM ---文檔對象---查找元素---添加內容---修改標籤屬性---自定義屬性
BOM alert
前端主要是對文檔的增刪改查

僞元素的獲取

:: first-letter 特殊樣式添加到首字母
::first-line 特殊樣式加到首行 :: before 在元素之前插入：：after 在元素之後插入
僞元素是css渲染的並不存在與我們的document當中！無法獲取

getComputedStyle() 括號裏傳入 1對象 2 僞類然後獲取樣式採用ge't getComputedStyle(1,2)[attr] 樣的方式沒有僞類寫null 或者不寫

<body>
    <div id="box" class="mybox">123</div>
</body>
<script>
    var oBox = document.getElementById("box");
    var af = getComputedStyle(oBox,"::after" )["content"];
    console.log(af);

</script>

for 循環

for(①；②；④；){③；}
①：定義語句
②：判斷語句
③：執行體
④：變化語句

for(var i = 0;i<10;i++){
        console.log(i);
    }

結果是打印出0~9 就相當於console.log(0); console.log(2); console.log(3); console.log(4);
**for循環的執行順序：1--2--3--4--2--3--4直到i=10 然後就不進入循環體

<body>
  <button id="btn">點擊生成div</button>
  <div id="box"></div>
</body>
<script>
  var btn = document.getElementById("btn");
  var box = document.getElementById("box");
  var str = "";
  btn.onclick = function () {
      for (var i = 0;i<10;i++){

          str += "<div></div>"
      }
      box.innerHTML = str;
  }
</script>

遍歷數組

<ul id="box">
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>
<script>
    var oli = document.getElementsByTagName("li");
    for (var i = 0; i<4; i++){
       oli[i].onclick = function () {
           alert("kun");
       }
    }
    for (var i = 0; i<4; i++){
       oli[i].onclick = function () {
           alert(i);//打印結果是4，並不是1234
       }
    }
</script>

函數在沒執行的時候是一個代碼塊，for循環只是註冊事件，註冊函數並沒有執行

如果想要每次彈出來對應是1234，那麼就使用自定義屬性把i放在點擊函數外邊存起來，注意點擊函數內部要用this

<script>
    var oli = document.getElementsByTagName("li");
    for (var i = 0; i<4; i++){
       oli[i].index = i;
       oli[i].onclick = function () {
           alert(this.index);
           console.log(this.index);
       }
    }
</script>

this 是誰調用這個函數 this就是誰

遍歷字符串

在js當中數據類型是可以相互轉換的

<script>
    var str = "我愛北京天安門";
    console.log(str.length);
     for(var i = 0;i<str.length;i++){
        console.log(str[i]);
    }
</script>

結果是7

break 和 continue

終止循環

<script>
  for(var i=0;i<100;i++){
      console.log(i);
      if(i==25){
         console.log("nihao");
          break;
      }
      console.log(i);
  }
</script>

注意break 寫在if裏面，從25開始包括25就不打印了

跳過某一個循環

<script>
   for(var i=0;i<100;i++){
       if(i==25){
           console.log("nihao");
           continue

       }
       console.log(i);
   }
</script>

結果25不打印，其餘打印

for 循環

<script>
    for(var i=0;i<5;i++){
        for (var j=0;j<6;j++){
            console.log(1);
        }
    }
</script>

結果循環了30次

for(var i=0;i<6;i++){
        for (var i=0;i<4;j++){
            console.log(1);
            consolo.label("裏層");
        }
        console.log("外層");
    }

死循環，裏層出來i爲4，但是經過外層i++,i變爲5，滿足條件，進裏層循環，但是，裏層i又被賦值爲0，所以爲死循環

for(var i=0;i<2;i++){
        for (var j=0;j<3;j++){
            if(j===2){
                break;//只是終止內層循環
            }
            console.log(`裏層第${j}次`);
        }
        console.log(`外層${i}`);
    }

內層執行了兩次，外層執行2次

label 標籤給我們的for循環打個標記便於終止和跳出

<script>
    out:
    for(var i=0;i<2;i++){
        for (var j=0;j<3;j++){
            if(j===2){
                break out;//只是終止內層循環
            }
            console.log(`裏層第${j}次`);
        }
        console.log(`外層${i}`);
    }

</script>

在內部終止後，外層也終止，下面的console.log沒有結果 out可以看作一個變量，但是不能用 var 會報錯，也遵守變量命名規則，就是可以隨意命名

<script>
    out:
    for(var i=0;i<2;i++){
        wangwu: for (var j=0;j<3;j++){
            if(j===2){
                continue out;//只是終止內層循環
            }
            console.log(`裏層第${j}次`);
        }
        console.log(`外層${i}`);
    }

</script>

跳出外層循環，內層循環兩次，外層循環兩次，但是最後的console.log沒有打印

++ --運算

<script>
  var a = 1;
   var num = a++;
   console.log(num);
   console.log(a);
</script>

第一個結果是1，第二個2 a++

如果我們取返回值取到的是沒有+1之前的值先賦值後運算
如果運算結束 a發生了變化 ++a
如果我們取返回值的話取到的是 +1之後的值先運算後賦值

a--
--a

for循環的性能

for 循環的性能
console.time()
console.timeEnd()系統會打印出大概的代碼執行時間，上下括號裏面的名字可以隨便取，但是要對應一樣

<body>
  <button id="btn">增加</button>
  <div id="box">
  </div>
</body>
<script>
 var oBtn = document.getElementById("btn");
 var oBox = document.getElementById('box');
 oBtn.onclick = function () {
     console.time("tag");
     var str = '';
     for (var i = 0;i<10;i++){
         str += "<div></div>";
     }
     oBox.innerHTML += str;
     console.timeEnd("tag");
 }
</script>

這個把str的十次增加存起來放到inner HTML的一次獲取，性能比下面的好，隨着代碼量的越來越多 inner HTML也越來越多越來越慢。重新渲染了一次

<script>
 var oBtn = document.getElementById("btn");
 var oBox = document.getElementById('box');
 oBtn.onclick = function () {
     console.time("tag");
     // var str = '';
     for (var i = 0;i<10;i++){
         oBox.innerHTML += "<div></div>";
     }
     // oBox.innerHTML += str;
     console.timeEnd("tag");
 }
</script>

越來越慢，每次循環，都要取出我們的innerhtml，隨着代碼量的越來越多 inner HTML也越來越多越來越慢。我們再寫代碼的時候，儘量減少innerhtml的獲取重新渲染了十次

頁面的reflow(迴流/重構)

儘量減少迴流當我們再頁面上增加元素改變元素寬高放大縮小我們的窗口，改變標籤的屬性<div></div> 此時頁面會重新渲染！

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
</body>
<script>
  var oli = document.getElementsByTagName("li");
  for (var i =0;i<oli.length;i++){
      oli[i].style.backgroundColor = "#f66";
  }
</script>

每次執行循環都會再代碼中尋找oli.length屬性

for (var i =0,len=oli.length;i<len;i++){
      oli[i].style.backgroundColor = "#f66";
  }

這樣提高性能

for (var i =0;olis[i++];){
      oli[i].style.backgroundColor = "#f66";
  }

i=0,執行i++,取出來的值是0，進入循環體，i是1，所以0號元素不會有顏色變化

var arr =[1,2,3];
  console.log(arr[4]);//結果是undefined 在判斷語句中 相當於false

for (var i =-1;olis[++i];){
      oli[i].style.backgroundColor = "#f66";
  }

這樣就可以，性能最優但是有缺點如果 var arr =[1,2,3]; 這樣提前結束，數組中沒有這六個爺爺纔可以使用

儘量先取到length，然後循環。

for循環也可以這樣寫
var i=0;
for(;i<5;){
    console.log(1);
    i++;
}

文檔流

document.write 將內容寫入body的最下邊，document.write只會寫入一個打開的文檔流中，追加到body後邊

<body>
  <div>123</div>
</body>
<script>
  document.write("nihao");
</script>

如果想在關閉的文檔流中追加，那麼

<body>
  <div>123</div>
</body>
<script>
  window.onload = function(){
      document.write("nihao");
  }
</script>

當window的資源加載完畢之後，我們認爲文檔流關閉此時 write會重新打開文檔流覆蓋原有內容，上面中出現nihao,document.write()裏面可以任意寫包括標籤，如果要在裏面寫jsdocument.write("<script>alert(1);<\/script>");需要用到轉義\

<body>
  <div>123</div>
</body>
<script>
  document.onclick = function () {
      document.write("<script>alert(1);<\/script>");
  }
</script>

出現123，當點擊之後出現彈窗，確定後，123消失。此時只是一個註冊事件，不影響文檔的加載，代碼讀取完畢之後，註冊的事件還在

javascript第六天----for循環

僞元素的獲取

getComputedStyle() 括號裏傳入 1對象 2 僞類然後獲取樣式採用ge't getComputedStyle(1,2)[attr] 樣的方式沒有僞類寫null 或者不寫

for 循環

遍歷數組

函數在沒執行的時候是一個代碼塊，for循環只是註冊事件，註冊函數並沒有執行

如果想要每次彈出來對應是1234，那麼就使用自定義屬性把i放在點擊函數外邊存起來，注意點擊函數內部要用this

遍歷字符串

break 和 continue

for 循環

label 標籤給我們的for循環打個標記便於終止和跳出

++ --運算

for循環的性能

頁面的reflow(迴流/重構)

文檔流

javascript--39--拓展

javascript第三天---標籤內的屬性和數組

javascript 第七天---運算符

javascript--13---閉包

javascript--第五天---獲取對象的其他方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

javascript第六天----for循環

僞元素的獲取

getComputedStyle() 括號裏傳入 1對象 2 僞類 然後獲取樣式採用ge't getComputedStyle(1,2)[attr] 樣的方式 沒有僞類 寫null 或者不寫

for 循環

遍歷數組

函數在沒執行的時候是一個代碼塊，for循環只是註冊事件，註冊函數並沒有執行

如果想要每次彈出來對應是1234，那麼就使用自定義屬性把i放在點擊函數外邊存起來，注意點擊函數內部要用this

遍歷字符串

break 和 continue

for 循環

label 標籤 給我們的for循環打個標記 便於終止和跳出

++ --運算

for循環的性能

頁面的reflow(迴流/重構)

文檔流

getComputedStyle() 括號裏傳入 1對象 2 僞類然後獲取樣式採用ge't getComputedStyle(1,2)[attr] 樣的方式沒有僞類寫null 或者不寫

label 標籤給我們的for循環打個標記便於終止和跳出