JavaScript 各種遍歷方式詳解
為了方便例子講解,現有陣列和json物件如下
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
aaa: 'Javascript',
bbb: 'Gulp',
ccc: 'CSS3',
ddd: 'Grunt',
eee: 'jQuery',
fff: 'angular'
};
for
可以直接看示例,用得太多了,很簡單
(function() {
for(var i=0, len=demoArr.length; i<len; i++) {
if (i == 2) {
// return; // 函式執行被終止
// break; // 迴圈被終止
continue; // 迴圈被跳過
};
console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
}
})();
關於for迴圈,有一下幾點需要注意
-
for迴圈中的
i
在迴圈結束之後任然存在與作用域中,為了避免影響作用域中的其他變數,使用函式自執行的方式將其隔離起來()()
; -
避免使用
for(var i=0; i<demo1Arr.length; i++){}
var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};
-
跳出迴圈的方式有如下幾種
-
return 函式執行被終止
-
break 迴圈被終止
-
continue 迴圈被跳過
-
for in
for(var item in arr|obj){}
可以用於遍歷陣列和物件
-
遍歷陣列時,item表示索引值, arr表示當前索引值對應的元素 arr[item]
-
遍歷物件時,item表示key值,arr表示key值對應的value值 obj[item]
(function() {
for(var i in demoArr) {
if (i == 2) {
return; // 函式執行被終止
// break; // 迴圈被終止
// continue; // 迴圈被跳過
};
console.log('demoArr['+ i +']:' + demoArr[i]);
}
console.log('-------------');
})();
關於for in,有以下幾點需要注意:
-
在for迴圈與for in迴圈中,
i
值都會在迴圈結束之後保留下來。因此使用函式自執行的方式避免。 -
使用return,break,continue跳出迴圈都與for迴圈一致,不過關於return需要注意,在函式體中,return表示函式執行終止,就算是迴圈外面的程式碼,也不再繼續往下執行。而break僅僅只是終止迴圈,後面的程式碼會繼續執行。
function res() {
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
for(var item in demoArr) {
if (item == 2) {
return;
};
console.log(item, demoArr[item]);
}
console.log('desc', 'function res'); //不會執行
}
forEach
demoArr.forEach(function(arg) {})
引數arg表示陣列每一項的元素,例項如下
demoArr.forEach(function(val, index) {
if (e == 'CSS3') {
return; // 迴圈被跳過
// break; // 報錯
// continue;// 報錯
};
console.log(val, index);
})
具體有以下需要注意的地方
-
回撥函式中有2個引數,分別表示值和索引,這一點與jQuery中的$.each相反
-
forEach無法遍歷物件
-
forEach無法在IE中使用,firefox和chrome實現了該方法
-
forEach無法使用break,continue跳出迴圈,使用return時,效果和在for迴圈中使用continue一致
-
最重要的一點,可以新增第二引數,為一個數組,而且回撥函式中的this會指向這個陣列。而如果沒有第二引數,則this會指向window。
var newArr = [];
demoArr.forEach(function(val, index) {
this.push(val); // 這裡的this指向newArr
}, newArr)
雖然在原生中forEach迴圈的侷限性很多,但是瞭解他的必要性在於,很多第三方庫會擴充套件他的方法,使其能夠應用在很多地方,比如angular的工具方法中,也有forEach方法,其使用與原生的基本沒有差別,只是沒有了侷限性,可以在IE下使用,也可以遍歷物件
var result = [];
angular.forEach(demoArr, function(val, index) {
this.push(val);
}, result);
do/while
函式具體的實現方式如下,不過有一點值得注意的是,當使用continue時,如果你將i++放在了後面,那麼i++的值將一直不會改變,最後陷入死迴圈。因此使用do/while一定要小心謹慎一點。
不建議使用do/while的方式來遍歷陣列
// 直接使用while
(function() {
var i = 0,
len = demoArr.length;
while(i < len) {
if (i == 2) {
// return; // 函式執行被終止
// break; // 迴圈被終止
// continue; // 迴圈將被跳過,因為後邊的程式碼無法執行,i的值沒有改變,因此迴圈會一直卡在這裡,慎用!!
};
console.log('demoArr['+ i +']:' + demoArr[i]);
i ++;
}
console.log('------------------------');
})();
// do while
(function() {
var i = 0,
len = demo3Arr.length;
do {
if (i == 2) {
break; // 迴圈被終止
};
console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
i++;
} while(i<len);
})();
$.each
$.each(demoArr|demoObj, function(e, ele))
可以用來遍歷陣列和物件,其中e表示索引值或者key值,ele表示value值
$.each(demoArr, function(e, ele) {
console.log(e, ele);
})
輸出為
0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
這裡有很多需要注意的地方
-
使用
return
或者return true
為跳過一次迴圈,繼續執行後面的迴圈 -
使用
return false
為終止迴圈的執行,但是並不終止函式執行 -
無法使用break與continue來跳過迴圈
-
迴圈中this值輸出類似如下
console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}
console.log(this == ele);
// true
-
關於上面的this值,遍歷一下
$.each(this, function(e, ele) {
console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3
為什麼length 和 [[PrimitiveValue]]沒有遍歷出來?突然靈光一動,在《javascript高階程式設計》中找到了答案,大概意思就是javascript的內部屬性中,將物件資料屬性中的
Enumerable
設定為了false
// 檢視length的內部屬性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}
$.each 中的
$(this)
與this有所不同,不過遍歷結果卻是一樣,你可以在測試程式碼中打印出來看看
$(selecter).each
專門用來遍歷DOMList
$('.list li').each(function(i, ele) {
console.log(i, ele);
// console.log(this == ele); // true
$(this).html(i);
if ($(this).attr('data-item') == 'do') {
$(this).html('data-item: do');
};
})
-
i: 序列值 ele: 只當前被遍歷的DOM元素
-
this 當前被遍歷的DOM元素,不能呼叫jQuery方法
-
$(this) == $(ele) 當前被遍歷元素的jquery物件,可以呼叫jquery的方法進行dom操作
使用for in 遍歷DOMList
因為domList並非陣列,而是一個物件,只是因為其key值為0,1,2... 而感覺與陣列類似,但是直接遍歷的結果如下
var domList = document.getElementsByClassName('its');
for(var item in domList) {
console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
// ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}
因此我們在使用for in 遍歷domList時,需要將domList轉換為陣列
var res = [].slice.call(domList);
for(var item in res) {}
類似這樣的物件還有函式的屬性arguments物件,當然字串也是可以遍歷的,但是因為字串其他屬性的
enumerable
被設定成了false,因此遍歷出來的結果跟陣列是一樣的,也就不用擔心這個問題了.
小補充
如果你發現有些人寫函式這樣搞,不要驚慌,也不要覺得他高大上鳥不起
+function(ROOT, Struct, undefined) {
...
}(window, function() {
function Person() {}
})
()()
, !function() {}()
+function() {}()
三種函式自執行的方式^_^
相關推薦
JavaScript 各種遍歷方式詳解
為了方便例子講解,現有陣列和json物件如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp'
二叉樹的建立及三種遍歷方式詳解
建立一個如下圖所示的二叉樹 程式如下: #include<stdio.h> #include<stdlib.h> //定義二叉樹 typedef struct _tree_node { char date; struct tree_node
AppCrawler自動化遍歷使用詳解(版本2.1.0 )
穩定 second 而是 assert 重新 app awl 好用 國內 AppCrawle是自動遍歷的app爬蟲工具,最大的特點是靈活性,實現:對整個APP的所有可點擊元素進行遍歷點擊。 優點: 1.支持android和iOS, 支持真機和模擬器 2.可通過配置來設定
演算法學習——Map的四種遍歷方法詳解
參考文獻:Java中如何遍歷Map物件的4種方法 java中的所有map都實現了Map介面,以下方法適用於任何map實現(HashMap, TreeMap, LinkedHashMap, Hashtable, and so on) 方法一 在for-each迴圈中使用entr
AppCrawler自動化遍歷使用詳解(版本2.1.0 )(轉)
AppCrawle是自動遍歷的app爬蟲工具,最大的特點是靈活性,實現:對整個APP的所有可點選元素進行遍歷點選。 優點: 1.支援android和iOS, 支援真機和模擬器 2.可通過配置來設定遍歷的規則(比如設定黑名單和白名單,提高遍歷的覆蓋率)
目錄遍歷漏洞詳解
對於一個安全的Web伺服器來說,對Web內容進行恰當的訪問控制是極為關鍵的。目錄遍歷是Http所存在的一個安全漏洞,它使得攻擊者能夠訪問受限制的目錄,並在Web伺服器的根目錄以外執行命令。 Web伺服器主要提供兩個級別的安全機制: 訪問控制列表——就是我們常說的AC
二叉搜尋樹的插入,刪除,遍歷操作詳解
TreeNode* findNodeInSearchBT(TreeNode*root, int k, TreeNode**pa = nullptr) { //這裡是不需要進行null判斷的,因為後面隱式的判斷了是否為null while (root != nullptr) { if (k >
Map集合遍歷(詳解)
如何初始化一個map: 示例: public class TestMap { public static Map<Integer, Integer> map = new HashMap<Integer, Integer>(); } keySet
各種字元編碼方式詳解及由來(ANSI,UNICODE,UTF-8,GB2312,GBK)
一直對字元的各種編碼方式懵懵懂懂,什麼ANSI、UNICODE、UTF-8、GB2312、GBK、DBCS、UCS……是不是看的很暈,假如您細細的閱讀本文你一定可以清晰的理解他們。Let's go! 很久很久以前,有一群人,他們決定用8個可以開合的電晶體來組合成不同的狀
二叉樹的各種遍歷方式
class TreeNode{ TreeNode root; TreeNode left; TreeNode right; int val; } public class TreeNodeGo{ //深度優先搜尋(先序、中序、後序) public v
一、Linux學習筆記:虛擬機器設定中的各種網路連線方式詳解
說明:我本機安裝的VMWare10,吳老師的視訊教程用的是VirtualBox,配置虛擬機器連線方式是HostOnly。我在本機用VMWare使用HostOnly連線方式未配置成功:虛擬機器能ping通宿主機,但是宿主機ping不同虛擬機器,不知原因何在。因此改用
二叉樹的建立與各種遍歷方式
#include<cstdlib> #include<string> #include<iostream> #include<cmath> #include<cstring> #include<algorit
Map的四種遍歷方式及詳解
1. Map的四種遍歷方式 下面只是簡單介紹各種遍歷示例(以HashMap為例),各自優劣會在本文後面進行分析給出結論。 (1) for each map.entrySet() Java
Oracle 數據庫啟動與關閉 各種方式詳解整理
歸檔模式 tro 需求 acl 提交 管理操作 edi 存在 datafile 概述 只有具備sysdba和sysoper系統特權的用戶才能啟動和關閉數據庫。 在啟動數據庫之前應該啟動監聽程序,否則就不能利用命令方式來管理數據庫,包括啟動和關閉數據庫。 雖然數據庫正常運行,
JavaScript中定義類的方式詳解
轉載:JavaScript中定義類的方式詳解 JavaScript中定義類的方式詳解 這篇文章主要介紹了JavaScript中定義類的方式,結合例項形式分析了JavaScript實現面向物件類的定義及使用相關技巧,並附帶了四種JavaScript類的定義方式,需要的朋友可以參考下 本文例
JavaScript中各種遍歷方法的總結
for 最基礎的迴圈 for…in 可以用來遍歷物件 var o ={ name:"jack", age:20, city:"beijing" }; for (var key in o){ alert(key) //"name
ArrayList和LinkedList的幾種迴圈遍歷方式及效能對比分析 主要介紹ArrayList和LinkedList這兩種list的五種迴圈遍歷方式,各種方式的效能測試對比,根據ArrayLis
主要介紹ArrayList和LinkedList這兩種list的五種迴圈遍歷方式,各種方式的效能測試對比,根據ArrayList和LinkedList的原始碼實現分析效能結果,總結結論。 通過本文你可以瞭解(1)List的五種遍歷方式及各自效能 (2)foreach及Iterator的實現 (3)加
javascript函式定義三種方式詳解
定義函式的三種方式 function語句式 function test1() { console.info("test1"); } 函式的直接變數 ECMAScript var test2 = function () { cons
集合的三種遍歷方式
叠代器 whl print 循環 下一個 sys 三種 iterator for 1、for循環 代碼實現: for(int i=0;i<list.size();i++){ product p=list.get(i); System.println(p); } 2、叠
JavaScript中return的用法詳解
style 返回 www log tle blog 意思 charset fun 1、定義:return 從字面上的看就是返回,官方定義return語句將終止當前函數並返回當前函數的值,可以看下下面的示例代碼: <!DOCTYPE html><html l