動態更改數組的特定值

Question

我在 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:3等的陣列內的每個鍵后id:2 。 這個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,']-'); 這有助於我在數組之間添加-符號並將整個內容再次轉換為字符串並將其作為值傳遞到它來自的 textarea 中！

所以我唯一的問題是如何在我的getVals數組中更新newVals的結果？

非常感謝您閱讀所有內容！

Answer 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>

Answer 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);

動態更改數組的特定值

問題描述

2 個解決方案

解決方案1
1 2021-11-04 15:36:24

解決方案2
0 2021-11-05 13:06:48

`index.html`

`MyMemory.js`

`index.js`

動態更改數組的特定值

問題描述

2 個解決方案

解決方案1 1 2021-11-04 15:36:24

解決方案2 0 2021-11-05 13:06:48

index.html

MyMemory.js

index.js

解決方案1
1 2021-11-04 15:36:24

解決方案2
0 2021-11-05 13:06:48

`index.html`

`MyMemory.js`

`index.js`