Javascript Unsorting Array Issue

Question

Всякий раз, когда я пытаюсь установить массив пустым и поместить в него массив копий, он работает только два раза перед разрушением кода. Я пытаюсь вернуться к исходному массиву. Два проблемных спорта прокомментированы в коде «ПРОБЛЕМА», если вы хотите взглянуть. «.one» и «.two» помечены на картинке таблицы, если это помогает любому. Спасибо заранее!

var name; 
var age; 
var sex; 
var person; 
var flagOne; 
var flagTwo; 
var flagThree; 
var array = []; 
var holder = []; 
var rowIndex; 

createTable(); 

/* Modal Scripts */ 

$('.left').click(function(){ 

    $('#name').css('background-color','white'); 
    $('#age').css('background-color','white'); 
    $('#sex').css('background-color','white'); 

    name = $("#name").val(''); 
    age = $("#age").val(''); 
    sex = $("#sex").val(''); 

    $('.form-row:first-child').css('border','0'); 
    $('.form-row:nth-child(2)').css('border','0'); 
    $('.form-row:nth-child(3)').css('border','0'); 

    if($('td>a.delete').css('opacity') == 1){ 
     $('.modal-wrapper').css('display','none'); 
    } 

    else { 
    $('.modal-wrapper').css('display','block'); 
    $('.modal').animate({ 
     opacity:1, 
     marginTop:'-117px' 
    },500); 
} 
}); 

$('.fa-times').click(function(){ 
    $('.modal-wrapper').css('display','none'); 

    name = $("#name").val(''); 
    age = $("#age").val(''); 
    sex = $("#sex").val(''); 

    $('.modal').animate({ 
     opacity:0, 
     marginTop:'-250px' 
    }); 
}); 

$('.modal-background').click(function(){ 
    $('.modal-wrapper').css('display','none'); 

    name = $("#name").val(''); 
    age = $("#age").val(''); 
    sex = $("#sex").val(''); 

    $('.modal').animate({ 
     opacity:0, 
     marginTop:'-250px' 
    }); 
}); 

/* Validation */ 

$('#button').click(function(){ 

    flagOne = false; 
    flagTwo = false; 
    flagThree = false; 

    name = $("#name").val(); 
    age = $("#age").val(); 
    sex = $("#sex").val(); 

    if(name.match(/^([a-zA-Z]{2,15}\s[a-zA-z]{2,15})/)){ 
     flagOne = true; 
    } 
    else { 
      flagOne = false; 
    } 

    if (age < 0 || age > 130 || isNaN(age) || age == '') { 
      flagTwo = false; 
    } 
    else { 
     flagTwo = true; 
    } 

     if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){ 
      flagThree = true; 
     } 
     else { 
      flagThree = false; 
     } 

     if(flagOne === false || flagTwo === false || flagThree === false){ 

      if(flagOne === false){ 
       $('#name').css('background-color','#FF7F7F'); 
      } 
      else { 
       $('#name').css('background-color','white'); 
      } 

      if(flagTwo === false){ 
       $('#age').css('background-color','#FF7F7F'); 
      } 
      else { 
       $('#age').css('background-color','white'); 
      } 

      if(flagThree === false){ 
       $('#sex').css('background-color','#FF7F7F'); 
      } 
      else { 
       $('#sex').css('background-color','white'); 
      } 
     } 

     else if(flagOne === true && flagTwo === true && flagThree === true) { 
      $('.modal-wrapper').css('display','none'); 
      $('.modal').animate({ 
        opacity:0, 
        marginTop:'-250px' 
       }); 

      storeObject(); 
     } 
}); 

/* Delete Button */ 

$('.right').click(function(){ 

    if($('td>a.delete').css('opacity') == 1){ 
     $('td>a.delete').css('opacity','0'); 
    } 
    else if($('td>a.delete').css('opacity') == 0){ 
     $('td>a.delete').css('opacity','1'); 
    } 
}); 

$(document).on('click','.delete',function(){ 
    rowIndex = $('tr').index($(this).closest('tr')); 
    array.splice((rowIndex-1),1); 
    testArray(); 
    $('td>a.delete').css('opacity','1'); 
}); 

/* Name Sort */ 

$(document).on('click','.one',function(){ 

    if($('.one').hasClass('rotate')){ 
     $('.one').removeClass('rotate'); 

     array = holder.splice(0); 

     testArray(); 
    } 
    else{ 

    $('.one').addClass('rotate'); 
    $('.two').removeClass('rotate'); 

    array.sort(compareNames); 

    testArray(); 
    $('.one').addClass('rotate'); 
} 
}); 

function compareNames(a,b) { 
    if (a.name < b.name){ 
     return -1; 
    } 
    if (a.name > b.name){ 
     return 1; 
    } 
    else { 
     return 0; 
    } 
} 

/* Age Sort */ 

$(document).on('click','.two',function(){ 

     if($('.two').hasClass('rotate')){ 
      $('.two').removeClass('rotate'); 

      array = holder.splice(0); 

      testArray(); 
     } 
     else{ 

     $('.two').addClass('rotate'); 
     $('.one').removeClass('rotate'); 

     array.sort(compareNumbers); 

     testArray(); 
     $('.two').addClass('rotate'); 
    } 
}); 

function compareNumbers(a,b) { 
    return a.age - b.age; 
} 

/* Array Creation */ 

function storeObject() { 

function Person(name,age,sex){ 
    this.name=name; 
    this.age=age; 
    this.sex=sex; 
} 

person = new Person(name,age,sex); 
array.push(person); 
holder.push(person); 

testArray(); 
} 

/* Test Array */ 

function testArray() { 
    if(array.length == 8){ 
     createTable(); 
     alert('Table Limit Reached!'); 
    } 
    else if (array.length > 8){ 
     array.pop(); 
     alert('Too Many Rows!'); 
    } 
    else { 
     createTable(); 
    } 
} 

/* Table Creation */ 

function createTable() { 
    var table = "<table><tr><td>Name<span class='special one'>▲</span></td><td>Age<span class='special two'>▲</span></td><td>Sex</td></tr>"; 
    for(var i=0;i < array.length;i++){ 
     if (array.length > 0){ 
    table += "<tr><td>" + array[i].name + "</td>"; 
    table += "<td>" + array[i].age + "</td>"; 
    table += "<td>" + array[i].sex + "<a class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></a></td></tr>"; 
    } 
    } 
    table += "</table>"; 
    document.getElementById("tablePrint").innerHTML = table; 
} 

Answer 1

Вы не делаете копию массива, назначив ее новой переменной. Если вы хотите скопировать массив, вы должны попробовать array.slice(0), который должен создать новый экземпляр этого массива.

Поступая:

array = []; 
array = holder; 

Вы делаете переменную array ссылаться на переменную holder. Во втором запуске, когда переменная array уже ссылается на переменную holder, вы делаете ее пустой, вызывая array = []. Вот почему ваш код перестает работать после второго запуска.

Предлагаемое решение:

var array = holder.slice(0);