15 удивительных трюков, которые вы можете сделать с помощью простого JavaScript
Давайте рассмотрим некоторые из удивительных трюков, которые вы могли бы сделать с помощью ванильного JavaScript.
33 Концепции JavaScript, которые должен знать каждый разработчик
Как вы думаете, насколько хорошо вы знаете JavaScript? Вы, вероятно, знаете, как писать функции, понимать простые алгоритмы и даже можете написать класс. Но знаете ли вы, что такое типизированный массив?
Вам не нужно знать все эти концепции прямо сейчас, но они вам понадобятся позже в вашей карьере. Вот почему мы рекомендуем добавить этот список в закладки, потому что, скорее всего, вы столкнетесь с одной из этих тем, и тогда вам понадобится учебник, чтобы полностью понять его.
Введение
Этот репозиторий был создан с целью помочь разработчикам восполнить свои знания в JavaScript. Это не требование, а руководство для будущих исследований. Он основан на статье, написанной Стивеном Кертисом.
Итак, без лишних слов, давайте начнем!
Содержание
- Стек вызовов
- Примитивные типы
- Типы значений и ссылочные типы
- Неявное, явное, номинальное, структурирование и утиная типизация
- == vs === vs typeof
- Область функций, область блоков и лексическая область
- Выражение против оператора
- IIFE, модули и пространства имен
- Очередь сообщений и цикл событий
- setTimeout, setInterval и requestAnimationFrame
- JavaScript движки
- Побитовые операторы, массивы типов и буферы массивов
- DOM и деревья макетов
- Фабрики и классы
- Это, вызов, применение и привязка
- New, Конструктор, instanceof и экземпляры
- Наследование прототипов и цепочка прототипов
- Object.create и Object.assign
- Карта, сокращение, фильтр
- Чистые функции, побочные эффекты, мутация состояния и распространение событий
- Закрытие
- Функции высокого порядка
- Рекурсия
- Коллекции и генераторы
- Promise
- async/await
- Структуры данных
- Дорогостоящая операция и большая нотация O
- Алгоритмы
- Наследование, полиморфизм и повторное использование кода
- Шаблоны проектирования
- Частичное Применение, Каррирование, Композиция и Труба
- Чистый код
1. Стек вызовов
Стек вызовов — это механизм, позволяющий интерпретатору (например, интерпретатору JavaScript в веб —браузере) отслеживать свое место в скрипте, вызывающем несколько функций-какая функция в данный момент выполняется и какие функции вызываются из этой функции и т. Д.
2. Примитивные типы
Все типы, кроме объектов, определяют неизменяемые значения (то есть значения, которые не могут быть изменены). Например (и в отличие от C), строки неизменяемы. Мы называем значения этих типов "примитивными значениями".
3. Типы значений и ссылочные типы
Переменным, которым присвоено непримитивное значение, присваивается ссылка на это значение. Эта ссылка указывает на местоположение объекта в памяти. Переменные на самом деле не содержат значения.
4. Неявное, явное, номинальное, структурирование и утиная типизация
Принуждение типа означает, что когда операнды оператора имеют разные типы, один из них будет преобразован в "эквивалентное" значение типа другого операнда.
5. == vs === vs typeof
JavaScript имеет два визуально похожих, но очень разных способа проверки равенства. Вы можете проверить равенство с помощью == или ===.
6. Область функций, область блоков и лексическая область
Важно сделать это различие, потому что выражения могут действовать как операторы, поэтому у нас также есть операторы выражений. Хотя, с другой стороны, операторы не могут действовать как выражения.
7. Выражение против оператора
Важно сделать это различие, потому что выражения могут действовать как операторы, поэтому у нас также есть операторы выражений. Хотя, с другой стороны, операторы не могут действовать как выражения.
8. IIFE, модули и пространства имен
Один из часто используемых шаблонов кодирования с функциями получил причудливое имя: выражение функции с немедленным вызовом. Или более известный как IIFE и произносимый как “iffy”.
9. Очередь сообщений и цикл событий
- Как JavaScript может быть асинхронным и однопоточным? Короткий ответ заключается в том, что язык JavaScript однопоточен, а асинхронное поведение не является частью самого языка JavaScript, скорее они построены поверх основного языка JavaScript в браузере (или среде программирования) и доступны через API браузера.
10. setTimeout, setInterval и requestAnimationFrame
Мы можем решить выполнить функцию не прямо сейчас, а в определенное время позже. Это называется “планирование вызова”.
11. Движки JavaScript
Написание кода для Интернета иногда кажется немного волшебным в том смысле, что разработчики пишут последовательность символов, и, как по волшебству, эти символы превращаются в конкретные изображения, слова и действия в браузере. Понимание технологии может помочь разработчикам лучше настроить свое ремесло программиста.
12. Побитовые операторы, массивы типов и буферы массивов
Итак, технически для компьютера все сводится к 1s и 0s. Он не работает с цифрами, символами или строками, он использует только двоичные цифры (биты). Короткая версия этого объяснения заключается в том, что все хранится в двоичной форме. Затем компьютер использует кодировки, такие как UTF-8, чтобы сопоставить сохраненные битовые комбинации с символами, цифрами или различными символами (версия ELI5).
13. DOM и деревья макетов
Объектная модель документа, обычно называемая DOM, является неотъемлемой частью создания интерактивных веб-сайтов. Это интерфейс, который позволяет языку программирования манипулировать содержимым, структурой и стилем веб-сайта. JavaScript - это язык сценариев на стороне клиента, который подключается к DOM в интернет-браузере.
14. Фабрики и классы
JavaScript - это язык, основанный на прототипах, то есть свойства и методы объектов могут быть разделены через обобщенные объекты, которые могут быть клонированы и расширены. Это известно как прототипическое наследование и отличается от наследования классов.
15. this, call, apply и bind
|
call() |
apply() |
bind() |
|
|
Исполнение |
во время привязки |
во время привязки |
в то время, когда мы выполняем функцию возврата |
|
Параметр |
любое количество аргументов один за другим |
массив array [] |
массив и любое количество аргументов |
|
Функция возврата |
Да, он возвращает и вызывает ту же функцию в момент привязки |
Да, он возвращает и вызывает ту же функцию в момент привязки |
Да, он возвращает и вызывает ту же функцию в момент привязки. Которую мы можем использовать, когда захотим. Это как заряженный пистолет |
Эти функции очень важны для каждого разработчика JavaScript и используются почти в каждой библиотеке или фреймворке JavaScript.
16. new, Constructor, instanceof и Instances (экземпляры)
Каждый объект JavaScript имеет прототип. Все объекты в JavaScript наследуют свои методы и свойства от своих прототипов.
17. Наследование прототипов и цепочка прототипов
JavaScript немного сбивает с толку разработчиков, имеющих опыт работы на языках, основанных на классах (таких как Java или C++), поскольку он динамичен и не обеспечивает реализацию класса как такового (ключевое слово class введено в ES2015, но является синтаксическим сахаром, JavaScript остается прототипом).
18. Object.create и Object.assign
Метод Object.create является одним из методов создания нового объекта в JavaScript.
19. map, reduce, filter
Даже если вы не знаете, что такое функциональное программирование, вы, вероятно, использовали map, filter и reduce только потому, что они невероятно полезны и делают ваш код менее вонючим, позволяя вам писать более чистую логику.
20. Чистые функции, побочные эффекты, мутация состояния и распространение событий
Многие из наших ошибок связаны с IO, мутацией данных, кодом, несущим побочный эффект. Они расползаются по всей нашей кодовой базе—от таких вещей, как принятие пользовательских вводов, получение неожиданного ответа через http-вызов или запись в файловую систему. К сожалению, это суровая реальность, с которой мы должны привыкнуть иметь дело. Или это?
21. Замыкание
Замыкание - это комбинация функции, связанной вместе (заключенной) со ссылками на ее окружающее состояние (лексическое окружение). Другими словами, закрытие дает вам доступ к области видимости внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз, когда создается функция, во время создания функции.
22. Функции высокого порядка
JavaScript может принимать функции более высокого порядка*. Эта способность обрабатывать функции более высокого порядка, среди других характеристик, делает JavaScript одним из языков программирования, хорошо подходящих для функционального программирования.
*Функцией высокого порядка называется такая функция, которая принимает функцию как аргумент или возвращает функцию в виде выходного значения.
23. Рекурсия
Рассматривайте этот пост как серию учебных упражнений. Эти примеры призваны заставить вас задуматься — и, если я делаю это правильно, возможно, немного расширить ваше понимание функционального программирования.
24. Коллекции и генераторы
Объект Generator возвращается функцией generator и соответствует как протоколу iterable, так и протоколу iterator.
25. Promise
Объект Promise представляет собой возможное завершение (или сбой) асинхронной операции и ее результирующее значение.
26. async/await
Существует специальный синтаксис для более удобной работы с promise, называемый “async/await”. Это удивительно легко понять и использовать.
27. Структуры данных
Javascript развивается каждый день. С быстрым ростом фреймворков и платформ, таких как React, Angular, Vue, NodeJS, Electron, React Native, использование javascript для крупномасштабных приложений стало довольно распространенным явлением.
28. Дорогостоящая операция и нотация Big O
“Что такое Big O Notation?” это очень распространенный вопрос собеседования для разработчиков. Короче говоря, это математическое выражение того, сколько времени занимает запуск алгоритма в зависимости от того, сколько времени занимает ввод, обычно говоря о наихудшем сценарии.
29. Алгоритмы
В математике и информатике алгоритм представляет собой конечную последовательность четко определенных инструкций, обычно используемых для решения класса конкретных задач или для выполнения вычислений.
30. Наследование, полиморфизм и повторное использование кода
Наследование классов - это способ для одного класса расширить другой класс, чтобы мы могли создавать новые функциональные возможности поверх существующих.
31. Шаблоны проектирования
Каждый разработчик стремится писать ремонтопригодный, читаемый и повторно используемый код. Структурирование кода становится все более важным, поскольку приложения становятся больше. Шаблоны проектирования имеют решающее значение для решения этой проблемы - обеспечения организационной структуры для общих проблем в конкретных обстоятельствах.
32. Частичные приложения, каррирование, компоновка и конвейер
Композиция функций - это механизм объединения нескольких простых функций для создания более сложной.
33. Чистый код
Написание чистого, понятного и поддерживаемого кода —это навык, который имеет решающее значение для каждого разработчика.
Источники для более подробной информации по темам:
1. codementor
2. freecodecamp
3. medium
4. digitalocean
5. sitepoint
6. thatjsdude
7. hackernoon
8. itnext
