JavaScript修改变量值并维持数组打乱后顺序的实现方案

这是因为JavaScript里的字符串属于值类型——当你把gen、race这些字符串变量放进数组chars时，数组存储的是这些字符串的副本，而不是指向原变量的引用。所以之后你修改gen的值，数组里的那个元素根本不会受到影响，它还是原来的"male "副本。

要解决这个问题，我们需要把每个值包装成对象（引用类型）。对象在数组里存储的是引用，而不是副本——修改原对象的属性时，数组里的元素会同步更新。

下面是修改后的完整代码：

<p id="demo"></p>
<script>
// 用对象包装每个属性，这样数组存的是引用
var gen = { value: "male " };
var race = { value: "white " };
var rel = { value: "christian " };

// Fisher-Yates 洗牌算法（假设你之前的shuffle函数类似这个）
function shuffle(array) {
  let currentIndex = array.length, randomIndex;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

// 创建数组并打乱顺序
var chars = [gen, race, rel];
chars = shuffle(chars);

// 封装渲染函数，方便重复调用
function renderChars() {
  // 把数组里的对象的value属性拼接成字符串
  document.getElementById("demo").innerHTML = chars.map(item => item.value).join('');
}

// 初始渲染
renderChars();

// 修改性别变量的值，同时保持数组顺序
gen.value = "female ";
// 重新渲染更新后的内容
renderChars();
</script>

代码说明： #

• 我们把每个字符串变量改成了包含value属性的对象，比如gen = { value: "male " }。
• 数组chars存储的是这些对象的引用，而不是字符串副本。
• 渲染时通过map方法提取每个对象的value属性，拼接成最终字符串。
• 当你修改gen.value时，数组里对应的对象引用指向的value也会更新，重新渲染就能看到最新结果。

这样就能实现你想要的效果：修改原变量值时，保持数组打乱后的顺序不变，同时更新显示内容。

内容的提问来源于stack exchange，提问作者BKS