时间戳

首页 > 解决方案 > Array.splice 替换多个值（虽然设置为只替换一个）

javascript - Array.splice 替换多个值（虽然设置为只替换一个）

问题描述

为了学习编码，我开始用 Javascript 和 HTML 制作我自己的小型 idle-clicker-RPG。现在我的库存管理代码让我很头疼，因为它不会以 1:1 的比例删除和添加项目，而是复制它们（见下文）。但我不知道为什么。当项目共享相同的“类型”时，它似乎只会发生（见代码）

我已经修剪了代码以找出在哪里。制作变量让，改变顺序和时间（添加settimeout），切断“拼接”功能并单独用于删除和添加。

HTML

<td><p><div id="Pos1" onclick="equip(Inventory[0], 0)"></div></td>
etc....

JavaScript

var Stick = {
    Type : "MainHand",
};

var Knife = {
    Type : "MainHand",
};

var Inventory = [];

var Equipped = {
    MainHand : {Name : ""},
};

function equip(item, position){
    let LItem = item;
    let LPosition = position;
    let EQItem = Equipped[LItem.Type]
    if (EQItem.Name !== "") {
    Inventory.splice(LPosition, 1, EQItem);
    Object.assign(EQItem, LItem);
    } else {
    Object.assign(EQItem, LItem);
    Inventory.splice(LPosition, 1);
    };
};

当通过 html 在库存中压入物品时，我希望功能“装备”执行以下操作：

  1. 检查该地点是否尚未装备物品

1.1 从库存中删除选定的项目

1.2 将当前装备的物品添加到库存中

1.3 装备选定物品

  1. 如果未配备任何设备（2. 到 2.2 按预期工作）

2.1 从库存中删除选定的项目

2.2 装备选中物品

在 1.1-1.3 发生的情况是（我不确定顺序）选定的物品已装备，但未装备的物品（似乎已添加到库存中）和其他相同类型的物品随机更改为所选项目。这不会发生在所有相同类型的项目上——只有一些——但在更改足够多的时间后，所有相同类型的项目最终都会是相同的项目。

标签： javascripthtmlarrays

解决方案

看来您正在尝试一种面向对象的方法。

我不确定我是否完整地理解了您的问题。这是实现“设备”和“库存”的另一种方式。也许你喜欢它，它有帮助。

但要小心，这需要 ECMAScript 6（Babel 转译）。

class Mainhand {
  static type() {
    return "MainHand";
  }
};

class Knife extends Mainhand {};
class Stick extends Mainhand {};

class Inventory {
  constructor(items) {
    this.items = items;
  }
};

class Equipment {
  constructor() {
    this.equipped = {};
  };
  
  equip(item) {
    let type = item.constructor.type();
    
    // this one is used to create a new "equipped" list instead of modifing the previous one.
    let newEquipment = Object.assign({}, this.equipped);
    newEquipment[type] = item;
    
    this.equipped = newEquipment;
  }
};

document.user = {
  inventory: new Inventory([
    new Stick(),
    new Knife(),
  ]),
  equipment: new Equipment(),
};

document.querySelectorAll('.equip').forEach(function(button) {
  button.addEventListener('click', function (e) {
    e.preventDefault();
    
    let item = document.user.inventory.items[e.target.dataset.inventoryKey];    
    document.user.equipment.equip(item);
    
    let currentMainHandName = document.user.equipment.equipped.MainHand.constructor.name;
    
    document.getElementById("currentMainHand").innerHTML = currentMainHandName;
  });
});
<button class="equip" data-inventory-key="0">I want a stick</button>

<button class="equip" data-inventory-key="1">I want a knife</button>

<h2>Current Mainhand</h2>
<p id="currentMainHand" style="color: red;"></p>

推荐阅读