for...in和for...of
講for...of之前應該先講for...in。
for...in是我們一開始學陣列物件遍歷時最常用的方式,但是那樣寫很麻煩,像下面這樣
var arr=[1,3,5,7,9];
for(let i=0;i<arr.length;i++){
console.log(i);//當前元素下標
console.log(arr[i]);//當前元素
}
但是,這種寫法略顯麻煩,可以改成下面這種,略微簡單
var arr=[1,3,5,7,9];
for(let i in arr){
console.log(i);//當前元素下標
console.log(arr[i]);//當前元素
}
但還是不太好用,因為for...in會將原型鏈上的屬性方法都遍歷出來,這樣會導致很多麻煩,length啥的都不準,比如你在原型鏈上定義過一些屬性或方法,使用for...in的話就會將這些方法一起遍歷出來,
Array.prototype.sss=function(){
console.log(1)
}
var arr=[1,3,5,7,9];
for(let i in arr){
console.log(i,arr[i]);//當前元素下標、元素本身
}
Object.prototype.s=function(){
console.log(2)
}
var obj={m:2,ss:66};
for(let i in obj){
console.log(i,obj[i]);//當前元素下標、元素本身
}
如果不想那些屬性啥的被遍歷出來,可以使用hasOwnProperty()-----(這個用在物件上好點,因為這個是用來判斷物件是否含有該屬性的,而陣列雖然也是物件,但每個元素的索引被視為物件的屬性,所以如果用arr.hasOwnProperty(i)來對陣列進行判斷,實際上是行不通的),在物件上使用如下
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}
(除非你本來就是想把這些額外的屬性方法也一起遍歷出來,畢竟有些時候我們就是不知道原型鏈上有啥屬性方法),由於Array
也是物件,而它的每個元素的索引被視為物件的屬性,因此,for ... in
迴圈可以直接迴圈出Array
的索引:
而for...of是iterable型別才能使用的(iterable包括array、set、map,但不包括object),作用類似於for...in,
在用於陣列上時如下:
var arr=[1,3,5,7,9];
for(let item of arr){
console.log(item);//當前元素
}
但是,for...of在用於陣列遍歷時是無法直接獲取到當前下標的,如果想獲取到當前下標誌,可以通過如下方式
var arr=[1,3,5,7,9];
for(let [i,v] of arr.entries()){
console.log(i);//當前元素下標
console.log(v);//當前元素
}
相關文章
- for、for...in、for...of、forEach和map的區別
- Js中for...in Vs for...ofJS
- 在 ES6 中,for...of 和 for...in 講解
- JS陣列中(for...in)和(for...of)的區別JS陣列
- map、reduce、filter、for...of、for...in等總結Filter
- JS中的for...in和for...of迴圈語句有什麼區別JS
- for...in引發的思考
- for...of 迴圈, Set (集合)
- 【JS基礎】從JavaScript中的for...of說起(上) - iterator 和 generatorJSJavaScript
- 【JS基礎】從JavaScript中的for...of說起(下) - async和awaitJSJavaScriptAI
- 為什麼說for...of是JS中的一顆寶石JS
- 學習javaScript必知必會(3)~陣列(陣列建立,for...in遍歷,輔助函式,高階函式filter、map、reduce)JavaScript陣列函式Filter
- 路徑中./和../和/
- ../和./和/的區別
- not in 和 not exists 比較和用法
- xftp和xshell,xftp和xshell的下載和安裝FTP
- #和&
- !=和<>
- ABAP和Java的destination和JNDIJava
- @NotEmpty和@NotBlank和@NotNull小結Null
- 字首和與二維字首和
- ♻️同步和非同步;並行和併發;阻塞和非阻塞非同步並行
- XML基本操作-建立(DOM和LOINQ)和LINQ查詢和儲存XML
- workman 和swoole 區別 和異同
- 寬鬆相等和嚴格相等(==和===)
- 淺談mouseenter和mouseover,mouseout和mouseleave
- csv和excel讀取和下載Excel
- Cookie 和 Session 關係和區別CookieSession
- javafx 和swing_整合JavaFX和SwingJava
- 檔案路徑問題( ./ 和 ../ 和 @/ )
- 堆和棧的概念和區別
- ThymeleafViewResolver和SpringTemplateEngine和SpringResourceTemplateResolver的關係ViewSpring
- 尤拉計劃739:和的和
- 【-Flutter/Dart 語法補遺-】 sync* 和 async* 、yield 和yield* 、async 和 awaitFlutterDartAI
- if if和if else if
- ul和
- 字首和
- equals 和 ==