Наиболее полные Es6 - Es11 (статьи Es6)

Остальные ссылки есть в конце статьи

Эс6

1, пусть

В ES6 добавлена ​​новая инструкция, позволяющая объявлять переменные. Ее использование аналогично var. Она предназначена для решения ненормальной ситуации с var с точки зрения области видимости и добавления переменных с использованием лексической области видимости или области действия на уровне блока.

 for (var i = 0; i < 5; i++) {
    
    
            setTimeout(function() {
    
    
                console.log(i) 
            },1000)
} 
//输出结果 5 5 5 5 5 

 for (let i = 0; i < 5; i++) {
    
    
            setTimeout(function() {
    
    
                console.log(i) 
            },1000)
} 
// 输出结果 0 1 2 3 4 

Особенности:
(1) Область действия на уровне блока. Переменные с областью действия на уровне блока можно использовать только в текущем блоке кода. Не доступен извне.
(2) let не продвигает переменные, поэтому его нельзя использовать до того, как он будет объявлен. Область перед кодом, в котором объявляется переменная let, становится временной мертвой зоной
(3) Не допускается многократное объявление в одной и той же области видимости
( 4) объявленные переменные не станут свойствами объекта (окна) верхнего уровня.

2, константа

Добавлена ​​инструкция const для объявления переменных, аналогичная let. Но переменную, объявленную const, нельзя изменить после присвоения. (Мы можем понимать это как константу), а переменным, объявленным как const, при объявлении должно быть присвоено значение.

const name = "小明"
      name = "小华" // 错误,const只允许赋值一次
console.log(name)
const age; // 错误 const必须在初始化时赋值

Особенности:
(1) Область действия на уровне блока. Переменные с областью действия на уровне блока можно использовать только в текущем блоке кода. Не доступен извне.
(2) Переменная не будет повышена, поэтому ее нельзя использовать до того, как она будет объявлена. Область перед кодом, в котором объявляется переменная let, называется временной мертвой зоной (3) Не допускается повторное
объявление в одной и той же зоне. область действия
(4) переменные, объявленные с помощью const, не станут атрибутами объекта (окна) верхнего уровня
(5) const должны быть присвоены во время инициализации
(6) переменные, объявленные с помощью const, не могут изменить свое значение после присвоения.
По сути, const не гарантирует Гарантируется, что адрес памяти, на который указывает переменная, не может быть изменен, поэтому объекты и массивы, объявленные const, по-прежнему могут изменять свои методы атрибутов.

3. Синтаксис шаблона строки

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

`hello
world`

Встроенные переменные:

`你好!我叫${
      
      name}。明年${
      
      age+1}岁,来自${
      
      city}市。`
//等价于
'你好!我叫' + name + '。明年' + (age + 1) + '岁' + ',来自' + city+'市。'

4. Значение функции по умолчанию

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

function test(x = 1, y = 2) {
    
    
            console.log(x, y)
        }
        
test() // 1,2
test(undefined, 20) // 1, 20

Примечание:
(1) При передаче значения undef формальный параметр будет использовать значение по умолчанию
(2) Все формальные параметры после установки значения по умолчанию формального параметра будут игнорироваться атрибутом длины функции
(3) Как только любой формальный параметр для функции установлено значение по умолчанию, функция При объявлении инициализации. Все параметры станут независимыми параметрами области.

5. Атрибут имени функции

В ES6 функции имеют атрибут name, в котором хранится имя текущей функции.

function aaa () {
    
    
    console.log(this)
}
console.log(aaa.name) // "aaa"

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

В ES6 разрешено объявлять функцию, используя форму () => {}

function a (x,y) {
    
    
           return x + y + 1
       }
// 上面的函数就等等价于下面的箭头函数
let a = (x, y) => x + y + 1

Примечание:
(1) Функция стрелки не может напрямую установить имя функции.
(2) Если функция возвращает однострочное выражение, {} и return можно опустить, и функция автоматически вернет содержимое после стрелки (возврат объекта). , объект должен быть включен с помощью () )
(3) Если стрелочная функция имеет один и только один формальный параметр, то () параметра можно опустить
(4) Сама стрелочная функция этого не имеет. this внутри функции указывает на область действия this объявления функции.

(5) Стрелочные функции нельзя использовать в качестве конструкторов с ключевым словом new. Сама стрелочная функция не имеет экземпляра
(6) Стрелочная функция не имеет объекта аргументов

7. Способ добавления строки

Метод startWith
opensWith() используется для определения того, начинается ли строка с указанной подстроки, если да, то он возвращает true, в противном случае — false.
EndsWidth
Метод EndsWidth() используется для определения того, заканчивается ли строка указанной подстрокой. Если да, он возвращает true, в противном случае — false.
Метод include
() используется для определения того, содержит ли строка указанную строку, если да, то он возвращает true, в противном случае — false.

str.startsWith(str2) //boolean
str.endsWidth(str2) //boolean
str.includes(str2) //boolean

8. Деконструкция

деструктуризация массива

let [province, city, district] = ['广东省','广州市','天河区']
// 下标相等的变量会与数组中相同下标项进行匹配

Деструктуризация массива может иметь значения по умолчанию.

let [, city, district] = ['广东省', '广州市', '天河区']
console.log(city, street) // '广州市'  '天河区'

деконструкция объекта

let {
    
    name, age, gender} = {
    
    
            name: "张三",
            age: 30,
            gender: 1,
        }

Имя переменной деконструкции объекта можно настроить.

let {
    
    name:myName, age:myAge, gender:myGender} = {
    
    
            name: "张三",
            age: 30,
            gender: 1,
        }
console.log(myName,myAge,myGender)

Примечание:
(1) Деструктуризация допускает вложенную деструктуризацию
(2) Если совпадение не найдено, будет возвращено неопределенное значение
(3) Деструктуризация поддерживает значения по умолчанию.

8. Оператор расширения (…)

ES6 предоставляет оператор расширения для расширения массивов (Es9 начинает поддерживать расширение объектов)

let arr = [1,2,3,4]
let newArr = [...arr, 7] //  [1,2,3,4,7]

Примечание:
(1) Если появляются одни и те же атрибуты, последние заменят первые
(2) При деструктуризации... поддерживаются операции rest.

 let [a, b, ...c] = [1, 2, 3, 4, 5]
// a: 1
// b: 2
// c: [3, 4, 5]

(3) Строка — это специальный массив, поэтому вы также можете использовать оператор расширения.

[...'hello']  // ['h', 'e', 'l', 'l', 'o']

(3) К параметрам функции можно применять операторы деструктуризации, расширения и операции отдыха.

9. Новый API для массива

Поскольку здесь много контента, я не буду вдаваться в подробности.
Map обходит текущий массив для создания нового массива.
filter обходит текущий массив для создания нового отфильтрованного массива.
Метод find возвращает значение первого элемента в массив, соответствующий условиям. В противном случае он возвращает неопределенное значение.Метод
findIndex возвращает индекс первого элемента массива, который соответствует условию. В противном случае возвращается -1. Функция
уменьшения выполняет предоставленную вами функцию сокращения (выполняется в порядке возрастания) для каждого элемента массива, суммируя ее результаты в одно возвращаемое значение.
Заполнение заполняет массив фиксированным значением от начального индекса до конечный индекс.все элементы . Не включает индекс завершения

Узнайте больше об API массива

10. Краткое описание свойств объекта

ES6 позволяет сокращать значение ключа, если пара ключ-значение в фигурных скобках объекта имеет одно и то же имя. Если значение ключа является функцией, его можно сократить как key(){}

let name = '小明'
let age = 18

let obj = {
    
    
    name, // 等价于 name: name
    age,
    sayHello() {
    
    // 等价于 sayHello: function(){...}
	    console.log('123')
    }
}

11. Имя динамического ключа объекта.

ES6 позволяет использовать [js-выражение] в фигурных скобках объекта, чтобы сделать ключевой атрибут объекта именем динамического ключа.

let key = 'currentKey'
let obj = {
    
    
	[key]: 123,  // currentKey: 123
	[key+'2']: 1, // currentKey2: 1
}

12、Символ

Символ — это новый базовый тип данных.
Символ([описание]) возвращает значение типа символа.

const symbol1 = Symbol();
const symbol2 = Symbol('描述内容');//可为symbol 添加描述文字 (不可改)
console.log(typeof symbol1);//"symbol"

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

Symbol("foo") === Symbol("foo"); // false

Глобально общий символ
использует метод Symbol.for() и метод Symbol.keyFor() для установки и получения символов из глобального реестра символов
(1). Символ.for(key)
использует данный ключ для поиска существующих символов, если он найден, возвращается символ. В противном случае в глобальном реестре символов будет создан новый символ с указанным ключом.

const s1 = Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中,键为 "foo"
const s2 = Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbol
console.log(s1 === s2)// true

(2) Символ.keyFor()
Метод Символ.keyFor(sym) используется для получения ключа, связанного с символом в глобальном реестре символов.

// 创建一个全局 Symbol
var globalSym = Symbol.for("foo");
console.log(Symbol.keyFor(globalSym)); // "foo"

Символ.итератор Итератор
Символ.итератор определяет итератор по умолчанию для каждого объекта. Этот итератор может использоваться в цикле for…of.
Когда объект необходимо повторить (например, использовать в цикле for...of), его метод @@iterator будет вызываться без передачи параметров, а возвращенный итератор используется для получения значения, подлежащего итерации.

Мы можем создавать собственные итераторы следующим образом:

var myIterable = {
    
    }
myIterable[Symbol.iterator] = function* () {
    
    
    yield 1;
    yield 2;
    yield 3;
};
[...myIterable] // [1, 2, 3]

Более

13、Обещание

Объекты-промисы используются для представления возможного завершения (или сбоя) асинхронной операции и ее результата. Promise — это решение ES6 для асинхронного программирования.
Обещание должно находиться в одном из следующих состояний:
(1) Ожидание: исходное состояние: ни выполнено, ни отклонено.
(2) Выполнено: означает, что операция завершена успешно.
(3) Отклонено: означает, что операция не удалась.
Пока оно выполнено и отвергнуто, состояние снова не изменится, то есть решено (завершено)

метод экземпляра

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

использовать:
let p = new Promise(function (resolve, reject) {
    
    
	//...异步操作
	resolve('Success!') // 成功调用resolve方法
	//reject('失败了!') // 失败调用reject方法
})    
p.then(
    res => console.log(res) // "Success!"
).catch(
	err => console.error(err) // "失败了!"
).finally(
	() => console.log('异步操作执行完毕,无论成功失败') 
)
статический метод

Promise.all(iterable)
Этот метод возвращает новый объект обещания. Этот объект обещания будет успешно запущен только в том случае, если все объекты обещания в итерируемом объекте параметра завершатся успешно. Если какой-либо объект обещания в итерируемом объекте завершится неудачно, объект обещания будет запущен немедленно. отказ объекта обещания.
Promise.allSettled(iterable)
ожидает, пока все обещания не будут выполнены (каждое обещание не будет выполнено или отклонено). Возвращает обещание, которое завершается после завершения всех обещаний. А в случае массива объектов каждый объект соответствует результату каждого обещания.
Promise.any(iterable)
получает коллекцию объектов Promise. Когда одно из обещаний завершается успешно, возвращается значение успешного обещания.
Promise.race(iterable)
Когда любое дочернее обещание в итерируемом параметре завершается успешно или неудачно, родительское обещание немедленно будет использовать возвращаемое значение успеха или сведения об ошибке дочернего обещания в качестве параметра для вызова соответствующего дескриптора, связанного родительским обещанием, и возврата. объект обещания.
Promise.reject(reason)
возвращает объект Promise со статусом сбоя и передает данную информацию об ошибке соответствующему методу обработки
Promise.resolve(value).
Возвращает объект Promise, состояние которого определяется заданным значением. Если значение является thenable (то есть объект с методом then), окончательное состояние возвращаемого объекта Promise определяется выполнением метода then; в противном случае (значение пусто, имеет базовый тип или объект без метод then), возвращаемый объект Promise имеет статус объекта Promise выполнен, и значение передается соответствующему методу then.

14. Новый метод объекта

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

const target = {
    
     a: 1 };
const obj1= {
    
     b: 2 };
const obj2= {
    
     c: 3 };
Object.assign(target, obj1, obj2);
//target:{a: 1, b: 2, c: 3}

Object.is()
Новый метод ES6 для сравнения двух значений строго равны, в основном соответствует поведению ===.
использовать:

Object.is(v1,v2)//比较 v1 v2

В отличие от ===:

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.keys()
Метод Object.keys() возвращает массив, состоящий из самоперечисляемых свойств данного объекта.Имена свойств в массиве располагаются в том же порядке, в котором они возвращаются при обычном цикле обхода объекта.

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = {
    
     0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

15、Класс

До ES6 метод конструктора использовался для создания объекта экземпляра. ES6 вводит концепцию класса, которая определяется через ключевое слово class как шаблон для объектов. Класс можно рассматривать как синтаксический сахар, и его суть аналогична сущности конструктора. Метод написания шаблона класса делает написание прототипов объектов более понятным и более совместимым с синтаксисом объектно-ориентированного программирования.

class App {
    
    
    // 这是一个具名类
}
let app = new App() // 创建 App 类的实例对象 
let Demo = class {
    
    
    // 这是一个匿名类
}
let demo = new Demo() // 创建 Demo 类的实例对象 

Хотя класс по сути является функцией, он также отличается от конструктора
(1). Важное различие между объявлением функции и объявлением класса заключается в том, что объявление функции будет продвигаться, а объявление класса — нет.
(2) класс позволяет использовать ключевое слово new только для создания объектов экземпляра, но не допускает прямых вызовов, таких как конструкторы.

Конструктор
Метод конструктора — это специальный метод, используемый для создания и инициализации объекта, созданного классом. Класс может иметь только один специальный метод, называемый «конструктор». Если класс содержит несколько методов-конструкторов, будет выброшено SyntaxError.
Конструктор может использовать ключевое слово super для вызова конструктора родительского класса.
Если конструктор явно не объявлен в классе, метод конструктора будет добавлен неявно по умолчанию.

 class App {
    
    
	constructor(name, age) {
    
    
		// 这里的this就是实例对象自身
		this.name = name
		this.age = age 
	}
}
let app = new App('小明', 12)

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

Класс get/set
может использовать внутренние ключевые слова get и set для установки функций get и set для определенного атрибута и перехвата поведения доступа к атрибуту.

class ObsVue {
    
    
	_count = 0
    // 设置赋值拦截函数 当给this.count赋值时该方法会被调用
	set count(value) {
    
    
		console.log('每次给this.count 赋值都会触发set方法',value)
		this._count = value
	}
    // 设置取值拦截函数 当获取this.count时该方法会被调用
    get count() {
    
    
    	// 每次获取this.count属性值 都会调用该函数
		// get 方法一定要有return值,他的返回值就是当前属性的值
        return this._count
	}
}

Статические методы и статические свойства
Используйте ключевое слово static для объявления статических методов/статических свойств, которые не будут наследоваться объектами экземпляра.

class App {
    
    
       static val = '静态属性'
       test () {
    
    
                console.log('原型方法')
       }
       static demo () {
    
    
                console.log('静态方法')
       }
}
let app = new App()
App.demo() // 只能通过类自身调用
console.log(App.val) // '静态属性'

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

class Animal {
    
    
  constructor(name) {
    
    
    this.name = name;
  }
  speak() {
    
    
    console.log(`${
      
      this.name} makes a noise.`);
  }
}
class Dog extends Animal {
    
    
  constructor(name) {
    
    
    super(name); // 调用超类构造函数并传入name参数
  }
}
var d = new Dog('旺财');
d.speak();//调用成功,说明继承了父类speak方法

super() вызывает конструктор родительского класса

super
Ключевое слово super используется для вызова функции родительского объекта объекта.

class Cat {
    
    
  constructor(name) {
    
    
    this.name = name;
  }
  speak() {
    
    
    console.log(this.name + ' makes a noise.');
  }
}
class Lion extends Cat {
    
    
  speak() {
    
    
    super.speak();
    console.log(this.name + ' roars.');
  }
}

16. модуль модулей

В js никогда не было понятия модулей, поэтому js разделен на небольшие модули, которые зависят друг от друга. До ES6 модульность реализовывалась с помощью RequireJS или seaJS (модульные библиотеки на основе спецификаций AMD и модульные библиотеки на основе спецификаций CMD соответственно). ES6 вводит модульность, и идея его дизайна заключается в определении зависимостей модулей, а также входных и выходных переменных во время компиляции.
Модульность ES6 автоматически переходит в строгий режим. Независимо от того, добавляете ли вы «use strict» в заголовок файла. Модульность ES6 разделена на экспорт (export)@ и импорт (import) двух модулей.

экспорт

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

export const name = 'square';
export function draw(ctx, length, x, y, color) {
    
    
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);
  return {
    
    
    length: length,
    x: x,
    y: y,
    color: color
  };
}

Вы можете экспортировать функции, var, let, const и классы. экспорт должен быть размещен на самом внешнем слое; например, вы не можете использовать экспорт в функции

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

export {
    
     name, draw, reportArea, reportPerimeter };

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

import {
    
     name, draw } from '/module.js';


Укажите псевдоним, если as указывает экспорт псевдонима :

// inside module.js
export {
    
    
  function1 as newFunctionName,
  function2 as anotherNewFunctionName
};

// inside main.js
import {
    
     newFunctionName, anotherNewFunctionName } from '/module.js';

Укажите псевдоним при импорте:

// inside module.js
export {
    
     function1, function2 };

// inside main.js
import {
    
     function1 as newFunctionName,
         function2 as anotherNewFunctionName } from '/module.js';
console.log(newFunctionName,anotherNewFunctionName)

Импорт с полной загрузкой
предоставляет разработчикам звездочки (*) для указания объектов модуля экспорта. Поскольку в js * нельзя использовать в качестве имени переменной, поэтому при загрузке модуля целиком необходимо использовать ключевое слово as, чтобы задать псевдоним для модуля в целом.

import * as module from '/module.js'
console.log(module)

17、Комплект

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

атрибут экземпляра

Set.prototype.size
возвращает количество значений в объекте Set

метод экземпляра

Set.prototype.add(value)
добавляет элемент в конец объекта Set. Возвращает объект Set.

Set.prototype.clear()
удаляет все элементы объекта Set.

Set.prototype.delete(value)
удаляет элемент в Set, равный этому значению, и возвращает значение, которое Set.prototype.has(value) вернул бы перед этой операцией (то есть, если элемент существует, он возвращает true, в противном случае возвращается false).

Set.prototype.entries()
возвращает новый объект-итератор, который содержит массив [value, value] значений для всех элементов объекта Set в порядке вставки. Чтобы этот метод был похож на объект Map, ключ и значение равны для каждого значения.

Set.prototype.forEach(callbackFn[, thisArg])
вызывает callBackFn один раз для каждого значения в объекте Set в порядке вставки. Если указан параметр thisArg, в обратном вызове будет этот параметр.

Set.prototype.has(value)
возвращает логическое значение, указывающее, существует ли это значение в наборе.

Set.prototype.keys() (en-US)
аналогичен методуvalues(), возвращая новый объект-итератор, который содержит значения всех элементов объекта Set в порядке вставки.

Set.prototype.values()
возвращает новый объект-итератор, который содержит значения всех элементов объекта Set в порядке вставки.

Set.prototype @@iterator
возвращает новый объект-итератор, который содержит значения всех элементов объекта Set в порядке вставки.

использовать:

let mySet = new Set();

mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
let o = {
    
    a: 1, b: 2};
mySet.add(o);
mySet.add({
    
    a: 1, b: 2}); // o 指向的是不同的对象,所以没问题

mySet.has(1); // true
mySet.has(3); // false
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has(o); // true

mySet.size; // 4

mySet.delete(5);  // true,  从set中移除5
mySet.has(5);     // false, 5已经被移除

mySet.size; // 3, 刚刚移除一个值
console.log(mySet);
console.log(mySet.keys());
console.log(mySet.entries());
console.log(mySet.values());

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

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]

18、Карта

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

атрибут экземпляра

Map.prototype.size
возвращает количество пар ключ-значение в объекте Map.

(обычно используемые) методы экземпляра

Map.prototype.clear()
удаляет все пары ключ-значение из объекта Map.

Map.prototype.delete(key)
удаляет пару ключ-значение, указанную в объекте Map, и возвращает true, если пара ключ-значение существует, в противном случае возвращает false. Вызов delete с последующим Map.prototype.has(key) вернет false.

Map.prototype.get(key)
возвращает значение, связанное с ключом, или неопределенное, если связанное значение отсутствует.

Map.prototype.has(key)
возвращает логическое значение, указывающее, существует ли значение, связанное с ключом, в объекте Map.

Map.prototype.set(key, value)
устанавливает значение, связанное с указанным ключом ключа в объекте Map, и возвращает объект Map.

const myMap = new Map();

const keyString = 'a string';
const keyObj = {
    
    };
const keyFunc = function() {
    
    };

// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");

myMap.size; // 3

// 读取值
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"

myMap..delete(keyString)//移除

myMap.has(keyString)//false

myMap.clear()

19、для…из

Оператор for…of создает цикл, который перебирает итерируемый объект. Цикл for…of был введен в ES6 для замены for…in и forEach() и поддержки нового протокола итерации. for…of позволяет вам перемещаться по повторяющимся структурам данных, таким как массивы, строки, карты, наборы и т. д.

//map
for(let [key,value] of myMap){
    
    
	console.log('of==>',key,value);
}
//set
for(let value of mySet){
    
    
    console.log('of==>',value);
}

20. Отражение картографии

Reflect — это встроенный объект, предоставляющий методы для перехвата операций JavaScript. Эти методы идентичны методам обработчиков прокси (en-US). Reflect не является функциональным объектом, поэтому его невозможно построить.

(обычно используемые) статические методы

Reflect.get(target, name, получатель)
получает значение определенного атрибута объекта, аналогично target[name].

Reflect.set(цель, имя, значение, получатель)
Функция, присваивающая значение свойству. Возвращает логическое значение или true, если обновление прошло успешно.

Reflect.defineProperty(target, name, desc)
аналогичен Object.defineProperty(). Если настройка прошла успешно, она вернет true

Reflect.deleteProperty(target, name),
как оператор удаления функции, эквивалентен выполнению удаления target[name].

Reflect.has(target, name)
определяет, имеет ли объект определенный атрибут, имеющий ту же функцию, что и оператор in.

использовать:

// Reflect 映射
let obj1 = {
    
    }
Reflect.set(obj1,'color','red');
Reflect.set(obj1,'width','100px');
console.log(obj1)//{color:'red',width:'100px'}

Reflect.defineProperty(obj1, 'x', {
    
    value: 7})

Reflect.deleteProperty(obj, "color"); // true  

console.log(obj1)//{width:'100px',x:7}

let width = Reflect.get(obj1 ,'width');
console.log(width);

21. Перехват прокси-сервера

Объект Proxy используется для создания прокси-сервера объекта для реализации перехвата и настройки основных операций (таких как поиск свойств, присвоение, перечисление, вызов функций и т. д.).

грамматика:
const p = new Proxy(target, handler)
обработчик

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

(Общие) методы объекта-обработчика

handler.get()
Перехватчик операций чтения свойств.

Свойство handler.set()
устанавливает перехватчик действия.

использовать:

let obj2={
    
    };
// 通过 new Proxy 创建一个新对象
let resObj =  new Proxy(obj2 ,{
    
    
    // 获取指定条件的属性值
    get(obj2 , key){
    
    
        return obj2[key];
    },
    // 设置指定条件的属性值
    set(obj2,key ,value ){
    
    
        if(key == "x"){
    
    
            obj2[key] = 100;
        }else {
    
    
            obj2[key] = value;
        }
    }
});

resObj.x = 999;
console.log(resObj.x);//100

Объект генератора генератора

Объект-генератор возвращается функцией-генератором и соответствует итерируемому протоколу и протоколу итератора.

Общие методы

Generator.prototype.next()
возвращает значение, сгенерированное выражением доходности.

Generator.prototype.return()
возвращает заданное значение и завершает генератор.

использовать:

function* gen() {
    
    
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

g.next();        // { value: 1, done: false }
g.return("foo"); // { value: "foo", done: true }
g.next();        // { value: undefined, done: true }

Далее: Наиболее полные Es6 – Es11 (Es7)

おすすめ

転載: blog.csdn.net/weixin_44646763/article/details/124815475