扩散运营商的这种用途是做什么的?

时间:2017-11-08 20:45:34

标签: javascript

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

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

在我看来,它只是将this.rows分配给自己。是否有其他使用扩展运算符的意义?或者它只是一个错误?

1 个答案:

答案 0 :(得分: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; }

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