Просидев 7 дней допоздна, я подытожил 25 баллов знаний JavaScript и ES.

JavaScript HTML

熬夜7天，我总结了JavaScript与ES的25个知识点

предисловие

Говоря о JavaScript, все знают, что это язык сценариев. Так что же такое, черт возьми, ЕС? ES означает ECMAScript, международный стандарт языка JavaScript.

Недавно я обобщил 25 пунктов знаний, связанных с базовыми возможностями JavaScript, давайте посмотрим

熬夜7天，我总结了JavaScript与ES的25个知识点

1. Строгий режим

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

  • Прагма для строгого режима "использовать строгий"

  • Создавать глобальные переменные, необъявленные переменные, создавать глобальные переменные в нестрогом режиме, бросать ReferenceError в строгом режиме

  • Вызвать оператор удаления для переменной, чтобы удалить переменную, молча сбой в нестрогом режиме; выдать ReferenceError в строгом режиме

  • В случае объекта операции: A, атрибут только для чтения атрибут будет бросать JoyError; B. Используйте оператор DELETE для броска JypeError; C, добавить атрибуты на неосторожные объекты, выбрасываемые joyError.

  • Атрибуты с одинаковыми именами: а — в нестрогом режиме ошибки нет, приоритет имеет второй атрибут; б — в строгом режиме будет выдана синтаксическая ошибка.

  • Параметр функции должен быть уникальным, параметр с таким же именем, в нестрогом режиме ошибки нет, доступен только второй параметр, в строгом режиме будет выброшена ошибка.

    function funValue(value) { value="dada"; alert(value); // dada alert(argument[0]); // нестрогий режим: dada // строгий режим dadaqianduan}​funValue('dadaqianduan');

  • Доступ к arguments.callee и arguments.caller без проблем в нестрогом режиме выдает TypeError в строгом режиме.

2. Базовая грамматика класса

Как объявить класс в JavaScript? Как определить методы в классе? Как создать экземпляр объекта?

Давайте посмотрим на следующий пример кода:

// es5​let dada = function(type) {	this.type = type}​dada.prototype.study = function() {	console.log('魔王哪吒');}​let da1 = new dada('程序员')let da2 = new dada('It')​da1.constructor.prototype.study = function() {	console.log('dadaqianduan');}da1.study()

Свойство конструктора JavaScript

Определение и использование

Свойство конструктора возвращает ссылку на функцию массива, которая создала этот объект.

грамматика

object.constructor

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

// es6class Da {  constructor(name) { // 构造函数内写属性    this.name = name;  }  eat() { // 构造函数外写方法  	console.log('i eat')  }}​const da1 = new Da('da1');​console.log(da1.name); // da1console.log(da1);
  1. В классе может быть только один метод с именем «конструктор», и несколько методов конструктора вызовут ошибку SyntaxError.
  2. Вы можете использовать super в конструкторе для вызова конструктора родительского класса
  3. Если метод конструктора не указан, используется конструктор по умолчанию.

3. Установщики свойств и получатели классов

var daObj = { get val() {  return ; }, set val(value) { }}

get:

var da = {    a: 1,    get val(){        return this.a + 1;    }}​console.log(da.val);//2da.val = 100;console.log(da.val);//2​class Da { constructor(type) {  this.type = type } get age() {  return 1 } set age(val) {  this.realAge = val } eat() {  console.log('i am eat') }}let da1 = new Da('da1')console.log(da1.age)da1.age = 1console.log(da1.realAge)

class Da { constructor(type, age) {  this.type = type  this.age1 = age } get age() {  return this._age } set age(val) {  this._age = val }}

Используйте set/get для инкапсуляции element.innerHTML

class myHTMLElement { constructor(element) {  this.element = element } get html() {  return this.element.innerHTML } set html(value) {  this.element.innerHTML = value }}

Настройте замыкание и ограничьте его модификацию определенными правилами:

let myName = 'dada'class Da { constructor(type) {  this.type = type } get name() {  return myName } set name(val) {  myName = val }}

4. Статические методы

Статический метод реализован в es5:

let Da = function (type) { this.type = type this.eat = function() {  console.log('i eat') }}Da.study = function(book) { console.log('i book');}

let Da = function(type) { this.type = type}Da.prototype.eat = function() { Da.walk() console.log('i am')}Da.walk = function(){ console.log('walk')}let da1 = new Da('da1')da1.eat()​// walk// i am

Статические методы не найдены в вашем созданном объекте

Es6 статический метод, статические метки

class Da { constructor(type) {  this.type = type } eat() {  console.log('i eat') } static study() {  console.log('i study') }}

5. Как наследовать класс

Наследование в es5:

// 定义一个父类let Da = function(type) { this.type = type}// 定义方法Da.prototype.eat = function() { console.log('i am')}// 定义静态方法Da.study = function(book) { console.log('i study')}// 定义子类let Da1 = function() { // 初始化父类 Da.call(this, 'da1'); this.run = function() {  console.log('i run') }}// 继承Da1.prototype = Da.prototype

Наследование в es6

class Da { constructor(type) {  this.type = type } eat() {  // Da.walk();  console.log('i eat') } static walk(){  console.log('i walk') }}​class da extends Da { // 构造函数 //constructor (type) {  //super(type) //} run() {  console.log('i run') }}let da1 = new da('da1')

6. Класс объектно-ориентированного программирования

Объявления классов, свойства, методы, статические методы, наследование, полиморфизм, частные свойства

// 类的声明let Da = function(type) { this.type = type this.eat = function() {  console.log('i eat'); }}​let da = new Da('da');

// prototypelet Da = function(type) { this.type = type}Da.prototype.eat = function() { console.log('i eat')}let da1 = new Da('da1')

Класс в es6

class Da { // 构造函数 constructor(type) {  this.type = type } // 方法 walk() {  console.log('i walk') }}let da = new Da('da');// console.log(typeof Da); function

7. Значения по умолчанию для параметров функции

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

// 参数默认值function da (x,y,z) {}function sum() { let num = 0 Array.prototype.forEach.call(arguments, function(item){  num += item * 1 }) Array.from(arguments).forEach(function(item){  num += item * 1 }) return num}

// 不确定function sum(...nums) { let num = 0 nums.forEach(function(item){  num += item * 1 }) return num}console.log(sum(1,2,3,4,5))

function sum () {  let num = 0  Array.prototype.forEach.call(arguments, function (item) {    num += item * 1  })  return num}​function sum (...nums) {  let num = 0  nums.forEach(function (item) {    num += item * 1  })  return num}

8. стрелочные функции es6

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

() => {}// function Da() {}// let da = function() {}let da = () => { console.log('hello')}da()​let da = name => {}

const materials = [  'Hydrogen',  'Helium',  'Lithium',  'Beryllium'];console.log(materials.map(material => material.length));// expected output: Array [8, 6, 7, 9]

расширять

Функция оценки имеет несколько параметров

  1. В ES5 для определения можно использовать аргументы в теле функции.

  2. В ES6 для оценки можно использовать Function.length. (подсчитайте количество переменных перед первым параметром по умолчанию)

    console.log(sum(...[4]))console.log(sum.apply(null, [4]))

9. Три точки в JavaScript (…)

В JavaScript перед параметрами функции стоят три точки, что они означают? Давайте посмотрим на пример кода:

function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26]};myFunc(22, 98, 43, 3, 26);

function myFunc(x, y, ...params) { // used rest operator here  console.log(x);  console.log(y);  console.log(params);}​var inputs = ["a", "b", "c", "d", "e", "f"];myFunc(...inputs); // used spread operator here// "a"// "b"// ["c", "d", "e", "f"]

var obj1 = { foo: 'bar', x: 42 };var obj2 = { foo: 'baz', y: 13 };​var clonedObj = { ...obj1 };// Object { foo: "bar", x: 42 }​var mergedObj = { ...obj1, ...obj2 };// Object { foo: "baz", x: 42, y: 13 }

10.Object Property

Определение атрибута объекта в JS, пример кода выглядит следующим образом:

let x = 'da1';let y = 'da2';let obj = { x, y}console.log(obj);​// 结果{x:'da1',y:'da2'}

let x=1; let y=2; let z=3let obj = { 'x': x, y, [z+y]: 4, * hello() { // 异步  console.log('dada') }}// function* functionName() {}obj.hello()

Среди них *hello — это функция Generator, которая представляет собой асинхронное решение, предоставляемое ES6.

11.Установить структуру данных

Набор хранимых элементов не допускает дублирования (это похоже на массивы)

Сам Set является конструктором, который генерирует структуру данных Set.

const s = new Set();​[2, 3, 5].forEach(x => s.add(x));​Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化​const set = new Set([1, 2, 3, 4, 4]);

Реализовать дедупликацию массива

var arr = [1,1,2,2,3,3]; // step1:数组转集合var s = new Set(arr); // 已经去掉重复值，当前不是数组，而集合s.size; // 3// step2:集合转数组console.log([...s]); // 1,2,3;​// Array.form 方法可以将 Set 结构转为数组const items = new Set([1, 2, 3]);const arr = Array.from(items);​function dada(array) {  return Array.from(new Set(array));}​dada([1, 1, 2])

Обход набора

  • keys(): возвращает обходчик имен ключей
  • values(): итератор, который возвращает ключевые значения
  • entry(): возвращает обход пар ключ-значение
  • forEach(): выполняет итерацию по каждому члену, используя функцию обратного вызова.

Как работать

  • add(value): добавить значение и вернуть саму структуру Set.

  • удалить (значение): удалить значение и вернуть логическое значение, указывающее, было ли удаление успешным.

  • has(value): возвращает логическое значение, указывающее, является ли значение членом набора.

  • clear(): очищает все члены, без возвращаемого значения.

    let set = new Set([1, 2, 3, 4, 4]);​// добавляем данные let addSet = set.add(5);console.log(addSet); // Set(5) {1, 2, 3, 4, 5}​// Удаляем данные let delSet = set.delete(4);console.log(delSet); // true​// Проверяем, есть ли данные 4let hasSet = set.has(4) ; console.log(hasSet); // false​// очистить все данные set.clear();console.log(set); // Set(0) {}

Реализовать объединение, пересечение и различие

let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2, 1]);​// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}​// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {1, 2, 3}​// 差集let difference = new Set([...b].filter(x => !a.has(x)));// Set {4}

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

Хеш-таблица в JS используется следующим образом:

let map = new Map()map.set(1, 2)map.set(3, 4)map.set(1, 3)console.log(map)​创建var da = new Map();var jeskson = {};遍历da.forEach(function(value,key,map){}长度da.size删除//da.delete() 删除key，全部清楚da.clear()新增da.set(key,value)da.has(查索引值)​da.forEach((value,key) =>{})​for( let [key, value] of map){}​// let map = new Map( [[1,2], [3,4]] )​map的key任意都可以let o = function() { console.log('o')}map.set(o, 3)console.log(map.get(o)); // 3

// map.jsvar Dictionary = function() { var items = {}; // 检查键 this.has = function(key) {  return key in items; } // 添加键值对 this.set = function(key, value){  items[key] = value; } // 通过键移除元素 this.delete = function(key) {  if(this.has(key)){   delete items[key]   return true  }  return false } // 键获取值 this.get = function(key){  return this.has(key) ? items[key] : undefined; } // 列表返回字典值 this.values = function() {  var values = [];  for(var k in items) {   if(this.has(k)) {    values.push(items[k])   }  }  return values; } // 获取全部键名 this.keys = function() {  return Object.keys(items); } // 获取私有变量items this.getItems = function() {  return items; }}

Структура данных карты, аналогичная объектам, также представляет собой набор пар ключ-значение, но область действия «ключей» не ограничивается строками, и в качестве ключей могут использоваться различные типы значений (включая объекты).

13.Object.assign (копия объекта)

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

const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };​const returnedTarget = Object.assign(target, source);​console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }​console.log(returnedTarget);// expected output: Object { a: 1, b: 4, c: 5 }​> Object { a: 1, b: 4, c: 5 }> Object { a: 1, b: 4, c: 5 }

грамматика

Object.assign(target, ...sources)

параметр

target

цель

sources

исходный объект

возвращаемое значение

цель.

const obj = { a: 1 };const copy = Object.assign({}, obj);console.log(copy); // { a: 1 }

  • Object.assign() копирует (перечисляемые) значения свойств

  • Первый параметр метода Object.assign — целевой объект, а следующие параметры — исходный объект.

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

  • Поскольку undefined и null не могут быть преобразованы в объекты, при их использовании в качестве параметров будет сообщено об ошибке

  • Если в первом параметре нет undefined и null, об ошибке не будет сообщено.

  • Если значением атрибута исходного объекта является объект, то копия целевого объекта является ссылкой на объект (любые изменения объекта будут отражены в целевом объекте).

    Object.assign(undefined) // ошибка Object.assign(null) // error​let obj = {a: 1};Object.assign(obj, undefined) === obj // trueObject.assign(obj, null) === obj // true​const obj1 = {a: {b: 1}};const obj2 = Object.assign({}, obj1);​obj1.ab = 2;obj2.ab // 2​const target = { a: { b: 'c', d: 'e' } } const source = { a: { b: 'hello' } } Object.assign(target, source)// { a: { b: 'hello ' } }​const source = { get foo() { return 1 }};const target = {};​Object.assign(target, source)// { foo: 1 }

Object.assign копирует значение значения атрибута.Если значение атрибута является ссылочным типом, то скопированный адрес на самом деле является ссылочным адресом, и возникнет проблема совместного использования ссылки (Object.assign(target,source1,..., исходник N) Поверхностное копирование процесса)

Ключевые моменты:

熬夜7天，我总结了JavaScript与ES的25个知识点

function ObjectAssign(target, ...sources) { // 对第一个参数的判断，不能为undefined和null if(target === undefined || target === null) {  throw my TypeError('error'); } // 将第一个参数转为对象(不是对象转换为对象) const targetObj = Object(target); // 将源对象自身的所有可枚举属性复制到目标对象 for(let i = 0; i<sources.length; i++){  let source = sources[i];  // 对于undefined和null在源中不会报错，会直接跳过  if(source !== undefined && source !== null) {   // 将源象转换成对象   // 需要将源自身的可枚举数据进行复制   // Reflect.ownKeys(obj)   const keysArray = Reflect.ownKeys(Object(source));   for (let nextIndex = 0; nextIndex < keysArray.length; nextIndex++) {    const nextKey = keysArray[nextIndex];    // 去除不可枚举属性    const desc = Object.getOwnPropertyDescriptor(source,nextKey);    if(desc!==undefined&&desc.enumerable){     targetObj[nextKey] = source[nextKey];    }   }  } } return targetObj;}if(typeof Object.myAssign !== 'function'){ Object.defineProperty(Object, 'myAssign', {  value: ObjectAssign,  writable: true,  enumerable: false,  configurable: true });}

Принцип реализации мелкого копирования Object.assign

Скопируйте базовое аналоговое значение первого уровня и адрес эталонного типа первого уровня:

let da1 = { name: 'da1', age: 1}​let da2 = { name: 'da2', study: {  title: 'web' }}​let da3 = Object.assign(da1,da2);console.log(da3);// {// name: 'da2',// age: 1,// study: { title: 'web' }// }console.log( da1 === da3); // true​da2.name = 'da22';da2.study.title = 'web2';console.log(da2);// {// name: 'da22',// study: { title: 'web2' }// }​console.log(da1);// {// age: 1,// name: 'da2',// study: { title: 'web2' }// }

Если значение атрибута исходного объекта является ссылкой на объект, копируется только адрес ссылки!

let da1 = { name: 'da1', age: 1}let da2 = { a: Symbol('dadaqianduan'), b: null, c: undefined}let da3 = Object.assign(da1, da2);console.log(da3);// {// name: 'da1',// age: 1,// a: Symbol('dadaqianduan'),// b: null,// c: undefined// }console.log(da1 === da3); // true

熬夜7天，我总结了JavaScript与ES的25个知识点

熬夜7天，我总结了JavaScript与ES的25个知识点

熬夜7天，我总结了JavaScript与ES的25个知识点

熬夜7天，我总结了JavaScript与ES的25个知识点

熬夜7天，我总结了JavaScript与ES的25个知识点

let map = new Map([iterable])// Map是用来实现字典的功能-Object键值对

熬夜7天，我总结了JavaScript与ES的25个知识点

Ключи динамических свойств

// ES5 codevar  key1 = 'one',  obj = {    two: 2,    three: 3  };​obj[key1] = 1;​// obj.one = 1, obj.two = 2, obj.three = 3​// ES6 codeconst  key1 = 'one',  obj = {    [key1]: 1,    two: 2,    three: 3  };​// obj.one = 1, obj.two = 2, obj.three = 3​// ES6 codeconst  i = 1,  obj = {    ['i' + i]: i  };​console.log(obj.i1); // 1

Дополнение: Тестовый сайт фронтенд-интервью, HTML и CSS, оптимизация производительности, прототип, область видимости, асинхронность, различный рукописный код, DOM-события и Ajax, HTTP-протокол.

  • css (макет, позиционирование, адаптивность к мобильным устройствам)
  • es (прототип, цепочка прототипов, объем, замыкание, асинхронность, один поток)
  • webapi (DOM BOM, междоменное Ajax, хранилище событий)
  • Среда разработки (управление версиями, отладка и захват, упаковка и сборка)
  • Операционная среда (рендеринг страниц, оптимизация производительности, веб-безопасность)
  • Сетевое общение
  1. макет (блочная модель, BFC, float, flex)
  2. Позиционирование, стиль графики, адаптивность к мобильным устройствам (rem, media query, vw/vh), анимация, градиент
  3. Типы переменных и вычисления (типы значений и ссылочные типы, оценка типов, логические операции)
  4. Прототипы и цепочки прототипов (класс, наследование, прототип, цепочка прототипов, instanceof)
  5. Область видимости и замыкания (область видимости, свободные переменные, замыкания, this)
  6. Асинхронный (один поток, обратный вызов, сценарий приложения, обещание, цикл обработки событий, асинхронность/ожидание, микрозадача/макротаска)
  7. Модульный (модуль ES6)
  8. Дом (древовидная структура, узел манипуляции, свойства, манипуляция деревьев, производительность)
  9. Спецификация (навигатор, экран, местоположение, история)
  10. События (связывание, всплытие, проксирование)
  11. ajax (XMLHttpRequest, код состояния, перекрестный домен)
  12. Хранилище (cookie, localStorage, sessionStorage)
  13. Среда разработки (git, debug, webpack и babel, команды linux)
  14. Среда выполнения (загрузка страницы: загрузка, рендеринг. Оптимизация производительности: оптимизация загрузки ресурсов, оптимизация рендеринга. Безопасность: xss, CSRF)
  15. HTTP-протокол: код состояния, метод, Restful API, заголовки, стратегия кэширования

14. Текст шаблона

Шаблонные литералы — это новая функция es2015/es6. По сравнению с es5 и более ранними версиями вы можете использовать строки по-новому. Во-первых, вам нужны только обратные кавычки вместо одинарных или двойных кавычек:

const module_string = `dadaqianduan`

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

  1. Предоставляет синтаксис для определения многострочных строк;
  2. Предоставляет простой способ интерполяции переменных и выражений в строках.
  3. Позволяет создавать DSL (языки домена) с использованием тегов шаблона.

Используйте многострочные строки

Версии до es6:

// 要创建跨越两行的字符串，必须\在行尾使用字符​const dada =  'dada \  dadaqianduan'  // 呈现效果：在两行上创建一个字符串，但是仅在一行上呈现

Для рендеринга в несколько строк вам нужно добавить \n в конце каждой строки.

const string =  'dada 魔王哪吒\n \  dadaqianduan'

Открыв литерал шаблона с помощью обратных кавычек, просто нажмите Enter:

const dada = `dadaqianduan 魔王哪吒`

Помните, что пробелы здесь имеют смысл:

const da = `First            Second`

熬夜7天，我总结了JavaScript与ES的25个知识点

Используя метод trim(), вы можете удалить все пробелы перед первым символом.

Интерполяция: литералы шаблонов обеспечивают простой способ вставки переменных и выражений в строки.

const da = `dadaqianduan ${mydada}`​${}里面可以添加任何东西​const da1 = `dada ${1+2+3}`const da2 = `dada ${dafun() ? 'x' : 'y'}`

15. Что такое деструктурирующее присваивание

let da = ['hello', 'world']let [firstName, surName] = dacosole.log(firstName, surName);

Деструктуризация присваивания заключается в присваивании, его копировании и присвоении переменной, а сам присваиваемый элемент не изменится

По умолчанию

let [da1, da2] = [];​console.log(da1); // undefinedconsole.log(da2); // undefined

Присвойте значения переменным (значения по умолчанию), чтобы предотвратить неопределенность:

let [da1= 'da1', da2 = 'da2']=['dadaqianduan]​console.log(da1); // dadaqianduanconsole..log(da2); // da2

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

Индексы в ES5 извлекают следующие значения:

var myArray = ['a', 'b', 'c'];var  one   = myArray[0],  two   = myArray[1],  three = myArray[2];​// one = 'a', two = 'b', three = 'c'

Деструктуризация ES6 позволяет использовать более простой подход:

const [one, , three] = myArray;​// one = 'a', three = 'c'

Используйте оператор rest (...) для извлечения оставшихся элементов:

const [one, ...two] = myArray;​// one = 'a', two = ['b, 'c']

const myObject = {  one:   'a',  two:   'b',  three: 'c'};​// ES6 destructuring exampleconst {one: first, two: second, three: third} = myObject;​// first = 'a', second = 'b', third = 'c'

Обмен изменяемой стоимостью

var a = 1, b = 2;​// ES5 swapvar temp = a;a = b;b = temp;​// a = 2, b = 1​// ES6 swap back[a, b] = [b, a];​// a = 1, b = 2​[b, c, d, e, a] = [a, b, c, d, e];

В ES6 мы можем присвоить значение по умолчанию любому параметру.

function dada(param = {}) {

Функции возвращают несколько значений (функции могут возвращать только одно значение, но могут быть сложным объектом или многомерным массивом)

function f() {  return [1, 2, 3];}​const [a, b, c] = f();​// a = 1, b = 2, c = 3

Глубокая деструктуризация ES6 JavaScript

Ненайденные свойства по умолчанию не определены

var {da} = {bar: 'dada'}console.log(da)// undefined

Если вы получите доступ к глубоко вложенному свойству несуществующего родителя, вы получите исключение.

var {da:{bar}} = {dada: 'dadaqianduan'}// Exception

var key = 'dadaqianduan'var { [key]: foo } = { dadaqianduan: 'bar' }console.log(foo)// 'bar'

var {da=3} = { da: 2 }console.log(da)// 2var {da=3} = { da: undefined }console.log(da)// 3var {da=3} = { bar: 2 }console.log(da)// 3​var [a] = []console.log(a)//  undefinedvar [b=10] = [undefined]console.log(b)//  10var [c=10] = []console.log(c)//  10​function da () {  return {    x: 1,    y: 2  }}var {x, y} = da()console.log(x)// 1console.log(y)// 2

16. Асинхронные операции

Callback

Promise

function loadScript(src) { return new Promise((resolve, reject) => {  let script = document.createElement('script')  script.src = src  script.onload = () => resolve(src)  script.onerror = (err) => reject(err)  document.head.append(script) })}

function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script)}

var promise = new Promise(function(resolve, reject){ resolve('传递给then的值')})promise.then(function(value){ console.log(value)},function(error){ console.error(error)})

Объект Promise используется для представления возможного завершения (или сбоя) асинхронной операции, а также ее результирующего значения.

Пример:

const promise = new Promise((resolve, reject) => { setTimeout(() => {  resolve('da'); }, 200);});​promise.then((value) => { console.log(value);});​console.log(promise);

грамматика:

new Promise(function (resolve,reject){...});

Описание: Объект Promise является прокси-объектом. Значение прокси-сервера может быть неизвестно при создании объекта Promise. Это позволяет привязывать соответствующие методы обработки для успеха и неудачи асинхронных операций, что делает асинхронные методы похожими на синхронные. Возвращаемое значение, но не окончательный результат выполнения сразу, а объект обещания, который может представлять результат в будущем.

Обещание имеет следующие состояния:

  1. pending, начальное состояние, не является ни состоянием успеха, ни состоянием отказа.
  2. выполнено, что означает успешное завершение операции.
  3. отклонено, что означает, что операция не удалась.

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

熬夜7天，我总结了JavaScript与ES的25个知识点

Методы Promise.prototype.then и Promise.prototype.catch возвращают объекты обещаний, поэтому их можно объединить в цепочку.

метод:

Promise.all(iterable)

  1. возвращает новый объект обещания
  2. Успех будет инициирован только тогда, когда все объекты обещания в итерируемом объекте параметра будут успешными.
  3. Когда объект обещания в любом итерируемом объекте терпит неудачу, сбой объекта обещания будет вызван
  4. Состояние успеха будет использовать массив, содержащий все возвращаемые значения промисов в итерируемом объекте, в качестве возвращаемого значения обратного вызова успеха в том же порядке, что и итерируемый.
  5. Если этот новый объект обещания терпит неудачу, он будет использовать сообщение об ошибке первого неудачного объекта обещания в итерируемом объекте в качестве сообщения об ошибке.
  6. Сценарий, в основном используемый для обработки коллекций состояний нескольких объектов-обещаний.

Promise.any(iterable)

  1. Получает коллекцию объектов Promise и, когда одно из обещаний выполняется успешно, возвращает значение этого успешного обещания.

Promise.reject(reason)

  1. Возвращает объект Promise со статусом сбоя, а затем передает информацию об ошибке соответствующему методу обработки.

Promise.resolve(value)

  1. Возвращает объект Promise, состояние которого определяется заданным значением

Прототип обещания

Свойства: обещание .prototype.constructor Возвращает созданную функцию экземпляра, которая по умолчанию на функцию обещания.

метод:

  • Promise.prototype.catch(onRejected)

  • Promise.prototype.then(onFulfilled,onRejected)

  • Promise.prototype.finally(onFinally)

    function myAsyncFunction(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET',url); xhr.onload = () => resolve(xhr.responseText); xhr.onerror = () => reject(xhr.statusText); xhr.send(); });}

17. Прокси ES6

  1. По умолчанию агент ничего не делает

Пример:

var target = {}var handler = {}var proxy = new Proxy(target, handler)proxy.a = 'b'console.log(target.a)// 'b'console.log(proxy.c === undefined)// true

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

Пример:

Представьте, что вам 17 лет и скоро исполнится 18. И вы хотите, чтобы ваша программа автоматически поздравляла вас при открытии. Для этого можно использовать прокси.

var person = {  name: "dada",  age: 17};​person = new Proxy(person, {  set(target, property, value) {    if (value === 18) {      console.log("Congratulations! You are of legal age");      Reflect.set(target, property, value);      return true;    }  }});​person.age = 18;​if (value < 13 && value > 99) {  throw new Error('The age should be between 13 and 99')} else {  Reflect.set(target, property, value)}

грамматика:

let p = new Proxy(target, handler)
  1. target Целевой объект, обернутый прокси
  2. обработчик Объект, свойствами которого являются функции, определяющие поведение агента при выполнении действия.

Если вы не хотите снова вызывать ключ, верните undefined:

console.log(o.dada || '')

используй прокси

let o = { name：'dada', age: 1}​let handler = { get(obj, key) {  return Reflect.has(obj, key)?obj[key]:'' }}​let p = new Proxy(o, handler)​console.log(p.from)

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

for (let [key] of Object.entries(response.data)) {  Object.defineProperty(response.data, key, {  writable: false })}

Используй прокси:

let data = new Proxy(response.data, { set(obj, key, value) {   return false }})

Проверьте логический код:

// Validator.js​export default(obj, key, vlaue) => { if(Reflect.has(key) && value > 20) {  obj[key] = value }}​import Validator from './Validator'​let data = new Proxy(response.data, { set: Validator})

Используйте прокси для мониторинга чтения и записи:

let validator = { set(target, key, value) {  if(key === 'age') {   if(typeof value !== 'number' || Number.isNaN(value)) {    throw new TypeError('Age must be a number')   }   if(value<=0){    throw new TypeError('Age must be a positive number')   }  }  return true }}​const person = { age: 12 }const proxy = new Proxy(person,validator)proxy.age = 'dada' // TypeError numberproxy.age = NaNproxy.age = 0 // positive numberproxy.age = 3

Пример: у каждого объекта есть свой идентификатор

class Component { constructor() {  this.proxy = new Proxy({   id: Math.random().toString(36).slice(-8)  }) } get id() {  return this.proxy.id }}

熬夜7天，我总结了JavaScript与ES的25个知识点

18.Generator

function * dada() { for(let i=0; i<2; i++ {  yield console.log(i); }}​const da = dada()da.next()da.next()

Отличие функции Генератора от обычной функции в том, что при ее определении есть * и выполняется следующая функция:

function* dada() {console.log('dadaqianduan');}dada(); // 没有执行函数 如需要输出，改为：var da = dada();da.next();

Чтобы сгенерировать автоматически увеличивающийся идентификатор:

var count_id = 0;function dada_id() {count_id ++;return count_id;}

метод

Generator.prototype.next()返回一个由 yield表达式生成的值。​Generator.prototype.return()返回给定的值并结束生成器。​Generator.prototype.throw()向生成器抛出一个错误。

Стиль письма:

function *da() {}​function* da(){}

метод

Методы объекта-генератора: следующий, возврат, бросок

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

значение: текущий результат текущей программы done: завершен ли обход

next может принимать параметры.Этот параметр позволяет передавать данные снаружи генератора внутрь.Этот параметр используется как возвращаемое значение yield.

Метод return() позволяет завершить обход генератора.

function * da() { yield 1 yield 2 yield 3}var d = da()console.log(d.next()) // {value:1,done:false}console.log(d.return()) // {value:undefined,done:true}console.log(d.next()) // {value:undefined,done:true}

return может передавать параметры как значение возвращаемого значения

function * da() { yield 1 yield 2 yield 3}var d = da()console.log(d.nex()) // {value:1,done:false}console.log(d.return(100)) // {value:100,done:true}console.log(d.next()) // {value:undefined,done:true}

Метод throw() управляет «прекращением» выполнения внутри генератора вне генератора.

объявление функции генератора:

function* genFunc(){...}const genObj = genFunc();

выражение генератора:

const genFunc = function* () {...}const genObj = genFunc();

Объект определен:

const obj = { * generatorMethod(){  ... }}const genObj = obj.generatorMethod();

Определение класса (объявление класса или выражение класса):

class MyClass{ * generatorMethod(){  ... }}const myInst = new MyClass();const genObj = myInst.generatorMethod();

Простейшая спецификация обхода итератора:

authors[Symbol.iterator] = function(){ // this return {  next(){   return{    done:false,    value:1   }  } }}

Обратите внимание, не потеряйтесь

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

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

Категории