如何使用新输入绘制新射弹？

Question

你正在寻找的是一个对象。您需要将初始字符串拆分为数组，然后将其从数组中转换为对象。我会这样做：

const str = 'a="https://google.com/" b="Johnny Bravo" c="1" d="2" charset="z"';

// Split using RegEx

const arr = str.match(/\w+=(?:"[^"]*"|\d*|true|false)/g);

// Create a new object.

const obj = {};

// Loop through the array.

arr.forEach(it => {

  // Split on equals and get both the property and value.

  it = it.split("=");

  // Parse it because it may be a valid JSON, like a number or string for now.

  // Also, I used JSON.parse() because it's safer than exec().

  obj[it[0]] = JSON.parse(it[1]);

});

// Obj is done.

console.log(obj);

展开片段

上面给了我：

{

  "a": "https://google.com/",

  "b": "Johnny Bravo",

  "c": "1",

  "d": "2",

  "charset": "z"

}

您可以使用类似obj.charsetand 的东西，这会为您z或obj.b为您提供Johnny Bravo。对于正则表达式，这里是演示。

Answer 1

简短的回答：替换var&nbsp;b=document.getElementById('angle').value; var&nbsp;o=document.getElementById('vel').value;和var&nbsp;b=document.getElementById('angle'); var&nbsp;o=document.getElementById('vel');和b和o和b.value和o.value更长的答案：JavaScript中有两种数据类型：原始数据类型和引用数据类型。当您编写a=b时，如果b是基本类型（数字、字符串、布尔值、null 或未定义），则您将获得b的精确副本，但如果b是引用类型（数组、函数或对象），则您将获得 b 的精确副本。&nbsp;a只是与b相同的对象的链接，修改一个对象也会修改另一个对象。您可以将其视为购买书籍与购买在线课程的订阅。如果课程内容发生变化，您的书将不会反映它，但如果您有指向它的链接，您将能够看到更新。相当于买一本书，同时会给你一个 DOM 对象的链接。var b=document.getElementById('angle').value;var b=document.getElementById('angle');var b=document.getElementById('angle');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var o=document.getElementById('vel');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var pro = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x:50,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y:380,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r:15,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v:o.value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theta:b.value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.getElementById('surface');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ctx = canvas.getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var frameCount = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var v0x = pro.v * Math.cos(pro.theta * Math.PI/180);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var v0y = pro.v * Math.sin(pro.theta * Math.PI/180);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var startX = pro.x;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var startY = pro.y;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var g = 9.8;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setInterval(function()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.save();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = "rgba(256, 256, 256, .3)";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.restore();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(pro.y<canvas.height - pro.r && pro.x < canvas.width - pro.r)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.y = startY - ( v0y * frameCount - (1/2 * g * Math.pow(frameCount,2)) );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.x = startX + v0x * frameCount;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.save();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = "rgba(200, 0, 0, 0.9)";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.arc(pro.x,pro.y,pro.r,0,Math.PI*2,true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.closePath();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.restore();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frameCount+=.1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000 / 77);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function start()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.x = 50;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.y = 380;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.v = o.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pro.theta = b.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frameCount = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v0x = pro.v * Math.cos(pro.theta * Math.PI/180);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v0y = pro.v * Math.sin(pro.theta * Math.PI/180);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<canvas id="surface" width="800" height="400"></canvas>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="angle">Angle</label>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name="angle" type="text" id="angle" value="45" placeholder="angle" oninput="start()"/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="velocity">Speed</label>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="velocity" id="vel" value="45" placeholder="velocity" oninput="start()"/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="reset" value="Launch" onclick="start()">&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp;