Чтобы глубоко погрузиться в JavaScript, вам нужно освоить эти 36 концепций.

Эта статья была одобрена первоначальным автором

Автор: Махди Резви Переводчик: Front-end Xiaozhi Источник: medium

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

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

Если вам нравится язык программирования, вы должны понимать и осваивать его концепции одну за другой.

перечислено здесь36 JavaScriptКонцепции, вам необходимо освоить эти концепции, чтобы стать фронтенд-разработчиком, который лучше понимает JS.

1. Выполнение стека вызовов

Все мы знаем о переполнении стека, но знаете ли вы, что вызывает переполнение стека?Переполнение стека связано с некоторыми ошибками манипулирования стеком вызовов.

Понимание стека вызовов даст вам четкое представление о том, как выполняются такие языки программирования, как JS.

2. Примитивные типы данных

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

Здесь мы будем ценитьbarприсвоить константуfoo, это примитивный типstring. Все это знают. Но вы, юные герои, задумались над вопросом,stringЭто базовый тип данных, как я могу вызвать метод?

Странно?

Эта функция называетсяавтобокс. Всякий раз, когда примитивный тип читается, серверная часть JS создает соответствующийбазовый объект типа оболочки, чтобы мы могли вызывать некоторые методы для управления данными.

Начнем с примера выше:

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

Переменнаяfooявляется примитивным значением, это не объект, у него не должно быть методов. Но JS внутри выполняет для нас кучу обработки (т.е.коробка), чтобы он мог вызвать метод, механизм реализации следующий:

СоздайтеStringэкземпляр типа
вызвать указанный метод в экземпляре
уничтожить этот экземпляр

const foo  = new String("bar");
foo.length
foo === 'bar'
foo = null

Имея четкое представление о примитивных типах данных, мы должны знать, как возникают эти «странные» ситуации, и логику, стоящую за ними.

3. Типы значений и ссылочные типы

В последнее время я был сбит с толку тем, как работает «передача по ссылке» в JS. Хотя я знаю такие языки, как C и Java,“按引用传递”а также“按值传递”концепция, но я не уверен, как это работает в JS.

Знаете ли вы, что переменные, присвоенные непримитивным значениям в JS, ссылаются на это значение? Ссылка указывает на ячейку памяти, где хранится значение. .

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]

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

Поняв концепции типов значений и ссылочных типов, вы лучше поймете, как присваивать значения и ссылки на память переменным.

4. Принуждение

Эта концепция в основном объясняет разницу между неявным и явным приведением типов. Это одна из немногих областей фронтенд-разработки, которая сбивает с толку JS. дляНеявное принуждениеЭто особенно верно для концепции , потому что она ведет себя по-разному для разных типов данных.

Это самый распространенный тест на JS-интервью.

Number('789')   // 显式
+'789'          // 隐式
789 != '456'    // 隐式
9 > '5'         // 隐式
10/null          // 隐式
true | 0        // 隐式

Когда вы освоите явное и неявное преобразование типов, поздравляем вас с пониманием JS.

5. Оператор сравнения и оператор typeof

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

Чтобы понять разницу между этими двумя братьями, мы можем использоватьtypeofчтобы увидеть тип сравниваемого значения.

typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"
typeof [] // "object"
typeof null // "object"

6. Область действия JavaScript

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

Понимание области видимости помогает нам эффективно использовать JavaScript. мы также должны понятьглобальная областьИ блочная и функциональная область, также известная как лексическая область. Поначалу область JS может сбивать с толку, но как только вы поймете, как все работает внутри, работа с ней может стать очень увлекательной.

7. Заявления и декларации

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

Мы должны знать разницу между выражением и объявлением, что очень полезно для всестороннего понимания JS.

8. Непосредственно вызываемые функциональные выражения и модули

IIFE: Immediately Invoked Function Expression, что означает немедленно вызываемое функциональное выражение, то есть функция вызывается немедленно при ее объявлении. Он в основном используется, чтобы не загрязнять глобальную область видимости. Позже были введены модули ES6, чтобы обеспечить стандартный способ избежать загрязнения глобальной области видимости, хотя некоторые утверждают, что это не так.IIFEпрямая замена.

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

9. Очереди сообщений и циклы событий

так какMDNКак сказано в документации, в JavaScript реализована модель параллелизма, основанная на цикле событий, который отвечает за выполнение кода, сбор и обработку событий и выполнение подзадач в очереди. Эта модель сильно отличается от моделей других языков, таких как C и Java.

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

10. Временной интервал

Чтобы запланировать вызов функции в JS, вы можете использовать следующие две функции:

setTimeoutПозволяет нам запускать функцию один раз через определенный интервал времени.
setIntervalПозволяет нам многократно запускать функцию, начиная с определенного интервала времени и непрерывно повторяя этот интервал.

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

11. JS-движок

Движок JavaScript — это компьютерная программа или интерпретатор, который выполняет код JS. JS-движки могут быть написаны на многих языках. Например, ядро V8, управляющее браузером Chrome, написано на C++, а ядро, управляющее браузером Firefox, написано на C++.SpiderMonkeyДвижок написан на C и C++.

Чтобы писать эффективный код, вы должны понимать, какой JS-движок вы используете. использоватьwebviewмобильных разработчиков уделяют этому особое внимание.

12. Побитовые операции

Побитовые операции обрабатывают значения как位(0 и 1) вместо десятичных, шестнадцатеричных или восьмеричных чисел. Побитовые операторы выполняют свои операции над такими двоичными представлениями, но возвращают стандартные числовые значения JavaScript.

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

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

13. DOM и дерево компоновки

Большинство из нас слышали об объектной модели документа (DOM), но лишь немногие имеют глубокое представление о ней. Знаете ли вы, что то, что вы видите в браузере, не является DOM? Это дерево рендеринга, которое на самом деле представляет собой комбинацию DOM и CSSOM.

Понимая, как работает модель DOM, ее структура и способ отображения страниц, мы можем динамически манипулировать веб-страницами с помощью JS. Это особенно необходимо для обеспечения высокого уровня производительности нашего приложения.

14. Классы и фабрики

JavaScript не является объектно-ориентированным языком. Однако для имитации свойств ООП используются конструкторы. По словам Тани, «классы в JavaScript на самом деле не предоставляют ничего, кроме синтаксического сахара для прототипов и наследования, потому что они обеспечивают более чистый и элегантный синтаксис. Поскольку другие языки программирования используют классы, JS синтаксис классов в Java упрощает чтобы разработчики могли переключаться между языками».

Фабричная функция — это функция, которая не возвращает класс или конструктор объекта. По мнению JS-экспертовEric ElliotУтверждение «В JavaScript любая функция может возвращать новый объект. Если это не конструктор или класс, она называетсязаводская функция. "

Понимание этих двух концепций необходимо при разработке крупномасштабных приложений.

15.`this`ключевые слова и`apply`,`call`а также`bind`метод

Лично я считаю, что для JS-разработчика пониманиеthisКлючевые слова имеют решающее значение. Если вы не понимаете это правильно, ваши будущие проекты часто будут сталкиваться сthisсвязанные вопросы.

если ты правthisКлючевое слово очень ясно, вы можете посмотреть наapply,callа такжеbindметоды, они могут быть решеныthisУкажите на поднятую проблему.

16. Конструкторы и оператор instanceOf

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

Чтобы правильно определить тип объекта, мы используемinstanceOfоператор. Проще говоря, он проверяет, является ли объект экземпляром другого объекта.

Это поможет вам понять, как объекты наследуются друг от друга, а наследование достигается за счет прототипов.

17. Прототип

Это одна из самых запутанных концепций в JS даже для человека с десятилетним опытом.

Прототипы в JavaScript — это механизмы для совместного использования общих функций между объектами. Почти все объекты в JavaScriptObjectпример. объект будет изObject.prototypeНаследовать все свойства и методы.

Проще говоря, прототип — это объект, от которого JS-объект наследует методы и свойства.

Понимание прототипирования позволяет создавать эффективные и быстрые приложения.

18. Использование`new`,`Object.create`а также`Object.assign`создать объект

Существует множество способов создания объектов. Однако митрополит выбралObject.createметод вместоnewключевые слова. Для этого есть причина, потому что использованиеObject.createметод, вы можете использовать существующий объект в качестве прототипа для вновь созданного объекта. Это позволяет повторно использовать свойства и функциональность существующих объектов, напримерOOPКонцепция наследования в .

использоватьObject.assignметод перечисляемые собственные свойства могут быть скопированы из одного или нескольких исходных объектов в целевой объект. В этом случае прототип целевого объекта не содержит свойств исходного объекта. В этом основное отличие этих двух методов.

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

19. карты, фильтры, методы сокращения

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

Если у вас есть массив и вы хотите что-то сделать с каждым элементом, вы можете использоватьmapметод.

Если у вас есть массив и вы хотите отфильтровать некоторые значения по какому-то условию, вы можете использоватьfilterметод.

reduce()метод выполняетreducerФункция (выполняемая в порядке возрастания), которая объединяет свои результаты в одно возвращаемое значение.

Типичным примером является суммирование всех элементов массива:

let numbers = [1,2,3,4,5,6]
const reduced = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue )
console.log(reduced)
// 21

Обратите внимание, что указанные выше три метода не изменяют значение исходного массива.

20. Чистые функции, побочные эффекты и изменения состояния

Эти три понятия очень важны для разработчиков JS, а изменения состояния особенно важны для разработчиков, использующих React.

Чистая функция означает, что возвращаемый результат функции зависит только от ее параметров, и в процессе выполнения нет побочных эффектов.

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

изменил переменную
Непосредственное изменение структуры данных
Установить член объекта
Выдает исключение или завершается с ошибкой
распечатать на терминал или прочитать пользовательский ввод
прочитать или записать файл
рисовать на экране

Изменение состояния — это когда вы меняете значение переменной. Если вы вносите изменения в переменную, это может повлиять на другие функции, в зависимости от значения переменной до ее изменения. В среде React мне посоветовали не изменять состояние.

21. Закрытие

Замыкания трудно понять. Но как только вы это поймете, вы почувствуете, что JS на самом деле очень хорош. Ресурсов в сети достаточно. Вы потратили достаточно времени на изучение замыканий, и их не так сложно освоить и понять.

Используйте замыкания для доступа к области внешней области во внутренней области. Каждый раз, когда создается функция, во время создания функции создается замыкание JavaScript.

22. Функции высшего порядка

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

23. Рекурсия

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

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

24. Коллекции и генераторы

Коллекции и генераторы появились в ES6 впервые. Недавно представленные коллекцииMap,Set,WeakSetа такжеWeakMap. Эти коллекции предоставляют нам несколько очень удобных операций. Знание того, как они выглядят, имеет решающее значение, особенно с современным JavaScript.

Генераторы иногда сложны для понимания, особенно новичкам. Генераторы позволяют нам писать функции кода, которые можно приостанавливать и перезапускать, не блокируя выполнение другого кода, что очень редко встречается в JavaScript.

25. Promise

JecelynправильноPromisesОбъяснение звучит так: «Представьте, что вы ребенок. Ваша мама обещает, что на следующей неделе купит вам новый телефон».

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

Это обещание. Обещание имеет три состояния, а именно:

В ожидании: вы не знаете, получите ли вы этот звонок
Исполнено: Мама счастлива и купила тебе новый телефон
Отклонено: мама недовольна, она просто не купит

26. Асинхронное программирование

Чтобы понять, что такое асинхронное программирование, мы должны сначала узнать, что такое синхронное программирование. Синхронное программирование — это блокировка потоков, поскольку JS является однопоточным, код будет выполняться построчно.

Но с асинхронным кодом вы можете выполнять некоторые трудоемкие задачи. Эта функция особенно полезна, когда вам нужно выполнить несколько задач, выполнение которых занимает много времени. Но в некоторых случаях даже код, который должен выполняться в течение длительного времени, может потребовать использования синхронного способа, тогда вы можете использоватьasync/await.

27. Стрелочные функции ES6

Стрелочные функции появились в ES6 впервые и представляют собой синтаксическую замену обычным функциям. Разница в том, что стрелочные функции не привязаны кthis,arguments,superилиnew.targetключевые слова. Это делает стрелочные функции хорошим выбором в одних ситуациях и очень плохим выбором в других.

Так что не используйте стрелочные функции сразу. Вы должны использовать их в соответствии с вашей реальной ситуацией.

28. Структуры данных

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

Плохие программисты беспокоятся о коде, хорошие программисты беспокоятся о структурах данных и отношениях между ними.

Что касается структур данных, вы должны знать о связанных списках, очередях, стеках, деревьях, графах и хеш-таблицах.

29. Временная сложность

Независимо от языка программирования, анализ временной сложности является еще одной основой компьютерного программирования. Чтобы создавать лучшие приложения, вы должны писать лучшие решения. Для этого вам нужно понять концепцию временной сложности. иногда называетсяBigO.

30. Алгоритмы

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

Хотя существует множество алгоритмов с тысячами вариантов использования, наиболее распространенными являются следующие два:

найти
Сортировать

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

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

31. Наследование, полиморфизм и повторное использование кода

Наследование в JS можно реализовать с помощью прототипов. Это потому, что JS не является языком ООП. Но JS предоставляет некоторые возможности ООП, предоставляя прототипное наследование.

Полиморфизм — это концепция, согласно которой объект, переменная или функция могут принимать различные формы. В JS немного сложно увидеть эффект полиморфизма, потому что в статически типизированной системе более очевидны полиморфные классические типы.

Обе вышеупомянутые концепции могут помочь нам улучшить повторное использование кода в JS.

32. Шаблоны проектирования

Шаблоны проектирования представляют собой передовой опыт и обычно используются опытными разработчиками объектно-ориентированного программного обеспечения. Шаблоны проектирования — это решения общих проблем, с которыми разработчики программного обеспечения сталкиваются во время разработки программного обеспечения. Эти решения являются результатом проб и ошибок многочисленных разработчиков программного обеспечения в течение значительного периода времени.

33. Функциональное программирование

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

Вам необходимо освоить несколько концепций функционального программирования:

чистая функция
неизменный
ссылочная прозрачность
Функции высшего порядка

34. Принципы чистого кода

Это важный навык, которым должен обладать каждый разработчик, независимо от используемого языка программирования. Каждый язык программирования имеет отдельный набор хороших практик. Хотя эти «хорошие» методы субъективны и различаются в зависимости от рабочего места, некоторые методы считаются «хорошими».

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

35. Деструктивное назначение

Введенный в ES6 оператор присваивания деструктурирования, он очень полезен. Они проще и эффективнее, чем предыдущие реализации для тех же вариантов использования.

36. Новые функции ES2020

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

Это также показывает, что ваш опыт работы с концепцией, вероятно, устареет через 10 лет, поскольку вместе с обновлениями версий выпускаются лучшие альтернативы. Это очень распространенная ситуация с любым языком программирования.

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

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

таланты【Три подряд】Это самая большая мотивация для Сяочжи продолжать делиться. Если в этом блоге есть какие-либо ошибки и предложения, вы можете оставить сообщение. Наконец, спасибо за просмотр.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

Статьи постоянно обновляются каждую неделю, и их можно искать в WeChat.【Переезд в мир】Сначала прочитай, ответь【Благосостояние】Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.