8.1. Вспомним о стеке

Мы уже познакомились со стеком во втором разделе. Если вы забыли, что это такое, рекомендуем перечитать статью и вспомнить основные моменты.

Чтобы закрепить понимание стеков, посмотрим на небольшую задачу: она настолько маленькая, что мы не станем выносить её в отдельную демонстрацию. Вам нужно разработать функцию, которая будет отдавать массив строк для анимации печати. На вход вы получаете строчку вида "ab#c", где # — символ стирания предыдущего символа. А должны вернуть массив ["a", "ab", "a", "ac"]. Можно просто итерироваться по полученному массиву и поочерёдно выводить строчки на экран, чтобы симулировать печать.

Чтобы решить эту задачу, заведём стек для текущего состояния печати. Будем push-ить туда каждый встречающийся символ, кроме #. Если встречаем решётку — вызываем pop. Осталось только при каждом символе сохранять текущее состояние стека в другой массив.

Решение

Визуализация решения

В коде это делается очень просто:

function generateAnimation(string) {
    const stack = [];
    const animation = [];

    for (const char of string) {
        if (char === '#') {
            stack.pop();
        } else {
            stack.push(char);
        }

        animation.push(stack.join(''));
    }

    return animation;
}

В следующей статье посмотрим на интересное применение стека внутри движков, исполняющих JavaScript.