關於js的 for...in 你瞭解多少

For...In

聲明用於對數組或者對象的屬性進行循環/迭代操做。

　1. 求value： 對於數組 ，迭代出來的是數組元素，對於對象，迭代出來的是對象的屬性值：

1）數組示例

var x  
  var mycars = new Array()  
  mycars[0] = 'Saab'  
  mycars[1] = 'Volvo'  
  mycars[2] = 'BMW'  
    
  for (var x in mycars)  
  {  
    console.log(mycars[x])  
  }  
  // 輸出爲：
  // Saab  
  // Volvo  
  // BMW

2）對象示例：

var obj = {  
    w: 'wen',  
    j: 'jian',  
    b: 'bao'  
  }
 
  for (var v in obj)
  {  
    console.log(obj[v])  // 這裏爲何不能用 obj.v 呢?[淘氣]
  }
  // 輸出爲：
  // wen
  // jian
  // bao

　2. 求key：

1）對於數組，輸出稱之爲下標的東西：

var x  
  var mycars = new Array()
  mycars[0] = 'Saab'  
  mycars[1] = 'Volvo'  
  mycars[3] = 'BMW'  
     
  for (var x in mycars)  
  {  
     console.log(x)  
  }
  // 輸出：
  // 0
  // 1
  // 3

2）而對於對象，這裏不叫下標，該叫屬性了：

var obj = {  
      w: 'wen',  
      j: 'jian',  
      b: 'bao'  
  }  
  
  for (var v in obj)
  {  
    console.log(v)  
  }
  
  // 輸出：
  // w
  // j
  // b

1. 判斷【元素】是否在數組/對象裏邊（或者說屬於這個數組/對象）

   這裏有個注意點：* 首先要清楚這個【元素】是 key 仍是 value *

多說無益，走一波代碼

1）數組判斷 key 時

var arr = ['a','b','1',2,'str']
  console.log(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6])
  // 輸出：a b 1 2 str undefined undefined
  console.log(0 in arr)  // true
  console.log(4 in arr)  // true
  console.log(5 in arr)  // false

由於js數組給人直觀的是value值，而它的key（下標）是從零默認自增的，而且是隱藏不易被察覺的 ，（在不指定下標的狀況下賦值自動自增）；若是前邊有指定下標賦值，繼續後邊不指定下標賦值時會以最大下標繼續自增。同時要注意 跨自增值的下標會改變數組的長度

引出的技術點：文科太差，理解不了的，能夠直接看代碼

var arr = ['a','b','1',2,'str']
  console.log(arr.length)  // 5
  arr[6] = '@#$'
  console.log(arr)         // ["a", "b", "1", 2, "str", empty, "@#$"]
  console.log(arr.length)  // 7
  console.log(5 in arr)    // false
  arr = arr.concat(null)
  console.log(arr)         // ["a", "b", "1", 2, "str", empty, "@#$", null]
  console.log(arr.length)  // 8
  console.log(arr[4], arr[5], arr[6], arr[7])
  // str undefined @#$ null

數組下標賦值若是有跳躍時，你能夠理解爲長度不許/或者理解爲被 undefined 佔位補充了

使用in判斷key（下標）在不在數組中好像很管用，但不經常使用

2）對象判斷 key 時

var obj = {
    a: 'qq',
    b: '66',
    c: 'ee',
    D: 'ee'
  }
  console.log('d' in obj)  // false
  console.log('D' in obj && 'c' in obj)  // true

使用in判斷key（屬性）在不在對象中好像也很管用

3）數組判斷value

var arr = ['a','b','1',2,'str']
  console.log('b' in arr)  // false
  console.log('3' in arr)  // true

明明'b'這個值在數組裏邊，卻返回 false，'3'不在數組中卻返回了 true 看來不能用in判斷數組的值

4）對象判斷value

var obj = {
    w: 'wen',
    j: 'jian',
    b: 'bao'
  }
  console.log('wen' in obj)  // false
  console.log('ao' in obj)   // false

明明'wen'這個值在對象裏邊，卻返回 false. '明明' 在這裏很躺槍，in 在這裏也顯得無能爲力。

綜上所述

for (var item in arr) {}
  for (var v in obj) {}

此時的 item 是 arr 的下標；

v 是 obj 的屬性。

因此【in】 只能用來判斷 【數組的下標】 或者 【對象的屬性】

你記住了嗎？