Удаление элемента из массива, а затем сохраняя свое состояние для дальнейшего использования без использования глобальных переменных

Question

Скажем, у меня есть массив, как определено следующее:

var str = ['H', 'e', 'l', 'l', 'o']; 

У меня есть кнопка, которая, когда пользователь нажимает на он должен удалить первый элемент строки и вернуть полученный массив после удаления (т.е. ['e', 'l', 'l', 'o']). Результирующий массив также должен быть сохранен в следующий раз при нажатии кнопки, следующий следующий элемент в массиве будет удален (т. Е. Результирующий массив будет ['l', 'l', 'o']) и так далее, пока все элементы не будут удалены.

Это очень просто сделать, если массив является глобальной:

var str = ['H', 'e', 'l', 'l', 'o']; 

function remove_first(the_array) { 
    the_array.shift(); 
    return the_array; 
} 

del.onclick = function() { 
    result = remove_first(str); 
} 

Но я хочу, чтобы сделать это, не делая массив глобальным. Как бы вы это сделали?

Answer 1

Вам не нужно делать массив глобальной переменной.

Просто используя возможности закрытия Javascript, вы можете сделать то же самое.

var functionForClosure = function() { 

    var str = ['H', 'e', 'l', 'l', 'o']; 

    function remove_first(the_array) { 
     the_array.shift(); 
     return the_array; 
    } 

    del.onclick = function() { 
     result = remove_first(str); 
    } 
}; 
functionForClosure(); 

Там есть переменная str, доступная для вашей функции onclick; str не является глобальной, но локальной функцией функцииForClosure.

Answer 2

Необходимо определить массив вне обработчика событий, поскольку он должен сохраняться между вызовами обработчика событий.

Но вам не нужно определять массив или функции в глобальной области действия, чтобы эта работа работала, любая общая область в порядке. Таким образом, вы можете использовать IIFE, чтобы создать новую область:

(function() { 

    var str = ['H', 'e', 'l', 'l', 'o']; 

    function remove_first(the_array) { 
     the_array.shift(); 
     return the_array; 
    } 

    del.onclick = function() { 
     var result = remove_first(str); // don't forget `var` here 
    } 

}()); 

Answer 3

Как насчет использования яваскрипта закрытия?

var ns = (function() { 
    var str = ['H', 'e', 'l', 'l', 'o'], 
     removeFirst = function() { 
      str.shift(); 
      return str; 
     }; 

    return { 
     str: str, 
     removeFirst: removeFirst 
    }; 
}()); 

del.onclick = function() { 
    result = ns.removeFirst(); 
    // console.log(ns.str) to see the result of str 
}