程序员经验分享-hwhale

for in遇到的bug

2023-05-16

项目场景：

由于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
                //     }
                // }
            }

在这里插入图片描述
这里我们可以看到，另外两种遍历方式没有出现for in 的情况

得出结果：

for in 遍历会将对象从构造函数继承过来的属性都会遍历出来，而for循环与for of 不会，以后要注意！！！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

for

Bug

for in遇到的bug 的相关文章

随机推荐

热门标签