英文:

Insert at Specific Array and Replace one existing Object in Array in ES6/Javascript

问题 {#heading}

我想要在isEnabled为true时将productColumn插入到倒数第三个位置。
同时，我想要用customerFish替换fish列。
我应该如何使用现代JavaScript（如ES6及以上版本）来实现这个目标？

const updatedListData = isEnabled
  ? {
      ...listData,
      columns: [
        ...listData.columns.slice(0, -3), // 所有现有列，除了最后三列
        newProductColumn,
        ...listData.columns.slice(-2) // 添加回最后两列
      ]
    }
  : {
      ...listData,
      columns: listData.columns.map(column =>
        column === "fish" ? "customerFish" : column
      )
    };

英文:

I wanted to insert the productColumn 3rd to the last if isEnabled is true.
Also I wanted to replace fish column with customerFish.
How should I do that using modern Javascript like ES6 and above?

Codesandbox ------> CODESANDBOX

  const updatedListData = isEnabled
    ? {
        ...listData,
        columns: [
          ...listData.columns.slice(0, -2), // All existing columns except the last two
          newProductColumn,
          ...listData.columns.slice(-2) // Add back the last two columns
        ]
      }
    : listData;

答案1 {#1}

得分: 0

虽然通常认为对数据进行变异是不好的，但在这种情况下，我认为这样做更容易。

因此，下面我克隆数据，然后只是使用旧式的索引指定符进行替换，甚至可以使用findIndex等来查找列等等。

换句话说，我认为这样做比尝试使用扩展语法要简单而强大。

以下是一个示例。

const listData = {
  columns: [
    {
      name: "created_at",
      isDefaultColumn: true,
      header: "Date created"
    },
    {
      name: "fish",
      isDefaultColumn: true,
      header: "Fish"
    },
    {
      name: "updated_at",
      isDefaultColumn: true,
      header: "Date updated"
    },
    {
      name: "bought_at",
      isDefaultColumn: true,
      header: "Bought at"
    },
    {
      name: "sell_at",
      isDefaultColumn: true,
      header: "Sell at"
    }
  ]
};

const newProductColumns = [
  {
    name: "newProduct",
    header: "New product?",
    isDefaultColumn: true
  },
  {
    name: "newProduct Two",
    header: "New product Two?",
    isDefaultColumn: false
  }
];

const customerFeeColumn = {
  name: "customerFish",
  header: "Customer Fish",
  isDefaultColumn: true
};

const isEnabled = true;

// 让我们克隆根对象，因为要更改状态
const updatedListData = { ...listData };

if (isEnabled) {
  // 我们还将突变列数组，让我们复制一份
  updatedListData.columns = [...updatedListData.columns];
  updatedListData.columns[1] = customerFeeColumn;
  updatedListData.columns.splice(
    3, // 从索引3开始
    0, // 不删除任何元素
    ...newProductColumns
  ); // 现在添加列
}

console.log(updatedListData);

希望这对你有所帮助。 英文:

Although mutating data is often seen as bad, in cases like this I think it's easier.

So below I clone the data, then just replace using old fashioned index specifiers, you could even then use findIndex etc to find the columns etc.

IOW: doing this I think is way simpler & powerful than trying to use spread syntax.

Below is an example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const listData = {
columns: [
{
name: "created_at",
isDefaultColumn: true,
header: "Date created"
},
{
name: "fish",
isDefaultColumn: true,
header: "Fish"
},
{
name: "updated_at",
isDefaultColumn: true,
header: "Date updated"
},
{
name: "bought_at",
isDefaultColumn: true,
header: "Bought at"
},
{
name: "sell_at",
isDefaultColumn: true,
header: "Sell at"
}
]
};
const newProductColumns = [
{
name: "newProduct",
header: "New product?",
isDefaultColumn: true
},
{
name: "newProduct Two",
header: "New product Two?",
isDefaultColumn: false
}
];
const customerFeeColumn = {
name: "customerFish",
header: "Customer Fish",
isDefaultColumn: true
};
const isEnabled = true;
//lets clone root object, cause State change
const updatedListData = {...listData};
if (isEnabled) {
//we are also going to mutate columns array let's copy
updatedListData.columns = [...updatedListData.columns];
updatedListData.columns[1] = customerFeeColumn;
updatedListData.columns.splice(
3, //start at index 3
0, //dont delete any
...newProductColumns);  //now add the columns
}
console.log(updatedListData);

<!-- end snippet -->