Несколько практических советов по оптимизации JavaScript, которые стоит знать

Как быстро начать работу с VUE3.0: Войдите в обучение

«Сложность:?» « Рекомендуемое время чтения: 5 min »

Основное видео

сокращает код лапши if...else.

• Как только мы напишем более двух функций if...else

• , нам следует подумать о том, существует ли лучший метод оптимизации.
• Например, теперь нам нужно посчитать цену еды в Май Лао по названию, вы можете это сделать.

• При таком способе написания в теле функции будет много операторов условных суждений. Когда мы в следующий раз захотим добавить продукт, нам нужно будет изменить логику функции и добавить оператор if...else . открытие и закрытие в определенной степени. Принцип заключается в том, что когда нам нужно добавить логику, мы должны попытаться решить проблему изменения требований, расширяя программный объект, а не модифицируя существующий код для завершения изменения.
• Это очень классический метод оптимизации. Мы можем использовать структуру данных, похожую на Map для сохранения всех продуктов. Здесь мы непосредственно создаем объект для ее хранения.

• Таким образом, нам не нужно менять логику getPrice , когда нам понадобится добавить еще один продукт в следующий раз. Конечно, больше людей здесь предпочитают использовать foodMap непосредственно там, где он используется. Я просто привел простой пример. эта идея.
• Тогда некоторые студенты спросят: а что, если я не хочу использовать только строки для key ? Тогда вы можете использовать new Map . Идея аналогична, и для хранения изменений расширена дополнительная сущность.

Конвейерные операции заменяют избыточные петли.

• Есть такой список продуктов питания Май Мулао.

• Если вы хотите найти еду, принадлежащую набору 1, как бы вы ее нашли?
• Вышеупомянутый метод мы часто использовали раньше. Очевидно, что наша замена filter и map вместо цикла for может не только сделать код более рациональным, но и сделать семантику более понятной. Таким образом, мы можем сразу увидеть, что массив сначала过滤, а затем重组.

Find заменяет избыточный цикл

• или приведенный выше пример. Если мы хотим найти конкретную еду по значению атрибута в этом массиве объектов еды, можно использовать find .

include заменяет избыточные циклы

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

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

result return value

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

Ранний возврат

• Однако использование result в качестве возвращаемого значения, приведенного выше, применимо не во всех ситуациях. Иногда нам нужно завершить тело функции раньше, чтобы не дать последующим коллегам прочитать избыточные программы.

• В следующем примере, когда наш selectedKey не существует, мы должны немедленно return , чтобы нам не нужно было продолжать чтение следующего кода, иначе это приведет к значительному увеличению затрат на чтение при работе с более сложными функциями.

Чтобы сохранить объект в целости и сохранности

• , часто, когда мы получаем данные, возвращаемые серверной частью через запрос, они будут обработаны в соответствии с некоторыми атрибутами. Если необходимо обработать несколько атрибутов, многие студенты привыкнут к использованию. первый метод.
• Но на самом деле эта привычка плохая, потому что, когда вы не уверены, нужно ли этой функции добавлять атрибуты зависимости в будущем, вам следует сохранять целостность объекта. Как я уже упоминал в своей прошлой статье, научитесь принимать изменения . getDocDetail не ограничивается использованием icon и content , в будущем могут быть такие атрибуты, как title и date , поэтому мы могли бы также передать весь объект напрямую, что не только сократит список параметров, но и сделает код более удобным. читаемый.

Умное использование операторов.

• Когда нам нужно создать новую переменную, а иногда нам нужно проверить, является ли переменная, на которую ссылается ее значение, null или неопределенной, мы можем использовать простую запись.

В конце статьи

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

[Рекомендуемые видеоуроки: веб-интерфейс]

Выше приведены подробные сведения о нескольких практических советах по оптимизации JavaScript, которые стоит знать. Чтобы получить дополнительную информацию, обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!