动态替换数组中的值

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

如果在第一个数组中找到，您可以尝试使用随机数，即a

var a = [2,5,6] 

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

 a.forEach(function(e){

    $("#aDiv").append(`<h2>${e}</h2>`);

 })

 

  b.forEach(function(e){

    $("#bDiv").append(`<h2 class="seconddiv">${e}</h2>`);

 });

 

 $(".seconddiv").on('click',function(){

    let val= $(this).html();

    if(a.includes(parseInt(val))){

      var  uniqueNo = 0;

       do {

          uniqueNo=getRandomInt(0,10);

       }

        while (a.includes(parseInt(uniqueNo)));

       $(this).html(uniqueNo);

    }

 })

 

let getRandomInt= (x,y)=>x+(y-x+1)*crypto.getRandomValues(new Uint32Array(1))[0]/2**32|0

#aDiv,#bDiv{

 color:yellow;

 background-color:black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="maindiv">

     <div   id="aDiv">

  

     </div>

    <div id="bDiv" style="margin-top:50px;">

  

     </div>

</div>