遍历执行 switch 语句的数组返回 TypeError: Cannot assign to read only property 'location' of object '#<object> '<div id="text_translate"><p> 我有一个只读数组，我复制它成为一个可变数组let mutableForecast = [...forecast]我正在使用这个新数组并用forEach迭代它，这样我就可以改变数组。 我试图使用带有switch语句的一些流控制，但我收到TypeError: Cannot assign to read only property 'location' of object '#&lt;Object&gt;'</p><pre> let mutableForecast = [...forecast] mutableForecast.forEach((obj, i) =&gt; { switch (obj.location) { case obj.location === "BRITISH_COLUMBIA": obj.location = "BC" break; default: obj.location = "oother" } })</pre><p> 这里有什么问题？ 我看过<a href="https://stackoverflow.com/questions/4689856/how-to-change-value-of-object-which-is-inside-an-array-using-javascript-or-jquer" rel="nofollow noreferrer">这个</a>、 <a href="https://stackoverflow.com/questions/57812091/cannot-assign-to-read-only-property" rel="nofollow noreferrer">这个</a>、 <a href="https://stackoverflow.com/questions/44288164/cannot-assign-to-read-only-property-name-of-object-object-object" rel="nofollow noreferrer">这个</a>和其他一些，但找不到答案。</p><p> 这是我复制之前预测数组的样子<a href="https://i.stack.imgur.com/AnUQx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AnUQx.png" alt="在此处输入图像描述"></a></p></div></object>

Question

我有一个只读数组，我复制它成为一个可变数组let mutableForecast = [...forecast]我正在使用这个新数组并用forEach迭代它，这样我就可以改变数组。 我试图使用带有switch语句的一些流控制，但我收到TypeError: Cannot assign to read only property 'location' of object '#<Object>'

let mutableForecast = [...forecast]
mutableForecast.forEach((obj, i) => {
    switch (obj.location) {
        case obj.location === "BRITISH_COLUMBIA":
            obj.location = "BC"
            break;
        default:
            obj.location = "oother"
    }

})

这里有什么问题？ 我看过这个、 这个、 这个和其他一些，但找不到答案。

这是我复制之前预测数组的样子

Answer 1

如果不知道forecast来自何处，很难确定，但我怀疑问题在于数组的元素不是普通对象，而是定义为不可变的自定义类型的实例。 您的第三个链接有可能的解决方案。 关键是您不能简单地使用 rest 将不可变数组转换为可变数组并以这种方式传播。 您需要单独修改数组中每个项目的可变性。

你可能需要这样的东西：

let mutableForecast = [...forecast]
mutableForecast.forEach((obj, i) => {
    // make this element's location property mutable
    Object.defineProperty(obj, 'location', { writable: true })
    
    // calculate and set new value
    switch (obj.location) {
        case 'BRITISH_COLUMBIA':
            obj.location = 'BC'
            break;
        default:
            obj.location = 'other'
    }
})

---

这也可能有效，我认为它更清洁。 您必须尝试一下才能确定：

let mutableForecast = Array.from(forecast)
.map(forecastItem => ({
    ...forecastItem,
    location: getShortLocation(forecastItem.location)
}))

function getShortLocation( sourceLocation ) {
    switch (sourceLocation) {
        case 'BRITISH_COLUMBIA': return 'BC'
        default:                 return 'other'
    }
}

---

我们正在解决的核心问题是，无论 package 为您提供什么forecast ，它显然都在处理一些自定义数据类型，其中一些属性被定义为不可变。 当您记录对象时，该事实不会出现，当您将类似数组的容器转换为数组时，它也不会改变。

那是因为[...forecast]不编辑项目，它只是将它们原样从一个数据结构复制到另一个数据结构中。 实际上，准确地说，它将对这些对象的引用复制到一个新数组中。 如果原始对象是具有锁定属性的奇怪事物，那么您的新数组将包含具有锁定属性的奇怪事物。 如果我们想更改每个元素上该属性的值，我们需要在这样做之前重新定义该属性。

考虑这样一个案例：

let myDog = {
    species: 'dog',
    name: 'Fido'
}
//> myDog { species: 'dog', name: 'Fido' }

我们可以创建另一个具有相同属性的 object，如下所示：

let congruentAnimal = {
    ...myDog
}
//> congruentAnimal { species: 'dog', name: 'Fido' }

如果相同的属性名称出现两次，引擎将只使用最后一个：

let myDog = {
    species: 'cat',
    name: 'Fido',
    species: 'dog' // this will cause cat to be ignored
}
//> myDog { name: 'Fido', species: 'dog' }

因此，我们可以在复制时覆盖单个 object 属性，方法是最后重新声明这些属性：

let anotherCongruentAnimal = {
    ...myDog,
    species: 'NEW DOG'
}
//> anotherCongruentAnimal { name: 'Fido', species: 'NEW DOG' }

这就是第二个片段中发生的事情。 这是一个扩展版本：

// create a real array whose elements are *references* to
// the objects in the array-like forecast
let arrayOfImmutableForecasts = Array.from(forecast)

// create another real array of new objects
// whose property names, values, and metadata are
// the same as the source objects
let arrayOfMutableForecasts = arrayOfImmutableForecasts.map(originalObject => { 
    let newObject = {
        // I think this will also preserve special rules like immutability
        ...originalObject, 
        
        // before we finalize the object, we declare a new simple property
        // the engine will _drop_ the implied prop declaration from above
        // and define the prop based on this simple declaration instead
        location: 'new value'
    }
    
    return newObject
})

Answer 2

似乎不允许您改变数组中对象的位置属性......您可以尝试创建 object 的克隆并改变：

let mutableForecast = [...forecast]
mutableForecast = mutableForecast.map(obj => {
    const location = obj.location
    const objClone = {}
    for (const key in obj) {
        if (key !== 'location') objClone[key] = obj[key]
    }
    switch (location) {
        case "BRITISH_COLUMBIA":
            objClone.location = "BC"
            break;
        default:
            objClone.location = "other"
    }
    return objClone
})

如果失败，您可以尝试创建一个新属性，然后再读取该属性：

let mutableForecast = [...forecast]
mutableForecast.forEach((obj, i) => {
    switch (obj.location) {
        case "BRITISH_COLUMBIA":
            obj.newLocation = "BC"
            break;
        default:
            obj.newLocation = "other"
    }

})