javascript - 循环访问 classList 时无法编辑它

Question

我有一个像这样的元素:

<span class="util bg-color-yellow tooltip bg-color-red"></span>

我想删除所有以“bg-color-”开头的类，所以我只需循环遍历所有类，然后删除匹配的类:

var element = document.getElement......;

var elementClasses = element.classList;


for( var i = 0, l = elementClasses.length; i < l; i++ )
{
    var className = elementClasses[i];

    // console.log(i);
    // console.log(name);

    if( className.startsWith('bg-color-') )
    {
        element.classList.remove(className);
    }

    console.log('elementClasses contain :');
    console.log(elementClasses);
}

当它与“bg-color-”类匹配时，它成功删除了类名，但它也编辑了变量elementClasses，就好像它是对element.classList的引用一样code>，即使它是它的变量(副本)。

第一个循环:

elementClasses = [ util bg-color-yellow tooltip bg-color-red ]

第二个循环:

elementClasses = [ util bg-color-yellow tooltip bg-color-red ]

第三个循环:

elementClasses = [ util tooltip bg-color-red ]

问题来了! elementClasses 与 elemnt.classList 一起修改!

• 这怎么可能？
• elementClasses 实际上是 element.classList 的一种引用吗？
• 每次修改 element.classList 时，elementClasses 是否都会重新创建它自己？

.

非常感谢! :)

Answer 1

很高兴您已经确定了导致问​​题的原因。现在给出解决方案:

// ES6
[...elementClasses].forEach((className, i) => {
// OR ES5
Array.prototype.slice.call(elementClasses).forEach(function (className, i) {

    // console.log(i);
    // console.log(className);

    if( className.startsWith('bg-color-') )
    {
        element.classList.remove(className);
    }

    console.log('elementClasses contain :');
    console.log(elementClasses);
});

使用这两种方法中的任何一种，classList 都会进行浅复制，以确保在修改数组时不会跳过条目。

为了回答您的另一个问题，原始代码中的 elementClasses 确实是对 element.classList 的引用，这就是为什么当其中一个被修改时，它们都被修改了.

在我的 ES6 建议中，[...elementClasses] 使用展开运算符将浅拷贝到 native Array 中，而 ES5 方法则调用 在原始 element.classList 上使用 slice() 来制作它的浅拷贝。

现在进行演示:

var element = document.querySelector('span');
var elementClasses = element.classList;

// ES6
// [...elementClasses].forEach((className, i) => {
// OR ES5
Array.prototype.slice.call(elementClasses).forEach(function (className, i) {

    console.log(i);
    console.log(className);

    if( className.startsWith('bg-color-') )
    {
        element.classList.remove(className);
    }

    console.log('elementClasses contain :');
    console.log(JSON.stringify(elementClasses));
});

<span class="util bg-color-yellow tooltip bg-color-red"></span>