js 中for循環那些事

lavnFan 發布于2019-08-23 17:17 / 3261人閱讀

語法

for ([initialization]; [condition]; [final-expression]) {
    statement
}

initialization
一個表達式 (包含賦值語句) 或者變量聲明。典型地被用于初始化一個計數器。該表達式可以使用var或let關鍵字聲明新的變量，使用var聲明的變量不是該循環的局部變量，而是與for循環處在同樣的作用域中。用let聲明的變量是語句的局部變量。該表達式的結果無意義。注意此處的let 和 var 聲明表達式的不同點

condition
一個條件表達式被用于確定每一次循環是否能被執行。如果該表達式的結果為true， statement 將被執行。 這個表達式是可選的。如果被忽略，那么就被認為永遠為真。如果計算結果為假，那么執行流程將被跳到for語句結構后面的第一條語句。
final-expression
每次循環的最后都要執行的表達式。執行時機是在下一次condition的計算之前。通常被用于更新或者遞增計數器變量。
statement
只要condition的結果為true就會被執行的語句。要在循環體內執行多條語句，使用一個塊語句（{ ... }）來包含要執行的語句。沒有任何語句要執行，使用一個空語句（;）。可以使用break 主動跳出循環

注意點：

初始化中使用var聲明的變量不是該循環的局部變量，而是與for循環處在同樣的作用域中,使用let聲明的則在局部變量中

初始化塊中的表達式都是可以省略的，如果省略則需要在語句塊中設置跳出條件，避免進入死循環

在for循環內部使用異步函數、閉包等時的問題：

setTimeOut等異步函數時:

var arr = [1,3,5,7,9];
for (var i = 0; i < arr.length-1; i++) {
    setTimeout(function() {
        console.log("循環的值："+i);
        console.log("數組對應的值："+arr[i]);
    }, 1000);
}

存在閉包時：

function box() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = function () {
            return i;                            //由于這個閉包的關系，他是循環完畢之后才返回，最終結果是4++是5
        }                                        //這個匿名函數里面根本沒有i這個變量，所以匿名函數會從父級函數中去找i，
    }                                            //當找到這個i的時候，for循環已經循環完畢了，所以最終會返回5
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())

這時，會產生與我們預期所想得到的效果不同的結果，導致出現這種情況的原因主要是 for語句表達式中初始化中的變量不是該循環的局部變量（子作用域），而是與for循環處在同樣的作用域中（父作用域）。
因此，解決方案比較流行的有兩種：
第一種：使用let 替代 var 聲明for循環的表達式（推薦）

function box() {
    var arr = [];
    for (let i = 0; i < 5; i++) {
        arr[i] = function () {
            return i;                           
        }                                       
    }                                            
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())

var arr = [1,3,5,7,9];
for (let i = 0; i < arr.length-1; i++) {
    setTimeout(function() {
        console.log("循環的值："+i);
        console.log("數組對應的值："+arr[i]);
    }, 1000);
}

第二種：使用自執行函數利用閉包特性來達到效果：

var arr = [1, 3, 5, 7, 9];
for (var i = 0; i < arr.length ; i++) {
    (j=>{
        setTimeout(() =>{
            console.log("循環的值：" + j);
            console.log("數組對應的值：" + arr[j]);
        }, 1000);
    })(i)
}

function box() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        ((j)=>{
            arr[j] = ()=> j;
        })(i);
    }                                            
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())
console.log(boxArr[1]())

GPU云服務器云服務器 js for循環回調 js for循環可以 js for循環語法 js for循環元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104108.html

jS:關于對象遍歷和數組遍歷的那些事

摘要：如圖遍歷數組遍歷數組元素并以某種方式處理每個元素是一個常見的操作。如圖不過，里的功能比較強大，可以遍歷而且返回值是的則被省略掉總結遍歷對象，遍歷出來的是鍵名，而不是鍵值，參數必須是對象。可能是由于職業的關系，下班之后完全不想Open PC，但很多知識點有必要自己做個小小總結。本人之前對原生Array和Object完全沒概念。遍歷對象的方法： Object.keys(Object)...

qingshanli1988 2019-08-20 18:16 評論0 收藏0
JS異步那些事一（基礎知識）

摘要：異步那些事一基礎知識異步那些事二分布式事件異步那些事三異步那些事四異步那些事五異步腳本加載事件概念異步回調首先了講講中兩個方法和定義和用法方法用于在指定的毫秒數后調用函數或計算表達式。功能在事件循環的下一次循環中調用回調函數。 JS異步那些事一（基礎知識）JS異步那些事二（分布式事件）JS異步那些事三（Promise）JS異步那些事四（HTML 5 Web Workers...

李濤 2019-08-21 13:49 評論0 收藏0
ES6中的Iterator和for...of循環那些事

摘要：一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。阮大神案例上面代碼是一個類部署接口的寫法。屬性對應一個函數，執行后返回當前對象的遍歷器對象。最近看阮一峰阮大神的ES6，剛剛看到Iterator和for...of循環這一章，小作筆記跟大家略微分享一下，不足之處還望大家多多指正 Iterator（遍歷器）就是一種機制；任何數據結構只要是...

OpenDigg 2019-08-21 10:44 評論0 收藏0
JavaScript面向對象那些事

摘要：委托上面的代碼結合了構造函數和原型兩種方式去創建對象，首先聊聊構造函數構造函數構造函數本質上還是函數，只不過為了區分將其首字母大寫了而已。注意注釋掉的代碼是自動執行的，但這并不是構造函數獨有的，每個函數在聲明時都會自動生成。首先看看下面兩個1+1=2的問題: 問題一：為什么改變length的值，數組的內容會變化？ var arr = [1]; arr.length = 3; aler...

王偉廷 2019-08-20 18:07 評論0 收藏0
JavaScript單線程事件循環(Event Loop)那些事

摘要：概述本篇主要介紹的運行機制單線程事件循環結論先在中利用運行至完成和非阻塞完成單線程下異步任務的處理就是先處理主模塊主線程上的同步任務再處理異步任務異步任務使用事件循環機制完成調度涉及的內容有單線程事件循環同步執行異步執行定時器的事件循環開始 1.概述本篇主要介紹JavaScript的運行機制:單線程事件循環(Event Loop). 結論先: 在JavaScript中, 利用運行至...

Shisui 2019-08-20 16:50 評論0 收藏0