3 JS 遍历方法题

1 遍历对象的方法

1 遍历对象: for in 循环
-----------------------------------------------------------------------------------------
1 注意事项: 
  1 for in 只会遍历自定义属性, 不会遍历原型上的默认属性和方法
  2 但在实际应用中, 若原型上新增了属性和方法, for in 就会把新增的属性和方法遍历出来 (解决方案, 如下代码)
  3 for in 循环也可遍历数组, 但一般不那么干


2 代码范式: 

  1 基础格式
    for (var k in obj) {
      console.log(k)   //obj的每个属性
      console.log(obj[k])   //obj的每个属性对应的属性值
    }

  2 解决方式 1
    for (var k in obj) {
      if(!Object.prototype.hasOwnProperty.call(people,key)) continue;
      console.log(k, obj[k])   //如上代码就, 解决了, 遍历新增属性和方法的这个特性
    }

  3 解决方式 2
    for (var k in obj) {
      if (obj.hasOwnProperty(k)){  //此方法会忽略掉, 从原型上得到的属性
         console.log(k, obj[k]) 
      }
    }
-----------------------------------------------------------------------------------------

2 遍历数组的方法

1 for of 循环
-----------------------------------------------------------------------------------------
1 注意事项: 
  1 无法遍历对象
  2 只会遍历数组元素

2 代码范式: 
  let arr = [1, 2, 3]
  for (let v of arr) {
    console.log(v)   // v == 数组元素
  }
-----------------------------------------------------------------------------------------

2 forEach()  //操作
-----------------------------------------------------------------------------------------
1 注意事项: 
  1 没有返回值
  2 可以改变原数组

2 使用场景: 
  1 在可以改变原数组的情况下使用
  2 所以不需要有返回值

3 代码范式: 
  let arr = [1, 2, 3]
  arr.forEach( (v, i) => console.log(v + '---' + i) )
-----------------------------------------------------------------------------------------

3 map()  //操作
-----------------------------------------------------------------------------------------
1 注意事项: 
  1 有返回值
  2 不可以改变原数组

2 使用场景: 
  1 不能改变原数组的时候使用
  2 这样就可以, 生成我们需要的新数组, 并 return 出来

3 代码范式: 
  let arr = [1, 2, 3]
  let hh = arr.map( (v, i) => v + i )
  console.log(hh)
-----------------------------------------------------------------------------------------

4 filter  //过滤
-----------------------------------------------------------------------------------------
1 作用: 过滤数组, 拿到我们需要的数组元素, 组成新的数组, 并 return 出来

2 代码范式: 
  let arr = [1, 2, 3]
  let hh = arr.filter( v => v>2 )
  console.log(hh)
-----------------------------------------------------------------------------------------

5 every  //判断
-----------------------------------------------------------------------------------------
1 作用: 遍历所有数组元素, 只要存在一个不符合条件的, 就返回 false

2 代码范式:
  let arr = [1, 2, 3]
  var hh = arr.every(v => v>2)  //只要发现一个, 不大于2的数组元素, 就返回 false
  console.log(hh)  // false
-----------------------------------------------------------------------------------------

6 some  //判断
-----------------------------------------------------------------------------------------
1 作用: 遍历所有数组元素, 只要存在一个符合条件的, 就返回 true

2 代码范式:
  let arr = [1, 2, 3]
  var hh = arr.every(v => v>2)  //只要发现一个, 大于2的数组元素, 就返回 true
  console.log(hh)  // true
-----------------------------------------------------------------------------------------

3 各种遍历方法之间的区别

1 for in / for of --> 区别

比较项	for in	for of
作用	遍历对象	遍历数组
功能	可以遍历属性	不能遍历属性

2 forEach 和 for循环的区别 -> for 循环更加灵活

forEach	for
不支持 break操作 (报错)	不报错
无法在遍历的同时删空自己	可以
不能控制循环的起点, 只能从0开始	可以自定义, 遍历起点
for 循环更加灵活, 可操作性强	forEch 使用方便, 封装好的 API

1 总结
-----------------------------------------------------------------------------------------
1 通常 for循环就可以解决我们的问题了

2 但是很多情况下, 使用 API可以更方便的解决问题
-----------------------------------------------------------------------------------------