动态替换数组中的值

Question

我有这样的场景。说：让 a = [2,5,6] 让 b = [1,2,3,4,5,6,7,8]。数组 b 显示在方框中，并在单击任何方框时显示。我想要做的是，当单击任何框并且该值与数组 a 中的任何值相同时，我将值替换为其他唯一值，如果它们不一样，我将显示为原样。例如，如果我单击一个值为 2 或 5 或 6 的框，我会将这些值替换为其他值。

一个最小的例子是：

new Vue({

  el: "#app",

  data: {

    a: [2,5,6],

    b: [1,2,3,4,5,6,7,8]

  },

  methods: {

    replaceNumber() {

      // function to replace the values

    }

  }

})

body {

  background: #20262E;

  padding: 20px;

  font-family: Helvetica;

}

#app {

  background: #fff;

  border-radius: 4px;

  padding: 20px;

  transition: all 0.2s;

}

.numbers {

  display: flex;

}

li {

  list-style-type: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <h2>Numbers:</h2>

  <br/>

  <ul class="numbers">

    <li v-for="num in a">

      {{num}}

    </li>

  </ul>

  <br/>

  

  <template>

    <button @click="replaceNumber" v-for="number in b">

    {{ number }}

    </button>

  </template>

</div>

Answer 1

用于indexOf()定位要替换的元素的位置。然后splice()与删除该元素的索引一起使用。然后splice()再次使用将新值插入同一索引。检查上述每种方法的文档以了解它们的语法。

Answer 2

如果在第一个数组中找到，您可以尝试使用随机数，即avar a = [2,5,6]&nbsp;&nbsp;var b = [1,2,3,4,5,6,7,8]&nbsp;a.forEach(function(e){&nbsp; &nbsp; $("#aDiv").append(`<h2>${e}</h2>`);&nbsp;})&nbsp;&nbsp; b.forEach(function(e){&nbsp; &nbsp; $("#bDiv").append(`<h2 class="seconddiv">${e}</h2>`);&nbsp;});&nbsp;&nbsp;$(".seconddiv").on('click',function(){&nbsp; &nbsp; let val= $(this).html();&nbsp; &nbsp; if(a.includes(parseInt(val))){&nbsp; &nbsp; &nbsp; var&nbsp; uniqueNo = 0;&nbsp; &nbsp; &nbsp; &nbsp;do {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uniqueNo=getRandomInt(0,10);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; while (a.includes(parseInt(uniqueNo)));&nbsp; &nbsp; &nbsp; &nbsp;$(this).html(uniqueNo);&nbsp; &nbsp; }&nbsp;})&nbsp;let getRandomInt= (x,y)=>x+(y-x+1)*crypto.getRandomValues(new Uint32Array(1))[0]/2**32|0#aDiv,#bDiv{&nbsp;color:yellow;&nbsp;background-color:black;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maindiv">&nbsp; &nbsp; &nbsp;<div&nbsp; &nbsp;id="aDiv">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; <div id="bDiv" style="margin-top:50px;">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;</div></div>