如何在循环中移除HTMLCollection中值为null的子元素

现有代码问题排查 #

• HTMLCollection 是浏览器提供的只读类数组宿主对象，仅用来存储真实DOM子节点，你给它添加的someToken这类自定义键值对不属于集合本身的元素，所以[...myRef.current.children]展开只能拿到索引对应的DOM节点，遍历不到你自定义的键。
• 原有判断!child会把空字符串、0、undefined等 falsy 值也当成判断目标，要精准判断null需要用严格相等=== null。

对应场景代码修改 #

场景1：需要删除挂载在children对象上值为null的自定义属性 #

如果你的业务逻辑就是把自定义数据存在children对象的自定义键上，修改如下：

// 该变量来自其他文件
const myRef = React.useRef();

myRef.current.children['someToken'] = null;
myRef.current.children['some id'] = 'someId';
myRef.current.children['another data'] = 'anotherData';

// 遍历对象所有可枚举键，而非仅遍历类数组元素
Object.keys(myRef.current.children).forEach(key => {
    // 严格判断属性值是否为null
    if (myRef.current.children[key] === null) {
        // 删除对应属性
        delete myRef.current.children[key];
    }
});

场景2：需要删除HTMLCollection中值为null的真实DOM节点 #

正常HTMLCollection不会包含null值，如果是手动赋值导致集合项为null，修改如下：

// 该变量来自其他文件
const myRef = React.useRef();

myRef.current.children['someToken'] = null;
myRef.current.children['some id'] = 'someId';
myRef.current.children['another data'] = 'anotherData';

// 先转成静态数组再倒序遍历，避免实时集合更新导致索引错位
Array.from(myRef.current.children).reverse().forEach((_, index, arr) => {
    const originIndex = arr.length - 1 - index;
    if (myRef.current.children[originIndex] === null) {
        myRef.current.removeChild(myRef.current.children[originIndex]);
    }
});

注意事项 #

• 不推荐给HTMLCollection这类宿主对象挂载自定义属性，不同浏览器对宿主对象的扩展行为兼容性不一致，建议单独声明一个对象存储自定义业务数据。
• 操作HTMLCollection这类实时集合时，如果要执行删除操作，优先转成静态数组或者倒序遍历，避免遗漏元素。

内容的提问来源于stack exchange，提问作者stacky