我在 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:#]
Great! Now I can simply change only the [0] key and substract 1 from their values, making 3 into 2 and 4 into 3 and so on until the array ends. I do it like this:
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));
}
}
If I do console.log(newVals) I get the correct changed values:
[id:2
[id:3
Yes! It worked but... now, how do I put these new values back to the original getVals array? The final form that I need to get is this:
[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:#]
It's the same string you saw at the start of this post only that the id:2 key is now deleted and all the following keys have their id:'s substracted by 1.
Finally I will do: getVals.toString().replace( /],/g,']-'); which helps me add the - symbol in-between the arrays and convert the whole thing into a string again and pass it as a value inside the textarea where it came from!
所以我唯一的問題是如何更新陣列newVals內部的結果getVals？
非常感謝您閱讀所有內容！
uj5u.com熱心網友回復：
我強烈建議您將 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>uj5u.com熱心網友回復：
如果您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://www.uj5u.com/qiye/349538.html
標籤：javascript 查询 数组