关于js的 for...in 你了解多少

Posted 2021-02-17 爱博子

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】 只能用来判断 【数组的下标】 或者 【对象的属性】

你记住了吗？