for、for in、forEach和 for of四者区别

131 阅读2分钟

引:之前在进行一个复杂组件开发时需要进行树查找,向上找到包含当前节点的所有父级节点,实现方式为递归。

最后的实现代码为

   /**
     * @description: 查找包含当前节点的所有父级节点
     * @param {*} data 需要查找的树
     * @param {*} row 要查找的节点
     * @return {*} path 父级节点ID数组
     */
     upFind(data, row, path = []) {
      if (!data) {
        return []
      }
      for (const item of data) {
        path.push(item.id)
        if (item.id === row.id) {
          return path
        }
        if (item.children && item.children.length) {
          const findChildren = this.upFind(item.children, row, path)
          if (findChildren.length) {
            return findChildren
          }
        }
        path.pop()
      }
      return []
    }

刚开始,最外层的循环我写的是forEach,发现这个递归返回一直拿到的结果为空数组,但打印path又是正确的结果,将forEach换位for of 返回正确。

由此,补充积累一下这样的基础知识。

1.for

简单循环

2.for in

无序,可以遍历对象中的非符号键属性,比如Array中的length为不可枚举属性,遍历不出来。

遍历的是对象的属性,而不是数组的索引。

如果迭代的变量为null或undifined,则不执行循环体。

3.forEach

对数组每一项都运行,但没有返回值,不能 break 和 return。

因此递归中需要返回值,不能使用forEach。

在数组的迭代方法中还有every、filter、map、some

every 对数组每一项都运行,如对每一项函数都返回true,则这个方法返回true

filter 对数组每一项都运行,函数返回true的项会组成数组之后返回

map 对数组每一项都运行,返回由每次函数调用的结果构成的数组

some 对数组每一项都运行,如有一项函数返回true,则这个方法返回true

4.for of

可以 break、continue 和 return 语句

不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象