摘要:而僅僅只是終止循環,后面的代碼會繼續執行。最重要的一點,可以添加第二參數,為一個數組,而且回調函數中的會指向這個數組。
為了方便例子講解,現有數組和json對象如下
var demoArr = ["Javascript", "Gulp", "CSS3", "Grunt", "jQuery", "angular"]; var demoObj = { aaa: "Javascript", bbb: "Gulp", ccc: "CSS3", ffffd: "Grunt", eee: "jQuery", fff: "angular" };for
可以直接看示例,用得太多了,很簡單
(function() { for(var i=0, len=demoArr.length; i關于for循環,有一下幾點需要注意
for循環中的i在循環結束之后任然存在與作用域中,為了避免影響作用域中的其他變量,使用函數自執行的方式將其隔離起來()();
避免使用for(var i=0; i
的方式,這樣的數組長度每次都被計算,效率低于上面的方式。也可以將變量聲明放在for的前面來執行,提高閱讀性 var i = 0, len = demo1Arr.length; for(; i
跳出循環的方式有如下幾種
return 函數執行被終止
break 循環被終止
continue 循環被跳過
完整實例
for infor(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"); //不會執行 }forEachdemoArr.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一致
ES5中新增的幾個數組方法,forEach, map, filter, reduce等,可以理解為依次對數組的每一個子項進行一個處理(回調函數中的操作),他們是對簡單循環的更高一層封裝,因此與單純的循環在本質上有一些不同,所以才會導致return, continue, break的不同。
最重要的一點,可以添加第二參數,為一個數組,而且回調函數中的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一定要小心謹慎一點。
// 直接使用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 $.each不建議使用do/while的方式來遍歷數組
$.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}$(selecter).each$.each 中的 $(this) 與this有所不同,不過遍歷結果卻是一樣,你可以在測試代碼中打印出來看看
專門用來遍歷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:// 1: // ... // 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() {}() 三種函數自執行的方式
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86153.html
摘要:看下面一個例子優點使用構造器函數的好處在于,它可以在創建對象時接收一些參數。按照慣例,構造函數的函數名應始終以一個大寫字母開頭,以區分普通函數。返回該對象的源代碼。使您有能力向對象添加屬性和方法。 基本概念 ECMA關于對象的定義是:無序屬性的集合,其屬性可以包含基本值、對象或者函數。對象的每個屬性或方法都有一個名字,而每個名字都映射到一個值。 類 在現實生活中,相似的對象之間往往都有...
摘要:和的作用一樣,區別在于寫法語法對象對象作用判斷對象是否在對象的原型鏈上語法對象構造函數作用判斷構造函數的屬性是否在對象的原型鏈上,如果在,就返回屬性是否可枚舉用于檢查給定的屬性是否能夠使用語句。 ## javascript對象原型成員詳解 ## ECMAScript 中的對象就是一組數據和功能的集合,對象可以通過 new 操作符后跟要創建的對象名稱來...
閱讀 3208·2021-09-30 09:48
閱讀 3485·2021-09-22 16:00
閱讀 1062·2019-08-30 13:08
閱讀 3098·2019-08-30 10:53
閱讀 2410·2019-08-29 18:33
閱讀 1583·2019-08-29 12:47
閱讀 896·2019-08-29 12:16
閱讀 1929·2019-08-26 12:02