动态更改数组的特定值答案

【问题标题】：Change specific values of an array dynamically动态更改数组的特定值
【发布时间】：2021-12-18 19:35:50
【问题描述】：

我在 ID 为 #map_coords 的 textarea 中有一个这样的字符串。

[id:1,x:288.43,y:260.15,url:#]-[id:2,x:396.43,y:310.15,url:#]-[id:3,x:503.43,y:299.15,url:#]-[id:4,x:642.43,y:191.15,url:#]

我将字符串分配给一个变量：var getVals = jQuery('#map_coords').val();

我正在将字符串转换为数组：getVals = getVals.split("-");

所以现在上面的字符串看起来像这样：

Array
0: [id:1,x:288.43,y:260.15,url:#]
1: [id:2,x:396.43,y:310.15,url:#]
2: [id:3,x:503.43,y:299.15,url:#]
3: [id:4,x:642.43,y:191.15,url:#]

然后，单击一个按钮，我想删除数组中的一个值，比如说第二个 (1:)。我这样做：

getVals.splice((getMap - 1),1);

getMap 变量始终与数组中的id: 值相同。因此，如果我需要删除 id:2 ，我将拼接 1 值（这就是我这样做的原因 getMap - 1 ）。

删除后的数组是这样的：

Array
0: [id:1,x:288.43,y:260.15,url:#]
1: [id:3,x:503.43,y:299.15,url:#]
2: [id:4,x:642.43,y:191.15,url:#]

这很好，但问题是现在1: 键有一个错误的id:3。我想把它改成id:2。 id:4 也是如此，在id:2 之后数组中的每个键都需要更改为id:3 等等。而这个id:2 不是静态的，而是根据getMap 变量动态变化的。为此，我再次将密钥转换为另一个数组。像这样：

var arrLength = getVals.length;
for (var i = (getMap - 1); i < arrLength; i++) {
  var newVals = getVals[i].split(",");
}

魔法发生在 for 争论中，我在其中设置了 var i = (getMap - 1)。这有助于我更改执行我更改的键的值。

现在我们可以拆分每个键，结果如下：

0: [id:3
1: x:503.43
2: y:299.15
3: url:#]

还有这个：

0: [id:4
1: x:642.43
2: y:191.15
3: url:#]

太棒了！现在我可以只更改[0] 键并从它们的值中减去1，将3 变为2，将4 变为3，依此类推，直到数组结束。我是这样做的：

var arrLength = getVals.length;
for (var i = (getMap - 1); i < arrLength; i++) {
  var newVals = getVals[i].split(",");
  for (var x = 0; x < 1; x++) {
    newVals = newVals[0].replace((i+2),(i+1));
  }
}

如果我这样做 console.log(newVals) 我会得到正确的更改值：

[id:2
[id:3

是的！它有效，但是......现在，我如何将这些新值放回原始的 getVals 数组？我需要得到的最终形式是这样的：

[id:1,x:288.43,y:260.15,url:#]-[id:2,x:503.43,y:299.15,url:#]-[id:3,x:642.43,y:191.15,url:#]

与您在本文开头看到的字符串相同，只是现在删除了 id:2 键，并且以下所有键的 id: 都被减 1。

最后我会做：getVals.toString().replace( /],/g,']-');，它可以帮助我在数组之间添加- 符号，并将整个内容再次转换为字符串，并将其作为值传递给它来自的文本区域！

所以我唯一的问题是如何在我的 getVals 数组中更新 newVals 的结果？

非常感谢您阅读所有这些内容！

【问题讨论】：

为什么不在文本区域开始使用 JSON？
url:# 是什么？在 JS 中 # 应该是你自己的对象...
告诉我们你在做什么很好。告诉我们您想要实现的目标会更好！

标签： javascript jquery arrays

【解决方案1】：

强烈建议您将 JSON 粘贴到 textarea 中

这里我做了简单的替换来得到一个合适的对象——如果你有一个合适的 JSON 字符串开头，这一切都是不必要的

let  str = document.querySelector("#t1").value;
// replace to make a proper JSON 
str = "["+str
  .replaceAll("#",'"#"}')
  .replaceAll("-",",")
  .replaceAll("x",'"x"')
  .replaceAll("y",'"y"')
  .replaceAll("id",'{"id"')
  .replaceAll("url",'"url"')
  +"]"
let getVals = JSON.parse(str).flat()
document.querySelector("#t2").value = JSON.stringify(getVals)
const getMap = 3;
getVals.splice((getMap - 1),1);
getVals.forEach((item,i) => item.id=i+1)
document.querySelector("#t3").value = JSON.stringify(getVals)

This is what I read<br/>
<textarea id="t1" rows=5 cols=50>
[id:1,x:288.43,y:260.15,url:#]-[id:2,x:396.43,y:310.15,url:#]-[id:3,x:503.43,y:299.15,url:#]-[id:4,x:642.43,y:191.15,url:#]
</textarea>
<hr>
This is what I generate <br/>
<textarea id="t2" rows=5 cols=50>
</textarea>
<hr>
After deleting and renumbering<br/>
<textarea id="t3" rows=5 cols=50>
</textarea>

【讨论】：

我会尝试并告诉你，但是当我看到它时，它应该对我有用！太感谢了！我还将尝试生成 JSON 代码而不是类似 JSON 的字符串。

【解决方案2】：

如果您完全忽略对象/项目中的id 并在需要时仅使用数组中该项目的索引进行填充。

我会在这里和https://codesandbox.io/s/great-hopper-3eb4y中给你一个示例代码

抱歉使用ES6，您可以轻松将其转换为不使用class和import。

`index.html`

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <textarea id="txt-area" rows="10" cols="50"></textarea>
      <br /><br />
      <input id="add-input" placeholder="use this format: x,y,url" />
      <button id="add-button">Add</button>
      <br /><br />
      <input
        type="number"
        id="remove-input"
        placeholder="use numbers: 0,1,2,3"
      />
      <button id="remove-button">Remove</button>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

`MyMemory.js`

class MyMemory {
  constructor() {
    this.value = [];
  }

  setInitialState(str) {
    this.value = str.split("-").map((x, i) => {
      const groups = /\[id:(\d*),x:(\d*.\d*),y:(\d*.\d*),url:(.*)\]/.exec(x);
      return {
        x: groups[2],
        y: groups[3],
        url: groups[4]
      };
    });
  }

  add(inputArray) {
    this.value.push({
      x: inputArray[0] || "#",
      y: inputArray[1] || "#",
      url: inputArray[2] || "#"
    });
  }

  getText() {
    return this.value.map((v, i) => MyMemory.objToString(v, i)).join("-");
  }

  remove(id) {
    id = Number.parseInt(id);

    if (id >= 1 && id <= this.value.length) {
      this.value.splice(id - 1, 1);
    } else {
      console.error("Remove id is not valid. Use a number, please!");
    }
  }

  static objToString(obj, idx) {
    const { x, y, url } = obj;
    return `[id:${idx + 1}, x:${x}, y:${y}, url:${url}]`;
  }
}

export default MyMemory;

`index.js`

import $ from "jquery";
import MyMemory from "./MyMemory";
import "./styles.css";
// window.$ = $;

const memory = new MyMemory();

const initialState =
  "[id:1,x:288.43,y:260.15,url:#]-[id:2,x:396.43,y:310.15,url:#]-[id:3,x:503.43,y:299.15,url:#]-[id:4,x:642.43,y:191.15,url:#]";

const bindEvents = () => {
  const $txtArea = $("#txt-area"),
    $add = $("#add-button"),
    $remove = $("#remove-button"),
    $add_input = $("#add-input"),
    $remove_input = $("#remove-input");

  memory.setInitialState(initialState);
  $txtArea.val(memory.getText());

  $add.on("click", (e) => {
    const newVal = $add_input.val();
    const ar = newVal && newVal.split(",");
    memory.add(ar);
    $txtArea.val(memory.getText());
  });

  $remove.on("click", (e) => {
    const id = $remove_input.val();
    memory.remove(id);
    $txtArea.val(memory.getText());
  });
};

$(document).ready(bindEvents);

【讨论】：