Javascript 插入数组对象中间/第一个后更改数组对象的键

我正在开发一个类似Excel的应用程序，但多维数组有问题

我的列数组如下所示：

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"}
];

var data = [
   {A:"row 0 col A", B: "row 0 col B", C:"row 0 col C"},
   {A:"row 1 col A", B: "row 1 col B", C:"row 1 col C"},
   {A:"row 2 col A", B: "row 2 col B", C:"row 2 col C"}
];

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"},
  {D: {binding: "D",header: "D"}
];

var data = [
   {A:"row 0 col A", B:"new col inserted here", C:"row 0 col B", D:"row 0 col C"},
   {A:"row 1 col A", B:"new col inserted here", C:"row 1 col B", D:"row 1 col C"},
   {A:"row 2 col A", B:"new col inserted here", C:"row 2 col B", D:"row 2 col C"}
];

然后我有一个数组，表示每个单元格的值，如下所示：

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"}
];

var data = [
   {A:"row 0 col A", B: "row 0 col B", C:"row 0 col C"},
   {A:"row 1 col A", B: "row 1 col B", C:"row 1 col C"},
   {A:"row 2 col A", B: "row 2 col B", C:"row 2 col C"}
];

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"},
  {D: {binding: "D",header: "D"}
];

var data = [
   {A:"row 0 col A", B:"new col inserted here", C:"row 0 col B", D:"row 0 col C"},
   {A:"row 1 col A", B:"new col inserted here", C:"row 1 col B", D:"row 1 col C"},
   {A:"row 2 col A", B:"new col inserted here", C:"row 2 col B", D:"row 2 col C"}
];

columns

数组中对象的

binding

属性将用于获取每行的列值

但是，当我在一些字母键的中间插入一个新的列时，我遇到了一个问题。 假设我需要在列

a

和列

B

之间新建一列。结果如下所示：

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"}
];

var data = [
   {A:"row 0 col A", B: "row 0 col B", C:"row 0 col C"},
   {A:"row 1 col A", B: "row 1 col B", C:"row 1 col C"},
   {A:"row 2 col A", B: "row 2 col B", C:"row 2 col C"}
];

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"},
  {D: {binding: "D",header: "D"}
];

var data = [
   {A:"row 0 col A", B:"new col inserted here", C:"row 0 col B", D:"row 0 col C"},
   {A:"row 1 col A", B:"new col inserted here", C:"row 1 col B", D:"row 1 col C"},
   {A:"row 2 col A", B:"new col inserted here", C:"row 2 col B", D:"row 2 col C"}
];

它只是将新列推到

列上

我想我必须在每行的所有字母键之间插入一个新的单元格/项，并重命名所有键（在这种情况下，将键

B

重命名为

C

，

C

重命名为

D

，等等）

我希望结果如下所示：

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"}
];

var data = [
   {A:"row 0 col A", B: "row 0 col B", C:"row 0 col C"},
   {A:"row 1 col A", B: "row 1 col B", C:"row 1 col C"},
   {A:"row 2 col A", B: "row 2 col B", C:"row 2 col C"}
];

var columns = [
  {A: {binding: "A",header: "A"},
  {B: {binding: "B",header: "B"},
  {C: {binding: "C",header: "C"},
  {D: {binding: "D",header: "D"}
];

var data = [
   {A:"row 0 col A", B:"new col inserted here", C:"row 0 col B", D:"row 0 col C"},
   {A:"row 1 col A", B:"new col inserted here", C:"row 1 col B", D:"row 1 col C"},
   {A:"row 2 col A", B:"new col inserted here", C:"row 2 col B", D:"row 2 col C"}
];

如果要重命名所有这些键，我会担心性能问题，特别是如果我有120列（A-DZ）和100行

我有两个问题：

• 最有效的方法是什么
• 如果我有很多行和列，重命名这些键时会出现性能问题吗

---

不要对行或列使用文字名称
要提高性能，请将一个数据对象直接链接到列和/或行（在单元格数组中创建一些属性，如_row和_col），并将_单元格放在行和列中
例如：

var data={}；
data.rows=[
{idx:'A'，_单元格：[]}，
{idx:'B'，_单元格：[]}，
{idx:'C'，_单元格：[]}
]
data.cols=[
{idx:'A'，_单元格：[]}，
{idx:'B'，_单元格：[]}，
{idx:'C'，_单元格：[]}
]
data.cells=[]；
函数addCell（rowIdx、colIdx、value）{
var row=data.rows[rowIdx]；
var col=data.cols[rowIdx]；
变量单元格={value:value，_row:row，_col:col}；
数据。单元格。推送（单元格）；
行。_单元格。推（单元格）；
col._cells.推（cell）；
}
对于（var r=0；r首先，我认为Andam对问题的评论是正确的。当然，有更好的方法用对象数组制作类似电子表格的显示。我的想法是简单地维护一个标题对象数组，其中包含（至少）列标题和要在列中显示的属性的名称。然后插入列只需更新该数组（可能还需要为行设置默认属性值）

但您仍然希望按照您的问题所建议的方式进行，下面是一个可能的实现：


//实用函数
常量alphaNum=（cs）=>（n）=>
n
data.map（（item，i，arr，vals=Object.values（item））=>Object.fromEntries([
…VAL.切片（0，索引），
makeVal（项目、i、索引），
…vals.slice（索引）
].map（（项目，i）=>[toColumnName（i），项目]）
//虚拟单元创建函数
常量createCell=（行、行、列）=>
`在${rowNbr}col${colNbr}行插入的新列`
//样本数据
常量数据=[{A:'第0列A'，B:'第0列B'，C:'第0列C'}，{A:'第1列A'，B:'第1列B'，C:'第1列C'}，{A:'第2列A'，B:'第2列B'，C:'第2列C'}]
//演示
log（插入列（1，数据，createCell））
。作为控制台包装{最大高度：100%！重要；顶部：0}
插入时，如何选择最右边的新列名？这里是“D”，但在任意情况下如何确定它？我不会担心重命名~12K键的性能，除非我测试并发现这是一个问题。我希望它会很快。@ScottSauyet我使用此代码，但我需要对其进行一些修改，以便可以使用t起始字符。示例：我希望函数从字符'C'开始递增。我知道您希望新列在UI中的A和B之间可见，但为什么您需要它在A和B之间？您是否使用顺序索引来访问它？像索引0表示A，索引1表示B，所以我认为@Andam就在这里。对象就在这里无序容器。如果您维护一个表示列的属性名的外部数组，则插入操作只是更新该数组（并可能在每行上为新属性名添加默认值）这是一种有趣的方法，但我会担心各种循环引用。单元格需要返回到其行和列的引用有什么好的理由吗？如果你需要创建一个新的“完整”行或列，这是不需要的！但是如果你想“在之前”创建一个单元格，“列”内的行移动会容易得多我同意你的看法，有很多更好的方法来解决这个问题，比如@eduardo suggest。但我不能像那样更改我的“准备发布”应用程序的数据结构。明白。这就是为什么我给出了一个我认为可能有帮助的答案。但如果你有时间重构这个，这可能是一个更好的方法。