15 000 слов, обобщающих все функции ES6 (обновлено для ES2020)

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
Нет публики:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

предисловие

Читаю книгу Учителя Жуань Ифэн в третий раз«Введение в стандарты ES6»Так вот, я не был внимателен, когда читал это раньше, и во многих местах сразу видно десять строк. Недавно прочитал его слово в слово, и нашел много моментов знаний, которых раньше не замечал.В целях облегчения памяти и предпросмотра全部ES6特性, так напишите эту статью.

以下提到的《ES6标准入门》统一使用《ES6》这个名称来代替，而最新的ES6版本也是截止到当前的ES2020

Знания этой статьи полностью являются ссылками или выдержками."ЭС6"Некоторые предложения в тексте экранированы с одинаковым значением, чтобы облегчить понимание и запоминание, и в то же время точки знаний классифицированы и разделены. Для того, чтобы каждый мог сконцентрироваться на запоминании этих особенностей, в полном тексте нет глупостей и отступлений.Все модули написаны в виде примечаний.Если вы не очень привыкли читать, то рекомендуется сравнить"ЭС6"содержание, чтобы учиться.

Заметки, собранные в этой статье, составляют суть книги, охватывающую всюES6体系Все возможности , очень удобно всем заново разбираться全部ES6特性. полчаса чтенияES6Есть всеобъемлющее понимание, мышление есть копияES6特性小字典, вы можете обратиться к нему в любое время после сбора. Даже если вы не можете дочитать до конца, дочитайте эту статью до конца, там есть большое пасхальное яйцо, хи-хи!

исправить

ES6даECMAдляJavaScriptСформулирована 6-я стандартная версия, соответствующую историю можно просмотреть в этой главе.Введение в ES6-ECMAScript6.

В конце концов комитет по стандартам решил, что стандарт будет официально выпускаться в июне каждого года как официальная версия года и будет изменяться на основе этой версии в последующее время, до тех пор, пока проект в июне следующего года, естественно, не будет стать новогодней версией. , поэтому нет необходимости в номере предыдущей версии, достаточно отметки года.ECMAscript 2015в2015年6月Выпустите первую версию ES6. И так далее,ECMAscript 2016это вторая версия ES6,ECMAscript 2017это третья версия ES6.ES6Это и историческое существительное, и общая ссылка, означающая5.1版本послеJavaScript下一代标准, который в настоящее время охватываетES2015,ES2016,ES2017,ES2018,ES2019,ES2020.

Итак, некоторые статьи, упомянутыеES7(по сутиES2016),ES8(по сутиES2017),ES9(по сутиES2018),ES10(по сутиES2019),ES11(по сутиES2020), которые по сути являются нестандартными понятиями. От ES1 до ES6 на формулировку каждого стандарта ушло несколько лет или даже более десяти лет.Там понадобился всего один год, чтобы перейти от ES6 к ES7, а от ES7 к ES8.Согласно этому определению, ES20 будет не скоро . . . В правильных концепциях ES6 в настоящее время охватываетES2015,ES2016,ES2017,ES2018,ES2019,ES2020.

Кроме того, содержание обновления ES6 в основном разделено на следующие пункты.

• выражение: объявление, присваивание деструктурирования
• встроенные объекты: Расширение строки, числовое расширение, расширение объекта, расширение массива, расширение функции, обычное расширение, символ, набор, карта, прокси, отражение
• Заявления и операции: класс, модуль, итератор
• Асинхронное программирование: обещание, генератор, асинхронный

ES2015

утверждение

• константная команда: объявить константы
• пусть команда: объявить переменную

эффект

• объем
  • глобальная область
  • объем функции:function() {}
  • область действия блока:{}
• Объем
  • var命令В глобальном выполнении кода
  • const命令а такжеlet命令Может выполняться только в блоках кода
• назначение использования
  • const命令Константе должно быть присвоено значение сразу после ее объявления
  • let命令Переменной можно присвоить значение сразу после ее объявления или при ее использовании.
• Способ объявления:var,const,let,function,class,import

основная трудность

• Дублирование деклараций не допускается.
• Если он не определен, он сообщит об ошибке:const命令а такжеlet命令Нет переменного продвижения
• Временная мертвая зона: используется в кодовых блоках.const命令а такжеlet命令Переменная недоступна, пока переменная не объявлена

присваивание деструктуризации

• Деструктуризация строки:const [a, b, c, d, e] = "hello"
• Численная деконструкция:const { toString: s } = 123
• Булева деструктуризация:const { toString: b } = true
• деструктуризация объекта
  • форма:const { x, y } = { x: 1, y: 2 }
  • По умолчанию:const { x, y = 2 } = { x: 1 }
  • Переименовать:const { x, y: z } = { x: 1, y: 2 }
• деструктуризация массива
  • Правило: структуры данных имеютIterator接口Деструктурирующее присваивание, которое может принимать массив
  • форма:const [x, y] = [1, 2]
  • По умолчанию:const [x, y = 2] = [1]
• деструктуризация параметра функции
  • Деструктуризация массива:function Func([x = 0, y = 1]) {}
  • Деструктуризация объекта:function Func({ x = 0, y = 1 } = {}) {}

Сценарии применения

• Поменять местами значения переменных:[x, y] = [y, x]
• Функция возврата с несколькими значениями:const [x, y, z] = Func()
• Определите параметры функции:Func([1, 2])
• Извлеките данные JSON:const { name, version } = packageJson
• Определите значения параметров функции по умолчанию:function Func({ x = 1, y = 2 } = {}) {}
• Пройдите структуру карты:for (let [k, v] of Map) {}
• Модули ввода определяют свойства и методы:const { readFile, writeFile } = require("fs")

основная трудность

• Сопоставление шаблонов: если шаблоны по обе стороны от знака равенства одинаковы, переменной слева будет присвоено соответствующее значение.
• Правило присваивания деструктуризации: если значение справа от знака равенства не является объектом или массивом, сначала преобразуйте его в объект
• Деконструкция значений по умолчанию для выполнения условия: значение свойства ограниченоundefined
• Деконструкция следует за режимом сопоставления
• Значение переменной при неудачной деструктуризации равноundefined
• undefinedа такжеnullНе может быть обращено к объекту, поэтому не может быть уничтожено

расширение строки

• Обозначение Юникода:大括号包含Представляет символы Юникода (\u{0xXX}или\u{0XXX})
• обход строки:доступныйfor-ofперебирать строку
• шаблон строки: Расширенная строка, которая может быть однострочной, многострочной и вставляемой переменной.
• Шаблон этикетки: специальный вызов аргументов функции
• String.raw(): возвращает результат замены всех переменных строки и экранирования косых черт.
• String.fromCodePoint(): символ, соответствующий кодовой точке возврата
• codePointAt(): возвращает кодовую точку, соответствующую символу (String.fromCodePoint()обратная операция)
• normalize(): объединить различные методы представления символов в одну и ту же форму, вернуть新字符串(нормализация Юникода)
• repeat(): повторить строку n раз, вернуться新字符串
• matchAll(): возвращает все совпадения регулярного выражения в строке
• includes(): существует ли указанная строка
• startsWith(): есть ли указанная строка в заголовке строки
• endsWith(): есть ли указанная строка в конце строки

основная трудность

• Вышеупомянутые методы расширения могут использоваться4个字节储存изUnicode字符начальство

Числовое расширение

• двоичная запись:0b或0B开头представляет собой двоичный (0bXXили0BXX)
• восьмеричная запись:0o或0O开头представляет собой двоичный (0oXXили0OXX)
• Number.EPSILON: числовая минимальная точность
• Number.MIN_SAFE_INTEGER: минимальное безопасное значение (-2^53)
• Number.MAX_SAFE_INTEGER: максимальное безопасное значение (2^53)
• Number.parseInt(): возвращает целую часть преобразованного значения.
• Number.parseFloat(): возвращает часть преобразованного значения с плавающей запятой.
• Number.isFinite(): Это конечное значение
• Number.isNaN(): Это NaN
• Number.isInteger(): является ли это целым числом
• Number.isSafeInteger(): Находится ли он в числовом безопасном диапазоне?
• Math.trunc(): возвращает целую часть значения
• Math.sign(): возвращает числовой тип (正数1,负数-1,零0)
• Math.cbrt(): возвращает кубический корень числового значения
• Math.clz32(): возвращает 32-битную целочисленную форму значения без знака.
• Math.imul(): возвращает произведение двух чисел.
• Math.fround(): возвращает 32-битную форму значения с плавающей запятой одинарной точности.
• Math.hypot(): возвращает квадратный корень из суммы квадратов всех чисел.
• Math.expm1():вернутьe^n - 1
• Math.log1p():вернуть1 + nНатуральный логарифм (Math.log(1 + n))
• Math.log10(): возвращает логарифм числа n по основанию 10.
• Math.log2(): возвращает логарифм числа n по основанию 2.
• Math.sinh(): возвращает гиперболический синус числа n
• Math.cosh(): возвращает гиперболический косинус n
• Math.tanh(): возвращает гиперболический тангенс n
• Math.asinh(): возвращает аркгиперболический синус числа n
• Math.acosh(): возвращает аркгиперболический косинус числа n
• Math.atanh(): возвращает гиперболический арктангенс числа n.

расширение объекта

• краткое обозначение: напрямую писать переменные и функции как свойства и методы объектов ({ prop, method() {} })
• выражение имени свойства: используется при определении литерала объекта[]определить ключ ([prop], нельзя использовать одновременно с указанным выше)
• атрибут имени метода: Вернуться к функции метода
  • Функция значения (геттер) и функция значения (сеттер):get/set 函数名(Объект описания свойства находится вgetа такжеsetначальство)
  • Функция, возвращаемая привязкой:bound 函数名
  • Экземпляр функции, возвращаемый конструктором Function:anonymous
• Перечисление свойств и обход: описание объектаenumerable
• супер ключевое слово: указывает на объект-прототип текущего объекта (может использоваться только в сокращенном методе объектаmethod() {})
• Object.is(): Сравните, равны ли два значения
• Object.assign(): объединить объекты (поверхностное копирование), вернуть исходный объект
• Object.getPrototypeOf(): возвращает объект-прототип объекта.
• Object.setPrototypeOf(): установить прототип объекта объекта
• __proto__: возвращает или задает объект-прототип объекта.

обход свойств

• описывать:自身,可继承,可枚举,非枚举,Symbol
• траверс
  • for-in: перебирать объекты自身可继承可枚举Атрибуты
  • Object.keys(): возвращаемый объект自身可枚举Массив ключей свойств
  • Object.getOwnPropertyNames(): возвращаемый объект自身非SymbolМассив ключей свойств
  • Object.getOwnPropertySymbols(): возвращаемый объект自身SymbolМассив ключей свойств
  • Reflect.ownKeys(): возвращаемый объект自身全部Массив ключей свойств
• правило
  • Сначала переберите все числовые ключи и отсортируйте их в порядке возрастания.
  • Затем перебираем все строковые ключи и сортируем их в порядке возрастания по времени соединения.
  • Наконец, пройдитесь по всем символьным клавишам и отсортируйте их в порядке возрастания по времени присоединения.

расширение массива

• оператор спреда(...): преобразует массив в последовательность аргументов, разделенных запятыми ([...arr], эквивалентноrest/spread参数обратная операция)
• Array.from(): преобразование имеетIterator接口Структура данных представляет собой реальный массив, возвращающий новый массив
  • Массивоподобные объекты:包含length的对象,Arguments对象,NodeList对象
  • Проходимые объекты:String,Set结构,Map结构,Generator函数
• Array.of(): Преобразует набор значений в истинный массив, возвращая новый массив
• copyWithin(): скопировать элементы из указанного расположения в другое место, вернуть исходный массив
• find(): возвращает первого подходящего члена
• findIndex(): возвращает значение индекса первого квалифицированного члена.
• fill(): заполнить весь массив в соответствии с указанным значением и вернуть исходный массив
• keys(): возвращает объект, индекс которого является итератором
• values(): возвращает объект, значением свойства которого является итератор.
• entries(): возвращает объект со значением индекса и значением свойства в качестве итератора.
• пространство массива: ES6 явно преобразует пустые места массива вundefined(Правила обращения с вакансиями различаются, рекомендуется их избегать)

Расширенное приложение

• Клонируйте массив:const arr = [...arr1]
• Объединить массивы:const arr = [...arr1, ...arr2]
• Объединить массивы:arr.push(...arr1)
• Вместо применения:Math.max.apply(null, [x, y]) => Math.max(...[x, y])
• Преобразование строки в массив:[..."hello"]
• Преобразуйте массивоподобный объект в массив:[...Arguments, ...NodeList]
• Преобразуйте итерируемый объект в массив:[...String, ...Set, ...Map, ...Generator]
• В сочетании с назначением деструктуризации массива:const [x, ...rest/spread] = [1, 2, 3]
• Рассчитать длину символа Unicode:Array.from("hello").length => [..."hello"].length

основная трудность

• использоватьkeys(),values(),entries()Возвращаемый объект итератора, доступныйfor-ofавтоматически проходить илиnext()Ручной обход

расширение функции

• значение параметра по умолчанию: Укажите значения по умолчанию для параметров функции
  • форма:function Func(x = 1, y = 2) {}
  • Назначение параметра: ленивая оценка (оценивается после вызова функции)
  • Позиция аргумента: хвостовой аргумент
  • Объем параметра: объем функции
  • Метод объявления: объявление по умолчанию, использовать нельзяconstилиletобъявить снова
  • длина: возвращает количество параметров без указанного значения по умолчанию
  • В сочетании с деструктурирующим назначением по умолчанию:function Func({ x = 1, y = 2 } = {}) {}
  • заявление
    • Указание параметра не должно быть опущено, иначе будет выброшена ошибка:function Func(x = throwMissing()) {}
    • Установите значение параметра по умолчанию наundefined, что указывает на то, что этот параметр можно опустить:Func(undefined, 1)
• Параметры отдыха / распространения (...): возвращает дополнительные параметры функции
  • Форма: существует в виде массива, после которого не может быть других параметров
  • Функция: заменитьArguments对象
  • длина: возвращает количество параметров без указанного значения по умолчанию, но не включаяrest/spread参数
• строгий режим: запускать JS в строгих условиях
  • Приложение: Пока параметры функции используют значения по умолчанию, деструктурирующие присваивания и операторы расширения, функция не может быть явно установлена ​​в строгий режим.
• атрибут имени: возвращает имя функции функции
  • Назначьте анонимную функцию переменной:空字符串(ES5),变量名(ES6)
  • Назначьте именованную функцию переменной:函数名(ЭС5 и ЭС6)
  • Функция, возвращаемая привязкой:bound 函数名(ЭС5 и ЭС6)
  • Экземпляр функции, возвращаемый конструктором Function:anonymous(ЭС5 и ЭС6)
• Функция стрелки (=>): сокращение функции
  • Нет параметров:() => {}
  • Один параметр:x => {}
  • Ряд параметров:(x, y) => {}
  • Параметры деструктуризации:({x, y}) => {}
  • Вложенное использование: механизм конвейера развертывания
  • это указывает на иммобилизацию
    • не из-за внутренней привязкиthisмеханизм, но совсем не свойthis, в результате чего внутреннееthisВнешний код кодthis
    • потому что безthis, поэтому не может использоваться в качестве конструктора
• оптимизация хвостового вызова: сохранить только кадр вызова внутренней функции
  • хвостовой вызов
    • Определение: последним шагом функции является вызов другой функции.
    • форма:function f(x) { return g(x); }
  • хвостовая рекурсия
    • Определение: Хвост функции вызывает сам себя
    • Функция: пока используется хвостовая рекурсия, переполнения стека не произойдет, что относительно экономит память.
    • Реализация: переписать все используемые внутренние переменные в параметры функции и использовать значения параметров по умолчанию.

Ошибки функции стрелки

• внутри функцииthisда定义时所在的对象вместо使用时所在的对象
• допустимыйthisУказывая на иммобилизацию, эта функция очень полезна для инкапсуляции функций обратного вызова.
• не рассматривать как构造函数, поэтому функции стрелок использовать нельзяnew命令
• недоступенyield命令, поэтому стрелочные функции нельзя использовать в качествеGenerator函数
• недоступенArguments对象, этот объект не существует в теле функции (доступноrest/spread参数заменять)
• При возврате объекта вы должны заключать объект в круглые скобки.

Регулярное расширение

• Изменить входные параметры конструктора RegExp: разрешить первому параметру быть正则对象, параметр хвоста正则修饰符(Возвращенное регулярное выражение игнорирует модификаторы исходного регулярного выражения)
• Регулярные изменения вызовов методов: Строковый объектmatch(),replace(),search(),split()Внутренний звонок на звонокRegExpсоответствующий экземпляруRegExp.prototype[Symbol.方法]
• у модификатор: модификатор режима Unicode, правильно обрабатывает больше, чем\uFFFFизUnicode字符
  • 点字符(.)
  • Unicode表示法
  • 量词
  • 预定义模式
  • i修饰符
  • 转义
• у модификатор: модификатор клея, обеспечение того, чтобы совпадения должны начать глобально на первой оставшейся позиции (сg修饰符Агрегация похожа)
• unicode: установить лиu修饰符
• sticky: установить лиy修饰符
• flags: возвращает модификатор регулярного выражения.

основная трудность

• y修饰符Неявный флаг соответствия заголовка^
• Простоy修饰符правильноmatch()Может быть возвращено только первое совпадение, которое должно совпадать сg修饰符объединены, чтобы вернуть все совпадения

Symbol

• Определение: уникальное значение
• утверждение:const set = Symbol(str)
• Входной параметр: строка (необязательно)
• метод
  • Symbol(): Создайте описание с параметрамиSymbol值(не зарегистрирован в глобальной среде)
  • Symbol.for(): создать описание с параметрамиSymbol值, если есть этот параметр, он вернет исходныйSymbol值(Сначала ищите, а потом создавайте, регистрируйтесь в глобальной среде)
  • Symbol.keyFor(): возвращает зарегистрированныйSymbol值описание (возвращает толькоSymbol.for()изkey)
  • Object.getOwnPropertySymbols(): возвращает все свойства объекта, которые используются в качестве имен свойств.Symbol值массив
• встроенный
  • Symbol.hasInstance: указывает на внутренний метод, когда другие объекты используютinstanceof运算符Этот метод вызывается при оценке того, является ли этот объект экземпляром
  • Symbol.isConcatSpreadable: указывает на логическое значение, определяющее объект дляArray.prototype.concat()можно расширить
  • Symbol.species: указывает на конструктор, который вызовет указанный конструктор, когда объект экземпляра использует свой собственный конструктор.
  • Symbol.match: указывает на функцию, когда объект экземпляраString.prototype.match()будет переопределен при вызовеmatch()поведение
  • Symbol.replace: указывает на функцию, когда объект экземпляраString.prototype.replace()будет переопределен при вызовеreplace()поведение
  • Symbol.search: указывает на функцию, когда объект экземпляраString.prototype.search()будет переопределен при вызовеsearch()поведение
  • Symbol.split: указывает на функцию, когда объект экземпляраString.prototype.split()будет переопределен при вызовеsplit()поведение
  • Symbol.iterator: указывает на метод итератора по умолчанию, когда объект экземпляра выполняетсяfor-ofУказанный путешественник по умолчанию называется
  • Symbol.toPrimitive: указывает на функцию, возвращает значение исходного типа, соответствующее этому объекту, когда объект экземпляра преобразуется в значение исходного типа.
  • Symbol.toStringTag: указывает на функцию, когда объект экземпляраObject.prototype.toString()При вызове его возвращаемое значение появится вtoString()Возвращаемая строка представляет тип объекта
  • Symbol.unscopables: Укажите на объект, укажите, чтобы использоватьwithкакие свойства будут использоваться приwith环境исключать

тип данных

• Undefined
• Null
• String
• Number
• Boolean
• Object(ВключатьArray,Function,Date,RegExp,Error)
• Symbol

Сценарии применения

• Уникальное имя атрибута объекта: имя атрибута относится к типу Symbol, поэтому оно уникально, что гарантирует, что оно не будет конфликтовать с другими именами атрибутов.
• Устранить волшебные строки: определенная строка или значение, которое появляется несколько раз в коде и образует сильную муфту с кодом
• Обход имен свойств: не может пройтиfor-in,for-of,Object.keys(),Object.getOwnPropertyNames(),JSON.stringify()Возврат, только черезObject.getOwnPropertySymbolsвернуть
• Включает шаблон модулей Singleton: вызов класса возвращает один и тот же экземпляр в любое время (windowа такжеglobal),использоватьSymbol.for()для имитации глобальногоSingleton模式

основная трудность

• Symbol()создает значение примитивного типа, которое не является объектом, поэтомуSymbol()нельзя использовать передnew命令
• Symbol()Параметр указывает, что текущийSymbol值описание тех же параметровSymbol()возвращаемое значение не равно
• Symbol值не может работать с другими типами значений
• Symbol值доступныйString()илиtoString()явное преобразование в строку
• Symbol值При использовании в качестве имени свойства объекта свойство является общедоступным, но не частным.
• Symbol值В качестве имени свойства объекта можно использовать только оператор квадратных скобок ([]) для чтения нельзя использовать оператор точки (.) читать
• Symbol值При использовании в качестве имени свойства объекта оно не будет проходиться обычными методами.Эту функцию можно использовать для определения объекта.非私有但又只用于内部的方法

Set

Set

• Определение: Структура данных, подобная массиву, в которой значения членов уникальны и неповторяющиеся.
• утверждение:const set = new Set(arr)
• Входные параметры: естьIterator接口структура данных
• Атрибуты
  • constructor: Конструктор, возвращает Set
  • size: возвращает общее количество членов экземпляра
• метод
  • add(): добавить значение, вернуть экземпляр
  • delete(): Удалить значение, вернуть логический
  • has(): проверить значение, вернуть логическое значение
  • clear(): очистить всех членов
  • keys(): возвращает объект, значением свойства которого является итератор.
  • values(): возвращает объект, значением свойства которого является итератор.
  • entries(): возвращает объект со значением свойства и значением свойства итератора.
  • forEach(): цикл по каждому элементу с использованием функции обратного вызова

Сценарии применения

• Дедуплицировать строки:[...new Set(str)].join("")
• Дедуплицированный массив:[...new Set(arr)]илиArray.from(new Set(arr))
• массив коллекции
  • утверждение:const a = new Set(arr1),const b = new Set(arr2)
  • Союз:new Set([...a, ...b])
  • Пересечение:new Set([...a].filter(v => b.has(v)))
  • Разница:new Set([...a].filter(v => !b.has(v)))
• коллекция карт
  • утверждение:let set = new Set(arr)
  • Отображение:set = new Set([...set].map(v => v * 2))илиset = new Set(Array.from(set, v => v * 2))

основная трудность

• Порядок обхода: порядок размещения
• Ключа нет, есть только значение, ключ и значение можно считать равными
• добавить несколькоNaNкогда есть только одинNaN
• При добавлении одного и того же объекта он будет рассматриваться как другой объект.
• При добавлении значения (5 !== "5")
• keys()а такжеvalues()вести себя точно так же,entries()Возвращенный итератор содержит как ключ, так и значение, и два значения равны

WeakSet

• Определение: Подобно структуре Set, значение члена может быть только объектом.
• утверждение:const set = new WeakSet(arr)
• Входные параметры: естьIterator接口структура данных
• Атрибуты
  • constructor: Конструктор, возвращает WeakSet
• метод
  • add(): добавить значение, вернуть экземпляр
  • delete(): удалить значение, вернуть логическое значение
  • has(): проверить значение, вернуть логическое значение

Сценарии применения

• Хранить узлы DOM: этот элемент автоматически освобождается при удалении узлов DOM, поэтому не нужно беспокоиться об утечке памяти при удалении этих узлов из документа.
• Временно хранить набор объектов или хранить информацию, привязанную к объектам: пока эти объекты исчезают извне,WeakSet结构ссылки в

основная трудность

• члены弱引用, механизм сборки мусора не учитываетWeakSet结构ссылка на этого члена
• Член не подходит для ссылки, он исчезает в любой момент, поэтому ES6 оговариваетWeakSet结构不可遍历
• Когда другие объекты больше не относятся к участнику, механизм сборки мусора автоматически вернет память, занимаемой этим участником, независимо от того, будет ли член еще вWeakSet结构середина

Map

Map

• Определение: объектная структура данных, в которой ключи-члены являются значениями любого типа.
• утверждение:const set = new Map(arr)
• Входные параметры: естьIterator接口и каждый член представляет собой структуру данных двухэлементного массива
• Атрибуты
  • constructor: Конструктор, возвращает карту
  • size: возвращает общее количество членов экземпляра
• метод
  • get(): возвращает пару ключ-значение
  • set(): добавить пары ключ-значение, вернуть экземпляр
  • delete(): удалить пару ключ-значение, вернуть логическое значение
  • has(): проверить пару ключ-значение, вернуть логическое значение
  • clear(): очистить всех членов
  • keys(): возвращает объект с ключами в качестве итераторов
  • values(): возвращает объект, значением которого является итератор
  • entries(): возвращает объект с ключами и значениями в качестве итераторов
  • forEach(): цикл по каждому элементу с использованием функции обратного вызова

основная трудность

• Порядок обхода: порядок размещения
• Назначьте несколько назначений одной и той же клавише, более позднее значение перезапишет предыдущее значение.
• Ссылка на тот же объект считается ключом
• Два экземпляра одного и того же значения рассматриваются как два ключа
• Ключ привязан к адресу памяти, если адрес памяти отличается, он считается двумя ключами.
• добавить несколько кNaNВ качестве ключа будет толькоNaNзначение как ключ
• Object结构поставка字符串—值соответствует,Map结构поставка值—值соответствующий

WeakMap

• Определение: Подобно структуре карты, ключи-члены могут быть только объектами.
• утверждение:const set = new WeakMap(arr)
• Входные параметры: естьIterator接口и каждый член представляет собой структуру данных двухэлементного массива
• Атрибуты
  • constructor: Построить функцию, вернуться в WeakMap
• метод
  • get(): возвращает пару ключ-значение
  • set(): добавить пары ключ-значение, вернуть экземпляр
  • delete(): удалить пару ключ-значение, вернуть логическое значение
  • has(): проверить пару ключ-значение, вернуть логическое значение

Сценарии применения

• Хранить узлы DOM: этот ключ автоматически высвобождается при удалении узлов DOM, поэтому не нужно беспокоиться об утечке памяти при удалении этих узлов из документа.
• Развертывание частных свойств: внутренние свойства являются слабыми ссылками на экземпляры и исчезают при удалении экземпляра, не вызывая утечек памяти.

основная трудность

• ключи-члены弱引用, механизм сборки мусора не учитываетWeakMap结构ссылка на этот ключ члена
• Ключ-член не подходит для ссылки, он исчезает в любой момент, поэтому ES6 оговариваетWeakMap结构不可遍历
• Когда другие объекты больше не ссылаются на ключ члена, механизм сборки мусора автоматически освободит память, занятую этим членом, независимо от того, существует ли этот член еще в памяти.WeakMap结构середина
• Как только член больше не нужен, член автоматически исчезнет, ​​нет необходимости вручную удалять ссылку
• слабые ссылки只是键而不是值, значение по-прежнему является обычной ссылкой
• Даже если ключ элемента разыменован извне, внутреннее значение элемента сохраняется.

Proxy

• Определение: изменить поведение некоторых операций по умолчанию.
• утверждение:const proxy = new Proxy(target, handler)
• Вход
  • target: перехваченный целевой объект
  • handler: настроить поведение перехвата
• метод
  • Proxy.revocable(): возвращает отменяемый экземпляр прокси (возвращает{ proxy, revoke }, отменить прокси через revoke())
• метод перехвата
  • get(): Перехватывать чтение свойства объекта
  • set(): Перехватывать настройки свойств объекта, возвращать логическое значение
  • has(): Проверка атрибута объекта перехватаk in obj, который возвращает логическое значение
  • deleteProperty(): Перехватить удаление свойства объектаdelete obj[k], который возвращает логическое значение
  • defineProperty(): определение свойства объекта перехватаObject.defineProperty(),Object.defineProperties(), который возвращает логическое значение
  • ownKeys(): Перехват обхода свойства объектаfor-in,Object.keys(),Object.getOwnPropertyNames(),Object.getOwnPropertySymbols(), который возвращает массив
  • getOwnPropertyDescriptor(): Прочитано описание свойства объекта перехватаObject.getOwnPropertyDescriptor(), который возвращает объект
  • getPrototypeOf(): Прочитанный прототип объекта перехватаinstanceof,Object.getPrototypeOf(),Object.prototype.__proto__,Object.prototype.isPrototypeOf(),Reflect.getPrototypeOf(), который возвращает объект
  • setPrototypeOf(): Перехватывать настройки прототипа объектаObject.setPrototypeOf(), который возвращает логическое значение
  • isExtensible(): Можно ли расширить объект перехвата для чтенияObject.isExtensible(), который возвращает логическое значение
  • preventExtensions(): Перехватывать объект, не расширяемый параметрObject.preventExtensions(), который возвращает логическое значение
  • apply(): перехватывать экземпляр Proxy как вызов функцииproxy(),proxy.apply(),proxy.call()
  • construct(): Перехватывать экземпляр Proxy как вызов конструктора.new proxy()

Сценарии применения

• Proxy.revocable(): Прямой доступ к объекту не разрешен, доступ к нему должен осуществляться через прокси, и как только доступ заканчивается, право прокси аннулируется, и дальнейший доступ не разрешается.
• get(): Чтение неизвестных свойств для сообщения об ошибках, чтение значения отрицательных индексов массива, инкапсуляция цепных операций и создание вложенных узлов DOM.
• set(): привязка данных (принцип реализации привязки данных Vue), убедитесь, что настройки значений свойств соответствуют требованиям, и предотвратите чтение и запись внутренних свойств извне.
• has(): скрыть внутренние свойства от обнаружения, исключить объекты, не соответствующие условиям свойства
• deleteProperty(): защищает внутренние свойства от удаления
• defineProperty(): предотвратить внешнее определение свойств
• ownKeys(): защищает внутренние свойства от обхода

основная трудность

• делатьProxyработает, должно быть实例действие, не для目标对象действовать
• Когда перехват не установлен, это эквивалентно直接通向原对象
• свойства определяются как不可读写/扩展/配置/枚举При использовании метода перехвата будет сообщено об ошибке
• целевой объект под прокси, внутреннийthisнаправлениеProxy代理

Reflect

• определение: держатьObject方法поведение по умолчанию
• метод
  • get(): возвращает свойства объекта
  • set(): Установить свойства объекта, вернуть логическое значение
  • has(): проверить свойства объекта, вернуть логическое значение
  • deleteProperty(): удалить свойство объекта, вернуть логическое значение
  • defineProperty(): определить свойства объекта, вернуть логическое значение
  • ownKeys(): перебирает свойства объекта, возвращая массив (Object.getOwnPropertyNames()+Object.getOwnPropertySymbols())
  • getOwnPropertyDescriptor(): описание свойства возвращаемого объекта, возвращаемый объект
  • getPrototypeOf(): возвращает прототип объекта, возвращает объект
  • setPrototypeOf(): установить прототип объекта, вернуть логическое значение
  • isExtensible(): Возвращает, является ли объект расширяемым, возвращает логическое значение
  • preventExtensions(): заданный объект не является расширяемым, возвращает логическое значение
  • apply(): выполнить указанную функцию после привязки этого
  • construct(): вызвать конструктор для создания экземпляра

цель дизайна

• БудуObjectпринадлежать语言内部的方法помещатьReflectначальство
• Измените некоторые ошибки метода объекта, чтобы они возвращалисьfalse
• ПозволятьObject操作стали函数行为
• Proxyа такжеReflectдополняют друг друга

Способ утилизации

• Object.defineProperty() => Reflect.defineProperty()
• Object.getOwnPropertyDescriptor() => Reflect.getOwnPropertyDescriptor()

основная трудность

• Proxy方法а такжеReflect方法корреспонденция один на один
• Proxyа такжеReflectКомбинированное использование, первое отвечает за拦截赋值操作, последний отвечает за完成赋值操作

Привязка данных: шаблон наблюдателя

const observerQueue = new Set();
const observe = fn => observerQueue.add(fn);
const observable = obj => new Proxy(obj, {
    set(tgt, key, val, receiver) {
        const result = Reflect.set(tgt, key, val, receiver);
        observerQueue.forEach(v => v());
        return result;
    }
});

const person = observable({ age: 25, name: "Yajun" });
const print = () => console.log(`${person.name} is ${person.age} years old`);
observe(print);
person.name = "Joway";

Class

• Определение: абстракция для класса вещей с общими характеристиками (синтаксический сахар конструктора)
• Принцип: сам класс указывает на конструктор, и все методы определены вprototype, его можно рассматривать как другой способ написания конструктора (Class === Class.prototype.constructor)
• Методы и ключевые слова
  • constructor():Конструктор,new命令Автоматически вызывается при создании экземпляров
  • extends: наследовать от родительского класса
  • super: новый родительский классthis
  • static: определение методов статических свойств.
  • get: функция значения, перехватывает поведение значения свойства
  • set: Функция сохранения значения, которая перехватывает поведение сохранения значения свойств.
• Атрибуты
  • __proto__:构造函数的继承(всегда указывайте на父类)
  • __proto__.__proto__: прототип прототипа подкласса, то есть прототип родительского класса (всегда указывает на родительский класс__proto__)
  • prototype.__proto__:属性方法的继承(всегда ссылайтесь на родительский классprototype)
• Статические свойства: назначьте свойства после завершения класса определения, это свойство不会被实例继承, который можно вызвать только через класс
• статический метод: использоватьstaticЭто определено, метод不会被实例继承, можно вызвать только через класс (в методеthisк классу, а не к экземпляру)
• наследовать
  • вещество
    • Суть ES5: сначала создайте экземпляры подклассаthis, а затем добавьте метод свойства родительского класса вthisначальство(Parent.apply(this))
    • Суть ES6: сначала добавьте метод свойств экземпляра родительского классаthisвверх (позвонитьsuper()), а затем используйте конструктор подкласса для измененияthis
  • super
    • Вызывается как функция: может вызываться только в конструктореsuper(),внутреннийthisуказывает на унаследованное当前子类(super()Может использоваться только в конструкторе после вызоваthis)
    • Вызывается как объект: в普通方法Центральная точка父类的原型对象,существует静态方法Центральная точка父类
  • Отображение определения: использованиеconstructor() { super(); }Определить родительский класс наследования, без правил написания显示定义
  • Подкласс наследует родительский класс: когда подкласс использует метод свойства родительского класса, он должен вызываться в конструктореsuper(), иначе вы не получите родительский классthis
    • Метод статического свойства родительского класса может быть унаследован дочерним классом.
    • После того, как подкласс наследует родительский класс, его можноsuperВызов метода статического свойства родительского класса на
• Экземпляр: класс эквивалентен实例的原型, все методы свойств, определенные в классе, будут унаследованы экземпляром
  • Явное указание метода свойства: usethisприсвоить себе (используяClass.hasOwnProperty()обнаруживаемый)
  • Неявное присвоение методов свойств: напрямую объявлено и определено в прототипе объекта (с использованиемClass.__proto__.hasOwnProperty()обнаруживаемый)
• выражение
  • Выражение класса:const Class = class {}
  • Атрибут имени: возврат сразу за которым следуетclassпосле имени класса
  • Выражение свойства:[prop]
  • Метод генератора:* mothod() {}
  • Асинхронный метод:async mothod() {}
• это указывает на: будет сообщено об ошибке при деструктурировании свойства или метода экземпляра
  • Привязать это:this.mothod = this.mothod.bind(this)
  • Функция стрелки:this.mothod = () => this.mothod()
• местоположение определения свойства
  • определить в конструкторе и использоватьthisнаправление
  • определено в类最顶层
• new.target: определить, как вызывается конструктор

родной конструктор

• String()
• Number()
• Boolean()
• Array()
• Object()
• Function()
• Date()
• RegExp()
• Error()

основная трудность

• Вызов метода для экземпляра по сути является вызовом метода для прототипа.
• Object.assign()Удобно добавлять в класс сразу несколько методов (Object.assign(Class.prototype, { ... }))
• Все методы, определенные внутри класса, не являются перечислимыми (non-enumerable)
• Конструктор по умолчанию возвращает объект экземпляра (this), вы можете указать, чтобы вернуть другой объект
• Функция значения и функция значения задаются в атрибутеDescriptor对象начальство
• Класс не имеет подъема переменных
• использоватьnew.target === ClassНапишите класс, который нельзя использовать независимо и который должен быть унаследован, прежде чем его можно будет использовать.
• После того, как подкласс наследует родительский класс,thisуказывает на экземпляр подкласса черезsuperПрисвойте значение атрибуту, и назначенный атрибут станет атрибутом экземпляра подкласса.
• использоватьsuper, вы должны явно указать, использовать ли как функцию или как объект
• extendsНе только наследуемые классы, но и нативные конструкторы

метод частной собственности

const name = Symbol("name");
const print = Symbol("print");
class Person {
    constructor(age) {
        this[name] = "Bruce";
        this.age = age;
    }
    [print]() {
        console.log(`${this[name]} is ${this.age} years old`);
    }
}

Наследовать примеси

function CopyProperties(target, source) {
    for (const key of Reflect.ownKeys(source)) {
        if (key !== "constructor" && key !== "prototype" && key !== "name") {
            const desc = Object.getOwnPropertyDescriptor(source, key);
            Object.defineProperty(target, key, desc);
        }
    }
}
function MixClass(...mixins) {
    class Mix {
        constructor() {
            for (const mixin of mixins) {
                CopyProperties(this, new mixin());
            }
        }
    }
    for (const mixin of mixins) {
        CopyProperties(Mix, mixin);
        CopyProperties(Mix.prototype, mixin.prototype);
    }
    return Mix;
}
class Student extends MixClass(Person, Kid) {}

Module

• Заказ
  • export: указывает внешний интерфейс модуля.
    • Экспорт по умолчанию:export default Person(Можно указать любое имя модуля при импорте, не зная внутреннего реального имени)
    • отдельный экспорт:export const name = "Bruce"
    • экспорт по требованию:export { age, name, sex }(рекомендовать)
    • переименовать экспорт:export { name as newName }
  • import: импортировать внутренние функции модуля
    • Импорт по умолчанию:import Person from "person"
    • Общий импорт:import * as Person from "person"
    • Импорт по запросу:import { age, name, sex } from "person"
    • переименовать импорт:import { name as newName } from "person"
    • самостоятельный импорт:import "person"
    • составной импорт:import Person, { name } from "person"
  • составной режим:export命令а такжеimport命令Объединенная и записанная в одну строку, переменная фактически не импортируется в текущий модуль, что эквивалентно внешнему интерфейсу переадресации, так что текущий модуль не может напрямую использовать свои импортированные переменные.
    • Импорт и экспорт по умолчанию:export { default } from "person"
    • Общий импорт и экспорт:export * from "person"
    • Импорт и экспорт по запросу:export { age, name, sex } from "person"
    • переименовать импорт экспорт:export { name as newName } from "person"
    • Измените имя на импорт и экспорт по умолчанию:export { name as default } from "person"
    • Импорт и экспорт переименования по умолчанию:export { default as name } from "person"
• наследовать:默认导出а также改名导出Используется в комбинации, чтобы сделать модули наследуемыми
• Идея дизайна: постараться быть как можно более статичным, чтобы зависимости модулей, а также входные и выходные переменные можно было определить во время компиляции.
• Строгий режим: модули ES6 автоматически переходят в строгий режим (независимо от того, добавлен заголовок модуля или нет).use strict)

Схема модуля

• CommonJS: для сервера (динамические зависимости)
• AMD: для браузеров (динамические зависимости)
• CMD: для браузеров (динамические зависимости)
• UMD: для браузеров и серверов (динамические зависимости)
• ESM: для браузеров и серверов (статические зависимости)

Способ загрузки

• Загрузить время выполнения
  • Определение: общий модуль загрузки генерирует объект, а затем получает необходимые свойства и методы от объекта для загрузки (нагрузка все)
  • Воздействие. Этот объект можно получить только во время выполнения, что приводит к невозможности выполнения статической оптимизации во время компиляции.
• загружать во время компиляции
  • Определение: Получить требуемые свойства и методы непосредственно из модуля для загрузки (загрузка по требованию)
  • Воздействие: загрузка модуля завершается во время компиляции, что более эффективно, чем другие решения, но на сам модуль нельзя ссылаться (сам по себе не объект), который может расширить расширенный синтаксис JS (Макросы и проверка типов)

реализация нагрузки

• традиционная загрузка:пройти через<script>Загружать скрипты синхронно или асинхронно
  • Синхронная загрузка:<script src=""></script>
  • Отложить загрузки асинхронно:<script src="" defer></script>(последовательно загружаются, а затем выполняются после рендеринга)
  • Асинхронная асинхронная загрузка:<script src="" async></script>(Загрузка не по порядку, выполнить после загрузки)
• загрузка модуля:<script type="module" src=""></script>(По умолчанию установлено значение «Отложить асинхронную загрузку»).

Разница между CommonJS и ESM

• CommonJSвыход值的拷贝,ESMвыход值的引用
  • CommonJSПосле вывода значения изменения в модуле не влияют на это значение.
  • ESMЭто динамическая ссылка и не кэширует значение. Переменная в модуле привязана к модулю, в котором она находится. При фактическом выполнении сценария она будет использоваться для получения значения в загруженном модуле в соответствии с этим чтением -только ссылка.
• CommonJSзагружается во время выполнения,ESMзагружается во время компиляции
  • CommonJSЗагруженные модули являются объектами (т.е.module.exports), объект будет сгенерирован только после завершения работы скрипта.
  • ESMЗагруженный модуль не является объектом, его внешний интерфейс — это просто статическое определение, которое будет сгенерировано на этапе статического анализа кода.

Загрузка узла

• задний план:CommonJSа такжеESMТекущее решение, несовместимое друг с другом, состоит в том, чтобы разделить их и использовать собственную схему загрузки.
• Отличие: ТребованияESMиспользовать.mjsсуффикс имени файла
  • require()не могу загрузить.mjs文件,Толькоimport命令загрузить.mjs文件
  • .mjs文件нельзя использовать вrequire(), необходимо использоватьimport命令загрузить файл
• водить машину:node --experimental-modules file.mjs
• Ограничение: узлыimport命令В настоящее время поддерживает только загрузку локальных модулей (file:协议), не поддерживает загрузку удаленных модулей
• приоритет загрузки
  • В файле сценария отсутствует имя суффикса: попробуйте загрузить четыре файла имен суффиксов по очереди (.mjs,.js,.json,node)
  • Выше не существует: попробуйте загрузитьpackage.jsonизmain字段указанный скрипт
  • Выше не существует: попробуйте последовательно загрузить имя какindexЧетыре файла расширения (.mjs,.js,.json,node)
  • Вышеупомянутое не существует: ошибка
• Внутренняя переменная, которой не существует:arguments,exports,module,require,this,__dirname,__filename
• CommonJS загружает ESM
  • нельзя использоватьrequire(), использовать толькоimport()
• ESM загружает CommonJS
  • автоматическиmodule.exportsКонвертировано вexport default
  • CommonJSМеханизм кэширования вывода находится вESMВсе еще действует в режиме загрузки
  • использоватьimport命令нагрузкаCommonJS模块, не разрешается использовать按需导入, должен быть использован默认导入или整体导入

циклическая загрузка

• определение:脚本Aзависимости выполнения脚本B,а также脚本Aреализация зависит от脚本B
• Принцип загрузки
  • CommonJS:require()При первой загрузке скрипта будет выполнен весь скрипт, объект будет сгенерирован в памяти и кэширован, а скрипт будет получен непосредственно из кэша при второй загрузке скрипта.
  • ЕСМ:import命令Загруженная переменная не кэшируется, а становится ссылкой на загруженный модуль
• циклическая загрузка
  • CommonJS: вывод только той части, которая была выполнена, часть, которая не была выполнена, не будет выводиться.
  • ESM: разработчик должен гарантировать, что значение может быть получено, когда будет получено реальное значение (переменная может быть записана в виде функции, а функция имеет эффект продвижения)

основная трудность

• В модулях ES6 верхний уровеньthisнаправлениеundefined, не следует использовать в коде верхнего уровняthis
• Модуль — это независимый файл, и все переменные внутри файла не могут быть получены извне.
• export命令Выходной интерфейс и соответствующее ему значение动态绑定关系, то есть значение в реальном времени внутри модуля можно получить через этот интерфейс
• import命令Имя переменной в фигурных скобках должно совпадать с именем внешнего интерфейса импортируемого модуля.
• import命令Входная переменная доступна только для чтения (по сути это входной интерфейс), и переписывать интерфейс в скрипте, загружающем модуль, нельзя
• import命令Команда имеет эффект подъема и будет поднята на голову всего модуля, сначала выполняется
• повторить одно и то же предложениеimport语句, который будет выполнен только один раз
• export defaultкоманду можно использовать только один раз
• export default命令Экспортированный монолитный модуль при выполненииimport命令не могу следовать大括号
• export default命令Суть в том, чтобы вывести файл с именемdefaultпеременная, за которой не может следовать变量声明语句
• export default命令Суть в том, чтобы присвоить именованномуdefaultпеременная, вы можете написать значение сразу после нее
• export default命令а такжеexport {}命令могут существовать одновременно, что соответствует复合导入
• export命令а такжеimport命令Он может появиться в любом месте модуля, если он находится на верхнем уровне модуля, а не на уровне блока.
• import()После того, как модуль будет успешно загружен, модуль будет использоваться как объект какthen()параметры, вы можете использовать对象解构赋值чтобы получить выходной интерфейс
• При динамической загрузке нескольких модулей одновременно вы можете использоватьPromise.all()а такжеimport()в сочетании для достижения
• import()и объединитьasync/awaitнаписать код для синхронных операций

Шаблон Singleton: кросс-модульные константы

// 常量跨文件共享
// person.js
const NAME = "Bruce";
const AGE = 25;
const SEX = "male";
export { AGE, NAME, SEX };

// file1.js
import { AGE } from "person";
console.log(AGE);

// file2.js
import { AGE, NAME, SEX } from "person";
console.log(AGE, NAME, SEX);

Импорт по умолчанию заменяет общий импорт

import Person from "person";
console.log(Person.AGE);

import * as Person from "person";
console.log(Person.default.AGE);

Iterator

• Определение: Обеспечьте унифицированный механизм доступа к множеству различных структур данных.
• Принцип: создайте указатель на первый элемент и используйте его по порядку.next()указывает на следующий элемент, непосредственно на конечную позицию (структуру данных нужно только развернутьIterator接口для завершения операции обхода)
• эффект
  • Обеспечить единый и удобный интерфейс доступа к различным структурам данных
  • Позволяет расположить элементы структуры данных в определенном порядке
  • ES6 создает новые команды обходаfor-of,Iterator接口В основном дляfor-ofПотребление
• форма:for-of(автоматически находит интерфейс Iterator)
• структура данных
  • собирать:Array,Object,Set,Map
  • Нативные структуры данных с интерфейсами:String,Array,Set,Map,TypedArray,Arguments,NodeList
• Развертывание: по умолчанию он развернут вSymbol.iterator(Наличие этого свойства считается可遍历的iterable)
• объект итератора
  • next(): Следующая операция, возврат{ done, value }(должен быть развернут)
  • return():for-ofЗвонок на ранний выход, возврат{ done: true }
  • throw(): не использовать, сотрудничатьGenerator函数использовать

Цикл ForOf

• определение: звонокIterator接口дает объект итератора (for-ofструктура данных внутреннего вызоваSymbol.iterator())
• Перебрать строку:for-inПолучать索引,for-ofПолучать值(распознает 32-битные символы UTF-16)
• Перебрать массив:for-inПолучать索引,for-ofПолучать值
• Итерация по объектам:for-inПолучать键,for-ofНужно развернуть самостоятельно
• Пройдите через набор:for-ofПолучать值 => for (const v of set)
• Пройтись по карте:for-ofПолучать键值对 => for (const [k, v] of map)
• Перебрать массив классов:包含length的对象,Arguments对象,NodeList对象(безIterator接口的类数组доступныйArray.from()преобразование)
• Расчет генерирует структуру данных:Array,Set,Map
  • keys(): возвращает объект обхода, обходя все ключи
  • values(): возвращает объект итератора, перебирая все значения
  • entries(): Возвращает объект обхода, просматривая все пары ключ-значение.
• а такжеfor-inразница
  • имеют то же самоеfor-inтот же лаконичный синтаксис, но безfor-inэти недостатки,
  • отличный отforEach(), который можно комбинировать сbreak,continueа такжеreturnС использованием
  • Предоставляет унифицированный рабочий интерфейс для обхода всех структур данных.

Сценарии применения

• переписать сIterator接口структура данныхSymbol.iterator
• Присвоение деструктуризации: структурирование набора
• оператор распространения: будет развернутIterator接口структура данных в массив
• урожай*:yield*Вслед за проходимой структурой данных будет вызываться интерфейс обходчика
• Функции, которые принимают массивы в качестве аргументов:for-of,Array.from(),new Set(),new WeakSet(),new Map(),new WeakMap(),Promise.all(),Promise.race()

Promise

• Определение: объект, содержащий результат асинхронной операции.
• условие
  • в ходе выполнения:pending
  • удалось:resolved
  • не удалось:rejected
• Функции
  • На состояние объекта не влияет внешний мир
  • Однажды состояние изменилось, оно больше не изменится, и этот результат можно получить в любой момент.
• утверждение:new Promise((resolve, reject) => {})
• женьшень
  • resolve: изменить состояние с未完成стали成功, вызываемый при успешном выполнении асинхронной операции и передающий результат асинхронной операции в качестве параметра
  • reject: изменить состояние с未完成стали失败, вызывается при сбое асинхронной операции, передавая ошибку асинхронной операции в качестве параметра
• метод
  • then(): указать отдельноresolved状态а такжеrejected状态функция обратного вызова
    • первый параметр: Статус становитсяresolvedкогда звонят
    • второй параметр: Статус становитсяrejectedпри вызове (необязательно)
  • catch(): укажите функцию обратного вызова при возникновении ошибки
  • Promise.all(): Обернуть несколько экземпляров в новый экземпляр и вернуть массив результатов после того, как все состояния экземпляра были изменены (все изменения, а затем возврат).
    • Входные параметры: естьIterator接口структура данных
    • Успех: изменения состояния только всех экземпляровfulfilled, конечное состояние станетfulfilled
    • Ошибка: одно из состояний экземпляра изменилось наrejected, конечное состояние становитсяrejected
  • Promise.race(): обернуть несколько экземпляров в новый экземпляр и вернуть результат после того, как все состояния экземпляра будут изменены в первую очередь (сначала изменить и сначала вернуть)
    • Входные параметры: естьIterator接口структура данных
    • Успех или неудача: какой экземпляр первым изменяет состояние и возвращает состояние какого экземпляра
  • Promise.resolve(): преобразовать объект в объект Promise (эквивалентноnew Promise(resolve => resolve()))
    • Экземпляр обещания: возвращает входной параметр без изменений
    • Доступный объект: преобразовать этот объект в объект Promise и вернуть (Thenable содержитthen()объект, выполнитьthen()Эквивалентно выполнению этого объектаthen())
    • Объекты без then(): Превратите этот объект в объект Promise и верните его, статусresolved
    • без параметров: возвращает объект Promise со статусомresolved
  • Promise.reject(): преобразовать объект в состояниеrejectedОбъект обещания (эквивалентноnew Promise((resolve, reject) => reject()))

Сценарии применения

• загрузить изображение
• AJAX для обещания объекта

основная трудность

• Только результат асинхронной операции может определить, в каком состоянии находится текущее состояние, и никакая другая операция не может изменить это состояние.
• Есть только две возможности изменения состояния: изpendingсталиresolved,отpendingсталиrejected
• После новогоPromise对象будет выполнено немедленно и не может быть отменено на полпути
• Если функция обратного вызова не установлена, внутренняя ошибка не будет отражена во внешнем
• когда вpending, невозможно узнать, на какой стадии он в настоящее время прогрессирует
• Состояние экземпляра становитсяresolvedилиrejected, это вызоветthen()Привязка функции обратного вызова
• resolve()а такжеreject()Выполнение всегда позже, чем синхронная задача текущего цикла
• then()Возвращает новый экземпляр, после которого можно вызвать другойthen()
• then()Если во время работы выдается ошибка, она будетcatch()захватывать
• reject()эквивалентно выдаче ошибки
• Состояние экземпляра изменилось наresolvedКогда ошибка выдается снова, она недействительна и не будет обнаружена, что эквивалентно тому, чтобы не выбрасывать
• Ошибки состояния экземпляра имеют冒泡природе, будут передаваться в обратном направлении до тех пор, пока не будут обнаружены, ошибки всегда будут возвращены следующимcatch()захватывать
• Уходитеthen()определено вrejectedФункция обратного вызова состояния (не использует второй параметр)
• Рекомендуется использоватьcatch()поймать ошибки, не использоватьthen()захват второго параметра
• не использовалcatch()Отловите ошибку, ошибка создания экземпляра не будет передана внешнему коду, т.е.不会有任何反应
• Экземпляр, определенный как параметрcatch(), однаждыrejectedне срабатываетPromise.all()изcatch()
• Promise.reject()Параметры останутся нетронутыми, т.к.rejectedПричина становится параметром последующего метода

Generator

• Определение: решение для асинхронного программирования, которое инкапсулирует несколько внутренних состояний.
• Форма: звонитеGenerator函数(Эта функция не выполняется) Возвращает объект-указатель, указывающий на внутреннее состояние (не результат операции)
• утверждение:function* Func() {}
• метод
  • next(): переместить указатель в следующее состояние, вернуться{ done, value }(Присоединение к встрече расценивается как предыдущаяyield命令表达式Возвращаемое значение)
  • return(): возвращает указанное значение и завершает обходGenerator函数,вернуть{ done: true, value: 入参 }
  • throw():существуетGenerator函数Generator函数new Errow()
• return
  • yield命令value
  • next()yield命令
  • yield命令Generator函数return语句value
  • Generator函数return语句valueundefined
• Generator函数Generator函数Iterator接口
• for-ofnext()
• • const obj = { method: function*() {} }
  • const obj = { * method() {} }
• 上下文环境yield命令当前状态next()上下文环境

• next()throw()return()yield命令
• • next()yield命令值
  • return()yield命令return语句
  • throw()yield命令throw语句

• Generator函数Symbol.iteratorIterator接口

• next()函数头部上次停下的位置yield命令return语句
• yield命令暂缓执行函数next()
• yield命令next()это действие для возобновления
• yield命令используемый в другом выражении, должен быть помещен в圆括号внутри
• yield命令Используется как параметр функции или помещается в правую часть выражения присваивания без добавления圆括号
• yield命令Само по себе возвращаемого значения нет, его можно рассматривать как возвратundefined
• yield命令表达式для ленивой оценки и т. д.next()Оценить до этого момента
• После вызова функции генерируется объект обходчика, иSymbol.iteratorэто сам объект
• На разных этапах выполнения функции,next()Внедрять разные значения снаружи внутрь, тем самым корректируя поведение функции
• первыйnext()Используется для запуска объекта обходчика, параметры могут быть переданы позже
• хочу позвонить в первый разnext()Когда вы можете ввести значение, вы можете обернуть другой слой вне функции
• однаждыnext()возвращаемый объектdoneдляtrue,for-ofОбход прервется без возвращаемого объекта
• Внутреннее развертывание функцииtry-finallyи выполняетtry,Такreturn()приведет к немедленному входуfinally, выполнятьfinallyТогда вся функция закончится
• Внутри функции нет развертыванияtry-catch,throw()Выброшенные ошибки будут внешнимиtry-catchзахватывать
• throw()Возникновение ошибки должно быть перехвачено внутри, при условии, что она должна быть至少执行过一次next()
• throw()После захвата следующий будет казненyield命令
• Функция еще не начала выполняться, в это времяthrow()Ошибка может быть выброшена только вне функции

Первый метод next() может передать значение

function Wrapper(func) {
    return function(...args) {
        const generator = func(...args);
        generator.next();
        return generator;
    }
}
const print = Wrapper(function*() {
    console.log(`First Input: ${yield}`);
    return "done";
});
print().next("hello");

ES2016

Числовое расширение

• Экспоненциальный оператор (**): Числовое возведение в степень (эквивалентноMath.pow())

расширение массива

• includes(): существует ли указанный элемент

ES2017

утверждение

• Общая память и атомарные операции: глобальным объектомSharedArrayBufferа такжеAtomicsреализация, хранящая данные в общем пространстве памяти, которое можно найти вJS主线程а такжеweb-worker线程делится между

расширение строки

• padStart(): заполнить указанную строку до начала строки и вернуть новую строку
• padEnd(): заполнить указанную строку до конца строки и вернуть новую строку

расширение объекта

• Object.getOwnPropertyDescriptors(): Возвращает объект описания всех его собственных свойств (не унаследованных свойств) объекта.
• Object.values(): возвращает массив значений
• Object.entries(): возвращает массив ключей и значений

расширение функции

• запятая в конце параметра функции: разрешить запятую в конце последнего параметра функции

Async

• Определение: сделать асинхронные функции написанными в виде синхронных функций (синтаксический сахар функции генератора)
• Принцип:Generator函数и автоматический исполнительspawnзавернутый в функцию
• Формат: будетGenerator函数из*заменитьasync,Будуyieldзаменитьawait
• утверждение
  • Именованная функция:async function Func() {}
  • Выражение функции:const func = async function() {}
  • Функция стрелки:const func = async() => {}
  • Методы объекта:const obj = { async func() {} }
  • метод класса:class Cla { async Func() {} }
• команда await: дождитесь изменения состояния текущего объекта Promise
  • Обычная ситуация: если за объектом Promise следует результат, будет возвращен результат, в противном случае будет возвращено соответствующее значение.
  • с последующимThenable对象: приравнивает его к объекту Promise и возвращает его результат
• Обработка ошибок: будетawait命令Promise对象помещатьtry-catchСредний (множественный)

Async улучшает генератор

• Встроенный привод
• лучшая семантика
• более широкая применимость
• Возвращаемое значение является объектом Promise.

Сценарии применения

• Последовательное выполнение асинхронных операций

основная трудность

• Async函数вернутьPromise对象, быть пригодным для использованияthen()Добавить функцию обратного вызова
• внутреннийreturn返回值будет продолжениемthen()исходящий
• Внутреннее выбрасывание ошибки приводит к тому, что возвращаемый объект Promise становитсяrejected状态,стеганое одеялоcatch()получено
• Возвращенный объект Promise должен ждать, пока все внутренниеawait命令Promise对象Изменение состояния произойдет только после выполнения, если оно не встретитreturn语句или抛出错误
• любойawait命令Promise对象сталиrejected状态,весьAsync函数выполнение будет прервано
• Есть надежда, что последующие асинхронные операции не будут прерваны, даже если предыдущая завершится ошибкой.
  • Будуawait命令Promise对象помещатьtry-catchсередина
  • await命令Promise对象Сcatch()
• await命令Promise对象может статьrejected状态, лучше поставитьtry-catchсередина
• несколькоawait命令Promise对象Если нет вторичных отношений, лучше позволить им срабатывать одновременно.
• await命令можно использовать только вAsync函数, иначе будет сообщено об ошибке
• использование массиваforEach()воплощать в жизньasync/awaitне получится, можно использоватьfor-ofа такжеPromise.all()заменять
• Стек выполнения может быть сохранен, а контекст функции следуетAsync函数существует для выполнения и исчезает, когда выполнение завершено

ES2018

расширение строки

• Ослабить ограничения на экранирование строк в шаблонах тегов.: Возврат при обнаружении недопустимого escape-последовательности строкиundefined, и изrawИсходную строку можно получить на

расширение объекта

• оператор спреда(...): преобразование объекта в последовательность параметров, разделенных запятыми ({ ...obj }, эквивалентноrest/spread参数обратная операция)

Расширенное приложение

• Клонировать объект:const obj = { __proto__: Object.getPrototypeOf(obj1), ...obj1 }
• Объединить объекты:const obj = { ...obj1, ...obj2 }
• Преобразование строки в объект:{ ..."hello" }
• Преобразование массива в объект:{ ...[1, 2] }
• Совместите с заданием по разборке объекта:const { x, ...rest/spread } = { x: 1, y: 2, z: 3 }(Невозможно скопировать свойства, унаследованные от объекта-прототипа)
• Измените существующие свойства части объекта:const obj = { x: 1, ...{ x: 2 } }

Регулярное расширение

• модификатор s:dotAll модификатор режима сделать.соответствует любому одиночному символу (dotAll模式)
• dotAll: установить лиs修饰符
• ретроспективное утверждение:xтолько вyматч после
• ретроспективное отрицательное утверждение:xтолько отсутствуетyматч после
• Экранирование свойства Unicode: совпадение совпаденийUnicode某种属性все персонажи
  • Прямое сопоставление:\p{PropRule}
  • Обратное совпадение:\P{PropRule}
  • лимит:\p{...}а также\P{...}только правильноUnicode字符Эффективен, нужно добавлять при использованииu修饰符
• именованный групповой матч: укажите имя для каждого набора совпадений (?<GroupName>)
  • форма:str.exec().groups.GroupName
  • Замена присваивания деструктурирования
    • утверждение:const time = "2017-09-11",const regexp = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u
    • соответствовать:time.replace(regexp, "$<day>/$<month>/$<year>")

Promise

• finally(): укажите функцию обратного вызова, которая будет выполняться независимо от последнего состояния.

Async

• Асинхронный итератор (для ожидания): цикл ожидания каждогоPromise对象сталиresolved状态прежде чем перейти к следующему шагу

ES2019

расширение строки

• Введите U+2028 и U+2029 напрямую: Строка может быть введена напрямую行分隔符а также段分隔符
• JSON.stringify() Модернизация: может вернуть строку, не соответствующую стандарту UTF-8.
• trimStart(): удалить пробелы в начале строки и вернуть новую строку.
• trimEnd(): удалить конечные пробелы из строки и вернуть новую строку

расширение объекта

• Object.fromEntries(): возвращает объект, состоящий из ключей и значений (Object.entries()обратная операция)

расширение массива

• стабильность sort(): элементы с одинаковым ключом сортировки имеют одинаковый порядок до и после сортировки, по умолчанию稳定
• flat(): сгладить массив, вернуть новый массив
• flatMap(): сопоставить и сгладить массив, вернуть новый массив (можно расширить только один слой массива)

расширение функции

• Преобразование toString(): вернуть исходный код функции (в соответствии с кодировкой)
• Параметр catch() может быть опущен.:catch()Параметры могут быть опущены

Symbol

• description:вернутьSymbol值описание

ES2020

утверждение

• globalThis: как объект верхнего уровня, указывающий на глобальную средуthis
  • Браузер: объект верхнего уровняwindow
  • Узел: объект верхнего уровняglobal
  • WebWorker: объект верхнего уровняself
  • Над тремя: общий объект верхнего уровняglobalThis

Числовое расширение

• BigInt: целое число из любого количества цифр (новый тип данных, используйтеnконец)
  • BigInt(): конвертировать обычные числовые значения в типы BigInt
  • BigInt.asUintN(): преобразовать BigInt в 0 или 2ⁿСоответствующее значение между -1
  • BigInt.asIntN(): преобразовать BigInt в -2^n-1до 2^n-1-1
  • BigInt.parseInt(): примерноNumber.parseInt(), преобразует строку в тип BigInt указанного основания

основная трудность

• BigInt также может быть представлен различными основаниями, при этом необходимо добавлять суффиксы.
• BigInt и обычное целое — это два вида значений, они не равны
• Оператор typeof возвращает данные типа BigInt.bigint

расширение объекта

• оператор цепочки (?.): Есть ли свойство объекта (без возвратаundefinedи не продолжайте дальше)
  • Свойства объекта:obj?.prop,obj?.[expr]
  • вызов функции:func?.(...args)
• Нулевой оператор (??): является ли значениеundefinedилиnull, если да, используйте значение по умолчанию

Регулярное расширение

• matchAll(): возвращает все подходящие обходчики

Module

• import(): динамический импорт (возвратPromise)
  • задний план:import命令Он статически анализируется движком JS и выполняется перед другими операторами в модуле и не может быть заменен.require()Функция динамического нагружения предлагается ввестиimport()заменитьrequire()
  • Местоположение: Доступно в любом месте
  • разница:require()дасинхронная загрузка,import()даАсинхронная загрузка
  • Сценарий: загрузка по требованию, условная загрузка, динамический путь к модулю.

Iterator

• порядок обхода for-in: Различные движки договорились о том, как перебирать свойства, стандартизируя поведение.

Promise

• Promise.allSettled(): обернуть несколько экземпляров в новый экземпляр и вернуть массив состояний после того, как все состояния экземпляров были изменены (все изменения, а затем возврат).
  • Входные параметры: естьIterator接口структура данных
  • Успех: Участник содержитstatusа такжеvalue,statusдляfulfilled,valueдля возвращаемого значения
  • Ошибка: участник содержитstatusа такжеreason,statusдляrejected,valueпо неправильной причине

предложение ЕС

утверждение

• сделать выражение: инкапсулирует операции с областью действия блока, возвращая значение последнего выполненного выражения внутри (do{})
• бросить выражение: Использовать напрямуюthrow new Error(), без()или{}включать
• !#Заказ: Указать исполнителя скрипта (прописано в первой строке файла)

Числовое расширение

• Числовой разделитель (_):использовать_как разделитель тысяч (для повышения удобочитаемости числовых значений)
• Math.signbit(): Возвращает, установлен ли числовой знак

расширение функции

• выполнение функциональной части: функция повторного использования (?представляет собой заполнитель для одного параметра,...Указывает несколько заполнителей параметров)
• Оператор канала (|>): передать значение выражения слева в функцию справа для оценки (f(x) => x |> f)
• оператор привязки (::): привязка функции (слева — объект, справа — функция, вместоbind,apply,callпередача)
  • связывать:bar.bind(foo) => foo::bar
  • применять:bar.apply(foo, arguments) => foo::bar(...arguments)

Realm

• определение: обеспечивать沙箱功能, что позволяет изолированному коду предотвратить получение глобального объекта изолированным кодом.
• утверждение:new Realm().global

Class

• статические свойства:использоватьstaticопределить свойство, свойство不会被实例继承, который можно вызвать только через класс
• частная собственность:использовать#Определите свойство, к которому можно получить доступ только внутри класса
• частный метод:использовать#Определите метод, к которому можно получить доступ только внутри класса
• декоратор:использовать@Аннотировать или изменять классы и методы классов

Module

• import.meta: вернуть метаинформацию скрипта

Promise

• Promise.any(): Обернуть несколько экземпляров в новый экземпляр и вернуть массив результатов после того, как все состояния экземпляра были изменены (все изменения, а затем возврат).
  • Входные параметры: естьIterator接口структура данных
  • Успех: один из статусов экземпляра становитсяfulfilled, конечное состояние становитсяfulfilled
  • Ошибка: только состояние всех экземпляров изменилось наrejected, конечное состояние станетrejected
• Promise.try(): не хотите различать синхронные и асинхронные функции, оберните функцию как экземпляр, используйтеthen()Чтобы указать следующий процесс, используйтеcatch()поймать ошибки

Async

• Топ Ожидайте: позволяет независимое использование на верхнем уровне модуляawait命令(заниматьawaitРешить проблему асинхронной загрузки модулей)

Суммировать

Наконец, я вышлю вам полную карту функций ES6, не забудьте дать ее мне.поставить лайкО, это своего рода поддержка для меня. Поскольку изображение слишком большое для загрузки, пожалуйста, обратите вниманиеIQ前端или отсканировать文章底部二维码, фоновый ответES6, получите карту памяти в высоком разрешении со всеми функциями ES6, которая поможет вам легко запомнитьВсе функции ES6.

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

• Ответить после подписки资料Бесплатная коллекция учебных материалов
• Ответить после подписки进群Втяните вас в группу технического обмена
• Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт