Структура данных, которую также необходимо знать внешнему интерфейсу (время от времени обновляется)

Слабость передней части

Когда дело доходит до внешнего интерфейса, все, что вы имеете в виду, — это макет, отображение данных, изменение стилей и так далее. Но откуда взялись данные? Бэкэнд дается бэкендом. А как насчет структуры данных? Для чего нужна задняя часть.

Это мягкое место в передней части. Наш бизнес не требует от нас глубокого понимания структур данных.Структуры данных и алгоритмы являются основой программиста. Будь то фронтенд-разработка, бэкэнд-разработка или машинное обучение больших данных с помощью ИИ, я думаю, что необходимы определенные знания структур данных и алгоритмов (кроме фронтенда, остальные — сильные жесткие потребности...), фронт -конечные партнеры изучают структуру данных, каковы преимущества? Измените образ мышления, глубоко поймите некоторые процессы выполнения js и неосознанно продумайте в коде оптимизацию производительности на уровне кода. Есть много применений, так что давайте начнем.

Что такое структура данных?

Структура данных — это то, как компьютер хранит и организует данные. Структура данных — это набор элементов данных, которые имеют одно или несколько определенных отношений друг с другом. (из энциклопедии Baidu)

Что означает хранение компьютера? Это структура хранения, которую мы часто говорим.

Как насчет того, как организованы данные и конкретные отношения? это наша логическая структура.

Совокупность наборов данных, объединенных в соответствии с определенной структурой хранения и логической структурой, является структурой данных.

Вот некоторые из моих пониманий. Поэтому, когда передо мной будет находиться структура данных, я буду учитывать, в каком виде она хранится и какую особую логику она должна сочетать. Каковы преимущества этого подхода? Когда я это понимаю, у меня есть базовое понимание этой структуры данных.

Прежде всего, давайте поговорим о линейной таблице. Линейная таблица представляет собой логическую структуру данных. Между элементами существует отношение один к одному. В вашей линейной таблице есть только один элемент до или после любого элемента, и он не появится.Случай, когда предыдущий или следующий элемент любого элемента соответствует нескольким элементам.

Линейные таблицы делятся на общие линейные таблицы и ограниченные линейные таблицы. Общая линейная таблица подобна массиву. Это наиболее распространенный общий линейный список, а ограниченный линейный список — это стек и очередь.

Ладно ладно, приступим к делу

привет удивительная структура стека

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

Поэтому для нас естественно реализовать структуру стека.

контейнер: массив

Метод: push и pop методы массивов Приступим к реализации конструктора стека

function Stack(){
    // 用let创建一个私有容器，无法用this选择到dataStore；
    let dataStore = [];
    // 模拟进栈的方法 
    this.push = function(element){
        dataStore.push(element);
    };
    // 模拟出栈的方法，返回值是出栈的元素。
    this.pop = function(){
        return dataStore.pop();
    };
    // 返回栈顶元素
    this.peek = function(){
        return dataStore[dataStore.length-1];  
    };
    // 是否为空栈
    this.isEmpty = function(){
        return dataStore.length === 0 
    };
    // 获取栈结构的长度。
    this.size = function(){
        return dataStore.length;
    };
    //  清除栈结构内的所有元素。
    this.clear = function(){
        dataStore = [];
    }
}

Итак, ребята, мы уже написали конструктор стека.

// 一个单独的栈生成了。
let stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(5);
stack.peek(); // return 5
stack.size(); // return 3
stack.clear();
stack.peek(); // undefined

Реализована базовая структура стека. Это очень просто. Но какая польза от этой штуки в js?

Использование в js

Это очень полезно Во-первых, все мы знаем, что рекурсия сообщит о переполнении стека, если граничное значение не установлено. В чем смысл? ? ? Когда наш код js будет выполнен, он сгенерирует стек вызовов (который заполнен всеми выполняющимися функциями)

В этом стеке вызовов первое, что помещается в стек, то есть то, что находится внизу, — это глобальная функция.Эта глобальная функция выскочит из стека только после закрытия браузера, и стек исчезнет. когда браузер закрыт. Когда браузер выполняет функцию, он добавит исполняющую функцию в стек вызовов, а при ее вызове попадет в стек вызовов (так проще понять), и управление будет передано этой Функции, если есть являются другими функциями в этой функции, когда другие функции выполняются, они делают то же самое и помещают их в стек. После завершения выполнения любой функции, извините, он выскочит из стека. выйти из стека вызовов. Поскольку в стеке вызовов слишком много контента, это означает, что мусорные ресурсы не перерабатываются, что приводит к зависанию браузера, что неразумно, и после выполнения стек будет откатываться.

После извлечения из стека выполнение возвращается к содержащей его функции.

Три сценария стека

1: Что за ситуация рекурсия?

当我们没有考虑递归的出口的时候，
简化函数
function fn(){
    let a = 1; fn()
}
fn()  // 报错！！！！ Maximum call stack size exceeded
      // 最大调用堆栈大小超过

Когда я не устанавливаю выход, ни одна из функций не выскочит из стека.После непрерывных вызовов цикла ваш стек точно не будет бесконечным, поэтому я должен напомнить вам, что стек переполняется и программа сообщает об ошибке.

2: Знаете ли вы диаграмму луковой модели редукции?

Так называемая onion model of redux (на самом деле, я никогда не пользовался redux, но слышал обмен схемой onion model на собрании по обмену компанией), так же можно понять следующую функцию при написании интерфейса экспресса рамки.

После того, как наш лук будет выполнен в самом внешнем слое, он войдет в него, а затем зациклится после самого внутреннего слоя.

function fn1(){
    console.log('fn1 first');
    fn2()
    console.log('fn1 last');
}
function fn2(){
    console.log('fn2 first');
    fn3()
    console.log('fn2 last');
}
function fn3(){
    console.log('fn3 first');
    console.log('fn3 last');
}
fn1()

Из результатов печати мы видим, что когда fn1 выполняется, она передает управление fn2, когда встречает fn2 и помещает его в стек.Когда fn2 выполняется и встречает fn3, она помещает управление в стек и передает управление fn3. выполняется, он возвращается в стек. , управление возвращается к fn2, затем код за fn2 будет продолжать выполняться, а код fn2 будет выполняться и распаковываться. Продолжайте выполнять код после fn1, пока не выскочит. Может быть, эта простая модель всем покажется понятнее, а если будет более сложное наполнение, не забудьте нарисовать картинку и не ошибиться.

3: Замыкания, которые вы забудете, если не скажете их

Почему использование слишком большого количества замыканий приводит к зависанию программы и снижению производительности? ? ?

Этот вопрос очень озадачивает, но после того, как задействуется стек вызовов, думаю, это можно объяснить (в код лезть не буду, можете поискать код замыкания и посмотреть) Как замыкания получают частные переменные? После выполнения функции она должна быть извлечена из стека после выполнения.

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var C = A();
C();// 1
C();// 2
C();// 3

Простите, что нарушил обещание, поэтому давайте облегчим всем понимание последней волны кода.

Когда функция A выполняется, мы обнаруживаем, что в процессе выполнения встречается функция B, и она начинает вызывать и продвигать выполнение стека.После завершения выполнения управление возвращается к функции A, а затем возвращает B функция. Ссылка на переменную count хранится в функции B, и вы просто возвращаете ее? ? ? ? Ну, вы можете сделать это, если хотите.

Функция B выталкивается во внешний мир (внешнее тело функции), B присваивается C. Ну, C нужна поддержка переменной count, а count не может покидать память (то есть не может собирать мусор) ; что я должен делать? После выполнения функции А я тоже должен уйти (после выполнения функции переменные внутри функции будут переработаны). Прошу прощения, функция, выполняемая снаружи, все еще имеет ссылку на вас, тогда, извините, не выходите из стека, и не разрешается покидать стек вызовов, потому что окружение переменной count нужно быть сохранены.

Что ж, в каждом случае будет несколько функций, которые невозможно расстегнуть, и содержимое стека вызовов будет накапливаться все больше и больше. Будет застревать все больше и больше. В автобусе наши пассажиры выходят из автобуса при подъезде к остановке, но всегда есть несколько пассажиров, которые не выйдут из автобуса. , Ну, это будет становиться все медленнее и медленнее.

Пришло время закругляться

Когда я не разбираюсь в стеке, мне трудно думать о вышеперечисленных ситуациях. Структура данных действительно меняет мое мышление. Все точки знаний проверены и закреплены в этих основах. Я не думаю, что структура данных должна be Внешний бонусный элемент, но предмет встречи. В конце концов, я закончу очень классическим высказыванием, которое я слышал.

Код, который мы пишем, предназначен не для того, чтобы лучше общаться с людьми, а для того, чтобы лучше общаться с машинами.

Наконец, сделайте рекламу (учебный публичный аккаунт, который мы поддерживаем вместе)

Публичный аккаунт в основном дляЮниор/Фрешбеременность. Контент включает в себя ямы, которые мы прошли от новых студентов до развития на рабочем месте, а также наши еженедельные планы обучения и резюме обучения. содержание будет включатькомпьютерная сеть,алгоритми т.д.Фронтенд, Бэкенд, Androidи так далее~

Статьи других друзей нашей группы:

Android-друзья

Java-друзья