Question

我通过更改数组通常显示的索引来对数组中的所有元素进行改组。它工作正常，但问题是我想在重新整理数组之前保留数组状态，但是它无法正常工作，因为在我整理数组之前保存数组时，该数组的第一个调用与经过整理的数组具有相同的数组状态。我想知道为什么吗？

请参见下面的行为说明...

$(document).ready( event=>{
        let imager =[];

       $("img").map( (n,e)=>{
           imager.push({n,e})
       })
       console.log(imager)   //  saved version of imager before I shuffle :Why it takes the state of the shuffled array here
       shuffle2(imager)  // I shuffle the array
       console.log(imager)  // shuffled version
    })



// these are  images element in the dom inside html
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_001.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_002.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_003.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_004.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_005.jpg">
 <img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_006.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_007.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_008.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_009.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_010.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_011.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_012.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_013.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_014.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_015.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_016.jpg">


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

Answer 1

使您通过带有引用的数组进行检查

https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c

您可以通过使用reduce来使用函数式编程

const shuffledArray = [6,8,4,9,6].reduce((a,x,i)=>{a.splice(Math.floor(Math.random()*(i+1)),0,x);return a},[]);

Answer 2

shuffle方法正在变异（更改）原始数组。您可以使用jQuery extend方法对原始数组进行深层复制：

$(document).ready( event=>{
    let origImager = [];
    let imager;

    $("img").map( (n,e)=>{
        origImager.push({n,e})
    });

    console.log(origImager)   //  saved version of imager before I shuffle

    imager = $.extend(true, [], origImager); // creates a copy so that the original is not modified
    shuffle2(imager)  // I shuffle the array
    console.log(imager)  // shuffled version
})

为什么第二个呼叫会覆盖第一个呼叫的结果？

2 个答案: