Question

在JS中，我有一个变量列表，我将其改组。我想维护shuffle的顺序，但是更改列表中变量的值。有没有办法做到这一点？下面是我的代码示例。我在评论中解释了我想要的内容。

<p id="demo"></p>

<script>
var gen = "male "
var race = "white "
var rel = "christian "

var chars =[gen,race,rel]
chars = shuffle(chars); 

document.getElementById("demo").innerHTML = chars+"";

/*prints for example "white christian male " which is what I want

/*lets say I want to change the gender, and maintain the newly shuffled order (race-rel-gen in this case)*/ 

/* The below doesn't work. I want it to print "white christian female ", but it just reprints the original string*/

gen = "female "

document.getElementById("demo").innerHTML = chars+"";
</script>

Answer 1

考虑到你想要保持预先洗牌的顺序，你可以尝试使用一个对象，而不是字符串，然后它将继续引用。像这样：

/* function to convert your array of objects into a pretty string */
const arrtoStr = (arr) => arr.map((obj) => obj.value).join(' ')

var gen = { value: "male" }
var race = { value: "white" }
var rel = { value: "christian" }

var chars =[gen,race,rel]
chars = shuffle(chars); 

//will output, for instance: "white christian male"
document.getElementById("demo").innerHTML = arrtoStr(chars);

// change object's key named 'value'
gen.value = "female"

//will output: "white christian female"    
document.getElementById("demo").innerHTML = arrtoStr(chars);

Answer 2

您可以使用map对象和一些补充功能来处理此问题。

let char = new Map([
  ['gen', 'male'],
  ['race', 'white'],
  ['rel', 'christian'],
  ["order", shuffle([0,1,2])],
  ["display", ['gen', 'race', 'rel']]
]);

function shuffle(arr) {
  return arr.sort(_ => Math.random() > .5);
}

function display(mItm) {
return mItm.get("order").map(itm => mItm.get(mItm.get("display")[itm])); 
}

//display char
document.querySelector("#demo").innerHTML += "</br>" + display(char);

//display new race
char.set("race", "blue");
document.querySelector("#demo").innerHTML += "</br>" + display(char);

// reshuffle
char.set("order", shuffle(char.get("order")));
document.querySelector("#demo").innerHTML += "</br>" + display(char);

<p id="demo"></p>

Answer 3

如果我理解正确，下面的解决方案应该有效。保持person对象和order数组分开可以为您提供更大的灵活性。我为shuffle使用Lodash作为方便。

<强> CodePen Demo

this.person = {
 gen: "male",
 race: "white",
 rel: "christian"
};

this.order = ["gen", "race", "rel"];

function output() {
  let temp = [];
  this.order.forEach((key) => {
    temp.push(this.person[key]);
  });
  document.getElementById("demo").innerHTML += temp.join(", ") + "<br>";
}

// shuffle the order of properties
_.shuffle(this.order);

// output original data
output();

// change specifics, but keep the order of properties
this.person["gen"] = "female";
output();

this.person["race"] = "black";
output();

this.person["rel"] = "jewish";
output();

Answer 4

您可以在分配新变量值后再次分配数组，如下所示：

var gen = "male "
var race = "white "
var rel = "christian "

var chars =[gen,race,rel]
chars = shuffle(chars); 

document.getElementById("demo").innerHTML = chars+"";


gen = "female "
var chars =[gen,race,rel]
chars = shuffle(chars); 
document.getElementById("demo").innerHTML = chars+"";

jsFiddle： https://jsfiddle.net/AndrewL64/p6rgo01a/

或者像这样创建一个可重用的函数：

function newVal(gen, race, rel) {
    var chars =[gen,race,rel]
    chars = shuffle(chars);
    document.getElementById("demo").innerHTML = chars+"";
}

newVal('male ','white ', 'christian ');

newVal('female','white ', 'christian ');

jsFiddle： https://jsfiddle.net/AndrewL64/p6rgo01a/1/

Answer 5

你可能会被问到错误的问题，或者你的原始意图没有反映在问题上，但据我所知，你正在寻找那样的事情。

var races = ["caucasian", "ethiopian", "malayan", "american", "mongolian"];
var beliefs = ["jewish", "buddhist", "muslim", "christian", "shintoist"];
var genders = ["male", "female"];

var randomArrayElement = function(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function makeCombo(r, b, g) {
  var race = randomArrayElement(r);
  var belief = randomArrayElement(b);
  var gender = randomArrayElement(g);
  return [race, belief, gender].join(" ");
}

document.querySelector("button").addEventListener("click", function(e){
  document.getElementById("profile-area").innerText = makeCombo(races, beliefs, genders);
})

<p id='profile-area'></p>
<button>Generate a profile</button>

Answer 6

您应该定义一个随机播放功能。像这样：

// define shuffle function
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

然后你可以用chars作为参数调用这个函数来创建一个像这样的混洗数组：

var chars = [gen, race, rel];

然后您可以将结果输出为如下字符串：

document.getElementById("demo").innerHTML = shuffle(chars).join(" ");

join(" ")用空格替换逗号。

选项1）使用新值重新洗牌

由于您的原始chars数组的顺序没有随机播放，您可以通过执行以下操作来更改值：

chars[0] = "female";

您可以通过再次调用shuffle函数来更新DOM，如上所示。

选项2）保持随机排序顺序输出更新值

要保持随机排序，但是再次使用更新值输出数组，则需要将混洗输出存储在新变量中。你会得到这样的东西：

var chars = [gen, race, rel];
var shuffled = shuffle(chars);

document.getElementById("demo").innerHTML = shuffled;

// change value of gen
shuffled[shuffled.indexOf("male")] = "female";

// output again
document.getElementById("demo").innerHTML = shuffled;

在Java Script中更改变量

6 个答案: