предисловие
Подробные комментарии и конкретные способы использования, соответствующие коду в статье, размещены у меня на гитхабе, а исходный код подключен внизу
1. Определяем тип данных объекта
Используйте Object.prototype.toString для работы с замыканиями и возвращайте разные функции суждения, передавая разные типы суждений.Одна строка кода лаконична, элегантна и гибка (обратите внимание, что при передаче параметра типа первая буква пишется с заглавной буквы).
Не рекомендуется использовать эту функцию для обнаружения базовых типов данных, которые могут генерировать типы-оболочки, поскольку call всегда будет выполнять операции упаковки для первого параметра, что приводит к неразличимости базовых типов и типов-оболочек.
2. Цикл для реализации метода карты массива
Как использовать: внедрить selfMap в Array.prototype (то же самое верно для метода итерации массива ниже)
Стоит отметить, что вторым параметром карты является this в обратном вызове первого параметра.Если первый параметр является стрелочной функцией, установка второго this будет недействительной из-за лексической привязки стрелочной функции.
Другой — обработка разреженных массивов через hasOwnProperty для определения, существует ли в массиве элемент текущего индекса (спасибо друзьям в области комментариев)
3. Реализуйте метод карты массива, используя сокращение
4. Цикл для реализации метода фильтра массива
5. Реализуйте метод фильтрации массива, используя сокращение
6. Перебрать какой-либо метод массива
Массив, на котором выполняется метод some, всегда будет возвращаться, если это пустой массив.false, а массив в каждом методе другого массива всегда будет возвращать пустой массив, если это пустой массивtrue
7. Цикл для реализации метода уменьшения массива
Поскольку между разреженными массивами может существовать взаимосвязь, редукция должна гарантировать, что разреженные элементы будут пропущены, а правильные элементы и индексы пройдены (спасибо @神三元 за предоставленный код)
8. Используйте сокращение для реализации плоского метода массива
Поскольку selfFlat полагается на это указание, вам нужно указать this, указывающее на selfFlat, при уменьшении обхода, иначе по умолчанию он будет указывать на окно, и произойдет ошибка.
Принцип заключается в обходе массива через сокращение.Когда элемент массива все еще является массивом, он уменьшается по размеру с помощью оператора расширения ES6 (ES5 может использовать метод concat), и этот элемент массива также может иметь внутри вложенные массивы, так что надо рекурсивно вызывать selfFlat
В то же время нативный плоский метод поддерживает параметр глубины, представляет глубину восстановления, а по умолчанию используется 1 к массиве.
Передача Inifity превратит входящий массив в одномерный массив
Принцип заключается в том, чтобы для каждой рекурсии уменьшать значение параметра depth на 1. Если параметр depth равен 0, возвращать исходный массив напрямую.
9. Реализуйте синтаксис класса ES6
Класс ES6 основан на паразитном наследовании композиции, что является наиболее идеальным методом наследования на данный момент.Создайте пустой объект с помощью метода Object.create, и наследуйте пустой объект от параметров метода Object.create, а затем подкласс (подтип) Если объект-прототип равен этому пустому объекту, прототип экземпляра подкласса может быть реализован равным этому пустому объекту, а прототип этого пустого объекта равен отношению наследования объекта-прототипа супертипа. (супертип.прототип)
Object.create поддерживает второй параметр, который должен определять свойства и дескрипторы свойств/дескрипторы доступа для сгенерированного пустого объекта.Мы можем определить свойство конструктора для этого пустого объекта, что больше соответствует поведению наследования по умолчанию, и это не перечисляемое.Перечислимое внутреннее свойство (перечисляемое: ложь)
Класс ES6 позволяет подклассам наследовать статические методы и статические свойства родительского класса, в то время как обычное паразитное комбинированное наследование может обеспечить наследование только между экземплярами.Для наследования между классами необходимо определить дополнительные методы, здесь используйте Object.setPrototypeOf для установки superType к прототипу подтипа, чтобы иметь возможность наследовать статические методы и статические свойства от родительского класса
10. Каррирование функций
Инструкции:
Каррирование — важная техника функционального программирования, техника преобразования функции, принимающей несколько аргументов, в последовательность функций, принимающих один аргумент.
Другая важная функция функционального программирования, компоновка, может комбинировать функции, а комбинированная функция принимает только один параметр, поэтому, если есть необходимость принимать несколько функций и вам нужно использовать композицию для комбинации функций, вам нужно использовать каррирование для функции быть составленным частично оценивается, так что он всегда принимает только один аргумент
заниматьБлог Сае Юпример в
11. Каррирование функций (поддержка заполнителей)
Инструкции:
Занимая более гибкий персонаж, чтобы сделать каррин, реализуйте идею, заключается в том, что каждый аргумент прошел, чтобы перейти к заполнению заполнителей в прошлом раунде, если текущий круглый параметр содержит заполнитель, затем сохраненный во внутреннюю массив конца текущего раунда элементов не для Заполните текущий параметр Round Placholder, пройдут только перед заполнением заполнителей
12. Частичные функции
Инструкции:
Концепция частичной функции и каррирования аналогична, я лично думаю, что разница между ними заключается в том, что частичная функция фиксирует несколько параметров, которые вы передаете, а затем принимает оставшиеся параметры за один раз, в то время как функция каррирования будет продолжать возвращаться в соответствии с параметрами вы передаете in. function до тех пор, пока количество аргументов не совпадет с количеством аргументов функции перед каррированием
Функция Function.prototype.bind является типичным представителем частичной функции.Второй параметр, который она принимает, начинается с параметров, предварительно добавленных в список параметров связанной функции.В отличие от bind, вышеуказанная функция также поддерживает учет битового символа
13. Последовательность Фибоначчи и ее оптимизация
Использование памяти функций для сохранения результатов предыдущих операций может сэкономить много времени для вычислений, которые часто полагаются на предыдущие результаты, такие как последовательность Фибоначчи.Недостаток заключается в том, что объект obj в замыкании будет занимать дополнительную память.
Кроме того, использование динамического программирования имеет меньшую пространственную сложность, чем первое, и также является более рекомендуемым решением.
14. Реализуйте метод привязки функции
Суть метода привязки реализации функции заключается в использовании вызова для привязки указателя this с учетом некоторых других ситуаций, таких как
- Когда функция, возвращаемая bind, вызывается new в качестве конструктора, связанное значение будет аннулировано и изменено на объект, указанный new.
- Определяет свойство длины и свойство имени связанной функции (неперечислимые свойства).
- Прототип связанной функции должен указывать на прототип исходной функции (
真实情况中绑定后的函数是没有 prototype 的，取而代之在绑定后的函数中有个 内部属性 [[TargetFunction]] 保存原函数，当将绑定后函数作为构造函数时，将创建的实例的 __proto__ 指向 [[TargetFunction]] 的 prototype，这里无法模拟内部属性，所以直接声明了一个 prototype 属性)
15. Реализовать метод вызова функции
Принцип заключается в выполнении функции как свойства параметра входящего контекста (context).Здесь тип ES6 Symbol используется для предотвращения конфликтов свойств.
16. Простой модуль CO
Инструкции:
Функция запуска принимает функцию генератора. Всякий раз, когда функция генератора, обернутая функцией запуска, встречает ключевое слово yield, она останавливается. Когда обещание, стоящее за доходностью, успешно разрешается, она автоматически вызывает следующий метод для выполнения следующего ключевого слова yield. Наконец, будет сформировано, что каждый раз, когда обещание успешно проанализировано, следующее обещание будет проанализировано.Когда все проанализированные результаты будут успешными, все проанализированные результаты будут напечатаны, и он превратится в наиболее часто используемый синтаксис async/await. .
17. Функция защиты от сотрясений
Ведущим является то, выполнять ли его один раз при входе.Принцип использования таймера.Если событие сработает повторно в течение заданного времени, последний таймер будет очищен, то есть функция не будет выполняться и будет новый таймер сбрасывается до тех пор, пока не превысит указанное время.Время автоматически запускает функцию в таймере
В то же время через закрытие открывается функция отмены, так что внешний счетчик может напрямую очищать внутренний счетчик.
18. Функция дросселирования
По аналогии с функцией anti-shake, разница в том, что временная метка дополнительно используется в качестве суждения, и разрешается запуск следующего события, если в течение определенного периода времени не происходит ни одного события. чтобы указать, запускать ли дополнительное время в конце.
19. Ленивая загрузка изображения
Реализация GetBoundClientRect, прослушивание событий Scroll (рекомендуется добавить дроссель для мониторинга событий), загружается изображение из списка DOM, состоящего из тега IMG, и загружается последнее изображение, необходимо решить событие мониторинга.
Реализация IntersectionObserver, создайте экземпляр IntersectionObserver и заставьте его отслеживать все теги img.
Когда тег img входит в видимую область, выполняется обратный вызов создания экземпляра, и в обратный вызов передается параметр entry, который сохраняет некоторые состояния всех элементов, наблюдаемых экземпляром, такие как информация о границах каждого элемента и узел DOM. соответствующий текущему элементу. , отношение текущего элемента, входящего в видимую область, всякий раз, когда элемент входит в видимую область, присваивать реальное изображение текущему тегу img и одновременно освобождать его наблюдение
20. новое ключевое слово
21. Реализовать Object.assign
Принцип Object.assign можно посмотреть в другой моей статьеблог
22. instanceof
Принцип заключается в рекурсивном обходе правых параметров цепочки прототипов и оставлении каждого параметра для сравнения, он возвращает false при обходе цепочки прототипов до конца, найдено возвращает true
23. Реализация приватных переменных
Используйте прокси для проксирования всех содержащихся_переменная в начале, что делает ее недоступной извне
Сохраняйте приватные переменные в виде замыканий, недостаток в том, что все экземпляры класса обращаются к одной и той же приватной переменной
Другая реализация замыканий решает недостатки вышеперечисленных замыканий.Каждый экземпляр имеет свои собственные приватные переменные.Недостаток в том, что отбрасывается простота синтаксиса класса, а все привилегированные методы (методы доступа к приватным переменным) отбрасываются.Хранятся в конструктор
С помощью Weakmap и Closing сохраните текущий экземпляр и все частные переменные, внешний экземпляр и все частные переменные будут сохранены, а внешний экземпляр не сможет получить доступ к WeakMap в замыкании.Использование WeakMap — это автоматический выпуск этого, когда нет ссылки на переменную для экземпляра. Частная переменная, сохраняемая экземпляром, уменьшает проблему переполнения памяти
24. Алгоритм перемешивания
Раньше Chrome использовал сортировку вставками для массивов с менее чем 10 элементами, что приводило к тому, что массив был не в порядке, а на самом деле не в порядке, даже если последняя версия Chrome использует алгоритм на месте, чтобы сделать сортировку стабильным алгоритмом. проблема выхода из строя до сих пор не решена
Настоящего беспорядка можно добиться с помощью алгоритма перетасовки.Алгоритм перетасовки делится на in-situ и non-situ.Рисунок 1 - алгоритм перетасовки in-situ.Нет необходимости объявлять дополнительные массивы для экономии памяти. Принцип заключается в последовательном обходе элементов массива, случайном выборе одного из текущего элемента и всех последующих элементов и обмене ими
25. Одноэлементный шаблон
Одноэлементный шаблон, реализованный прокси-сервером ES6, перехватывающим метод выполнения конструктора
26. promisify
Инструкции:
Функция обещания – это вспомогательная функция, которая превращает функцию обратного вызова в обещание. Она подходит для функций обратного вызова в стиле ошибки (nodejs). Принцип заключается в том, что независимо от того, будет ли обратный вызов в стиле функция будет выполнена после выполнения. Все, что нам нужно сделать, это позволить этой функции обратного вызова управлять состоянием промиса
Здесь также используется прокси для проксирования всего модуля fs, перехватывая метод get, чтобы не было необходимости вручную оборачивать все методы модуля fs функцией promisify, которая более гибкая
27. Изящно обрабатывать async/await
Инструкции:
Нет необходимости оборачивать слой try/catch каждый раз, когда вы используете async/await, что более элегантно.Вот еще одна идея.Если вы используете webpack, вы можете написать загрузчик, анализировать синтаксическое дерево AST и автоматически внедрять try/catch при встрече с синтаксисом await. Таким образом, вам даже не нужно использовать вспомогательные функции.
28. Опубликовать подписку EventEmitter
Метод включения используется для регистрации событий, а метод триггера запускает события для обеспечения слабой развязки между событиями, а дополнительные вспомогательные функции один раз и выключение добавляются для регистрации событий, которые запускаются только один раз, и событий выхода из системы.
29. Реализовать JSON.stringify (дополнительно)
При использовании JSON.stringify для преобразования объектов в строки JSON некоторые недопустимые типы данных будут искажены, в основном следующим образом.
- toJSON будет вызываться, если у объекта есть метод toJSON
- в массиве
-
- Становится нулевым, когда существует тип данных Undefined/Symbol/Function.
-
- Наличие Infinity/NaN также станет нулевым.
- в объекте
-
- Если значение свойства имеет тип данных Undefined/Symbol/Function, ни свойство, ни значение не будут преобразованы в строку.
-
- Если значение свойства равно Infinity/NaN , значение свойства станет нулевым.
- Значения типа данных даты вызывают toISOString
- Сложный тип данных, который не является массивом/объектом/функцией/датой, становится пустым объектом
- Циклическая ссылка выдает ошибку
Кроме того, JSON.stringify также может передавать второй и третий необязательные параметры.Заинтересованные друзья могут узнать об этом подробнее.
Код реализации длинный, здесь я прямо вставляю соответствующий адрес исходного кодаJSON.stringify
исходный код
исходный код, пожалуйста, не скупитесь со звездой в руке, ваша похвала для меня самое большое ободрение
использованная литература
Каррирование функций в JavaScript
Функциональная композиция тем JavaScript
Память функций для тем JavaScript