javascript - js数组删除元素?

Question

如上图片, 每个方块都有一个宽,高,X轴,Y轴;
有可能宽占多份, 高占多份; 但宽度最大就占3份, 高度不限;
每次删除一个格子, 下面的格子自动往左往上补齐;

给到数据假如是:

[{id: 1, w: 1, h: 1, x: 0, y: 0},{id: 2, w: 1, h: 1, x: 1, y: 0},{id: 3, w: 1, h: 1, x: 2, y: 0},{id: 4, w: 1, h: 1, x: 0, y: 1},{id: 5, w: 1, h: 1, x: 1, y: 1},{id: 6, w: 1, h: 1, x: 2, y: 1},{id: 7, w: 1, h: 1, x: 0, y: 2},{id: 8, w: 1, h: 1, x: 1, y: 2},{id: 9, w: 1, h: 1, x: 2, y: 2}]

删除id为5的格子后,希望得到的是:

[{id: 1, w: 1, h: 1, x: 0, y: 0},{id: 2, w: 1, h: 1, x: 1, y: 0},{id: 3, w: 1, h: 1, x: 2, y: 0},{id: 4, w: 1, h: 1, x: 0, y: 1},{id: 6, w: 1, h: 1, x: 1, y: 1},{id: 7, w: 1, h: 1, x: 2, y: 1},{id: 8, w: 1, h: 1, x: 0, y: 2},{id: 9, w: 1, h: 1, x: 1, y: 2}]

Answer 1

你提供的规则并不完善，我加了一些。

<script setup>import { ref, computed } from "vue";let data = ref([  { id: 1, w: 1, h: 1, x: 0, y: 0 },  { id: 2, w: 1, h: 1, x: 1, y: 0 },  { id: 3, w: 1, h: 1, x: 2, y: 0 },  { id: 4, w: 1, h: 1, x: 0, y: 1 },  { id: 5, w: 1, h: 2, x: 1, y: 1 },  { id: 6, w: 2, h: 1, x: 0, y: 3 },  { id: 7, w: 1, h: 1, x: 2, y: 3 },  { id: 8, w: 1, h: 1, x: 1, y: 2 },  { id: 9, w: 1, h: 1, x: 0, y: 4 },]);const dataPlus = computed(() => {  const maxX = 3;  let nowXY = { x: 0, y: 0 };  let XYArr = [];  function getXY(target) {    if (XYArr.includes(`x${nowXY.x}y${nowXY.y}`)) {      if (nowXY.x < maxX - 1) {        nowXY.x++;      } else {        nowXY.x = 0;        nowXY.y++;      }      getXY(target);    } else if (target.w > 1) {      let bool = new Array(target.w - 1)        .fill(0)        .every(          (e, i) =>            nowXY.x + 1 + i < maxX &&            !XYArr.includes(`x${nowXY.x + 1 + i}y${nowXY.y}`)        );      if (!bool) {        nowXY.x = 0;        nowXY.y++;        getXY(target);      }    }  }  function setXY(target) {    for (let y = 0; y < target.h; y++) {      for (let x = 0; x < target.w; x++) {        XYArr.push(`x${nowXY.x + x}y${nowXY.y + y}`);      }    }  }  return data.value.map((e) => {    getXY(e);    setXY(e);    Object.assign(e, nowXY);    return e;  });});function styleFun(param) {  let style = {    width: param.w * 100 + "px",    height: param.h * 100 + "px",    top: param.y * 100 + "px",    left: param.x * 100 + "px",  };  return style;}function deleteFun(param) {  data.value = data.value.filter((e) => e.id != param.id);}</script><template>  <main>    <div      v-for="e in dataPlus"      :key="e.id"      :style="styleFun(e)"      @click="deleteFun(e)"    >      {{ e.id }}    </div>  </main></template><style lang="less" scoped>main {  width: 100vw;  height: 100vh;  position: absolute;  top: 0%;  left: 0%;  div {    background-color: #ccc;    border: 1px solid;    position: absolute;    box-sizing: border-box;    display: flex;    justify-content: center;    align-items: center;    font-size: 20px;    color: white;    &:hover {      background-color: rgb(175, 241, 203);      cursor: pointer;    }  }}</style>

Answer 2

我理解的是，你的问题就是想删除数组指定id所在的那一项是吗？是的话可以这样：

const removeIndex = (originalArr, id) => {    const _index = originalArr.findIndex(item => item.id === id);    _index >= 0 && originalArr.splice(_index, 1);}removeIndex(arr, 5); // arr就是你的原始数组