javascript - 传播运算符的这种用途是做什么的？

Question

我刚刚在一些代码中注意到了这一点，并且我一直在努力理解它在做什么。

this.rows[rowIndex][cell] = event.target.value;
this.rows = [...this.rows];

在我看来，它只是将 this.rows 分配给自己。传播运算符还有其他一些有意义的用途吗？或者它只是一个错误？

Answer 1

扩展语法将提供原始数组的浅拷贝。

这至少有两个可能有用的原因:

• 对原始 rows 属性存在的任何引用都不会受到以后对复制数组的直接属性所做的赋值的影响。
• 如果 rows 的原始值不是真正的数组，而是可迭代的(类数组)，则扩展语法赋值的结果仍将是真正的数组。

下面是一个人工制作的物体来说明这两点:

class Foo {
    constructor(n) { // Define array-like object 
        this.rows = {
            // Define iterator
            [Symbol.iterator]: function* () {
                for (let i = 0; i < n; i++) yield this[i];
            },
        }
        // Create "index" properties
        for (let i = 0; i < n; i++) this.rows[i] = [];
    }
    bar(rowIndex, cell, value) {
        this.rows[rowIndex][cell] = value;
        console.log(this.rows);
        // Take shallow copy
        this.rows = [...this.rows];
        // Now it is a true array
        console.log(this.rows);
        // We add a value to that array, which other copies will not see
        this.rows.push("added");
        console.log(this.rows);
    }
}
var foo = new Foo(2); // Create array-like object
var remember = foo.rows; // get its rows
foo.bar(1, 0, 15); // set one particular value to 15
// Demonstrate that the value that was added inside the method is not in our copy
console.log(remember);

.as-console-wrapper { max-height: 100% !important; top: 0; }

请注意第一个输出如何具有 { } 符号:它未被识别为真正的数组。第二个输出是 [ ]:一个真正的数组。第三个输出显示推送到该数组的附加值。最终输出显示这些操作(使其成为数组并向其添加值)并未反射(reflect)在我们对 rows 属性的原始引用中。