for in遇到的bug

最新推荐文章于 2023-08-18 13:31:30 发布

LT_ya

最新推荐文章于 2023-08-18 13:31:30 发布

阅读量461

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/tao__f/article/details/110655160

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

项目场景：

由于ie不兼容getElmentsByClassName获取元素，所以我自己封装该方法： ie支持ID与TagName获取元素

问题描述：

提示：这里描述项目中遇到的问题：
for in 遍历数组时split（）报错

 // 原因:className获取元素不兼容ie
        // 兼容所有浏览器的方法只有id 与tagName
        function getclassName(cls) {
            let arr = []//用于存储类名的数组

            let elments = document.getElementsByTagName("*");//获取所有节点
            console.log(elments)
            for (let i in elments) {
                let classarr = elments[i].className.split(" ")
                for (let j in classarr) {
                    if (classarr[j] == cls) {
                        arr.push(elments[i])
                        break
                    }
                }
            }
            return arr
        }

在这里插入图片描述

原因分析：

split为string型方法，split报错可能for in 遍历出了不是string型的元素，引起报错

解决方案：

1.首先判断遍历出的类型，证实分析的正确性

 for (let i in elments) {
                
                console.log(typeof elments[i].className)
                // let classarr = elments[i].className.split(" ")
                // for (let j in classarr) {
                //     if (classarr[j] == cls) {
                //         arr.push(elments[i])
                //         break
                //     }
                // }
            }

在这里插入图片描述

2.有3个undefined,那这3个是什么呢？

   for (let i in elments) {
                
                console.log(typeof elments[i].className,elments[i])

在这里插入图片描述
可以看到，最后3个对象中没有classNaem属性，所以undefined，而最后3个对象怎么出来的。

  for (let i =0;i<elments.length;i++) {
                
                console.log(typeof elments[i].className,elments[i])
                // let classarr = elments[i].className.split(" ")
                // for (let j in classarr) {
                //     if (classarr[j] == cls) {
                //         arr.push(elments[i])
                //         break
                //     }
                // }
            }
            return arr
        }

在这里插入图片描述

  for (let i of elments) {
                
                console.log(typeof i.className,i)
                // let classarr = elments[i].className.split(" ")
                // for (let j in classarr) {
                //     if (classarr[j] == cls) {
                //         arr.push(elments[i])
                //         break
                //     }
                // }
            }