Map方法设置item.checked后返回异常：数组元素类型不符预期

需求是遍历tableSchema.headers数组，将每个元素的checked属性设为false（不存在则赋值为false），且返回数组长度与原数组一致，但当前代码执行后，最后一个元素变成了true，而非预期的带checked: false的对象。

我的代码 #

const headerUpdate = this.tableSchema.headers.map((item) => {
   return (item.checked ?? (item.checked = false)) || item;
});

返回结果 #

[{…}, {…}, {…}, {…}, true]

示例数据 #

headers: [
        {
            title: 'Primary Admin User ID',
            label: 'adminUserName',
            sortable: true,
            dir: true,
            sortType: 'string',
            sortActive: true,
        },
        {
            title: 'Name',
            label: 'customerName',
            sortable: true,
            sortType: 'string',
            dir: false,
        },
        {
            title: 'Address',
            label: 'address',
            sortable: true,
            link: false,
            dir: false,
            sortType: 'string',
            disabled: true,
        },
        {
            title: 'Phone Number',
            label: 'phoneNum',
            sortable: true,
            link: false,
            dir: false,
            sortType: 'string',
            disabled: true,
        },
        {
            label: 'CheckBox',
            link: false,
            dir: false,
            sortType: 'string',
            disabled: true,
            checkBox: true,
            checked: false,
        },
    ],

问题原因 #

你的代码逻辑存在错误，核心问题出在返回的表达式(item.checked ?? (item.checked = false)) || item上：

• 当元素原本的checked为true时，item.checked ?? (item.checked = false)会直接返回true，而逻辑或||会优先返回第一个真值，所以最终返回的是布尔值true，而非修改后的对象。
• 只有当checked不存在或为undefined时，表达式才会执行赋值并返回对象，但完全覆盖不了checked为true的场景。

解决方案 #

方案1：直接修改原数组对象（允许修改原数据）

const headerUpdate = this.tableSchema.headers.map((item) => {
  // 不管原来有没有checked属性，直接设为false
  item.checked = false;
  return item;
});

方案2：返回新对象（不修改原数组数据，推荐）

如果不想改动原数组里的对象，用扩展运算符创建新对象并覆盖checked属性：

const headerUpdate = this.tableSchema.headers.map((item) => {
  return { ...item, checked: false };
});

这两种方案都能保证返回数组的长度和原数组一致，且每个元素的checked属性都被设为false。

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