动态更改数组的特定值
在带有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:3的id:4也是如此，在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,']-');，它帮助我在数组之间添加-符号，并再次将整件事情转换为字符串，并将其作为一个值传递到它来自的文本区域内！
所以我唯一的问题是如何在我的newVals数组中更新getVals的结果？
如果你看了所有这些，就太感谢了！
Stack Overflow用户
发布于 2021-11-05 13:06:48
如果您完全忽略了对象/项中的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);https://stackoverflow.com/questions/69841518
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号