[ js 筆記 ] JS 中的 for ... in 和 for ... of


Posted by ChloeLin on 2022-02-10

前言

Javascript 中遍歷陣列及物件的方式有很多,for、forEach、map、every、some ...等等,這篇來說明最基本的 for ... in 和 for ... of。

for in vs for of

  1. for in遍歷的是key;for of遍歷的是value。
  2. for of主要是針對可迭代的對象(包括 Array、Map、Set、String、TypedArray、arguments 等等)
  3. for in 會遍歷自定義屬性,for of 不會遍歷自定義屬性。

for in

陣列的狀況:

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

for(let index in arr){
    console.log(index);
}
// 0,1,2,3,4

物件的狀況:

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}

for(let index in obj){
    console.log(index);
}
// name email

若想要用for in 取value,也是可以,要用arr[index]:

陣列的狀況:

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

for(let index in arr){
    console.log(arr[index]);
}
//a,b,c,d,{'e':'e_value','f':'f_value'}

物件的狀況:

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}

for(let index in obj){
    console.log(obj[index]);
}
// amy eat@gmail.com

for in 會遍歷自定義屬性

陣列的狀況:

arr.name='myArray'; //自定義屬性
for(let index in arr){
    console.log(index);
}
// 0,1,2,3,4,name

物件的狀況:

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}
obj.address = 'somewhere'
for(let index in obj){
    console.log(obj[index]);
}
//amy  eat@gmail.com  somewhere

for of 取value,不會遍歷自定義屬性

陣列的狀況:

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

arr.name='myArray'; //自定義屬性

for(let value of arr){
    console.log(value);
}
//a b c d { e: 'e_value', f: 'f_value' }
//不顯示myArray

物件的狀況:物件非迭代的對象,因此不成立。


#javascript #Front-End #Array #object







Related Posts

利用 Cookie 特性進行的 DoS 攻擊:Cookie 炸彈

利用 Cookie 特性進行的 DoS 攻擊:Cookie 炸彈

JavaScript: Data Type & Variable Assignment

JavaScript: Data Type & Variable Assignment

Git 基礎概念與版本控制操作

Git 基礎概念與版本控制操作


Comments