[Внешний интерфейс] ECMAScript6 от начального до продвинутого уровня

[Внешний интерфейс] ECMAScript6 от начального до продвинутого уровня

1.Введение ES6 и построение среды

1.1. Введение в ECMAScript 6.

(1) Что такое ECMAScript 6?

ECMAScript 6.0 (далее ES6) — это стандарт следующего поколения языка JavaScript, официально выпущенный в июне 2015 года. Его цель — дать возможность использовать язык JavaScript для написания сложных крупномасштабных приложений и стать языком разработки корпоративного уровня.

(2) Связь между ECMAScript и JavaScript.

ECMAScript — это стандарт JavaScript, а JavaScript — это реализация ECMAScript. Другими словами, если JavaScript — это язык, то ECMAScript — это книга по грамматике, за которой следует этот язык.

(3) Связь между ES6 и ECMAScript 2015.

В 2011 году была выпущена версия ECMAScript 5.1, и организация ECMA начала подготовку версии 6.0. Но поскольку в этой версии представлено слишком много грамматических особенностей, невозможно охватить все функции в одной версии. Поэтому комитет по стандартизации решил, что стандарт будет официально выпускаться в июне каждого года как официальная версия того же года. В дальнейшем на основе этой версии будут вноситься изменения, и до июня следующего года проект, естественно, станет новогодней версией. Таким образом, номер предыдущей версии не нужен, а только отметка года.

Таким образом, первая версия ES6 была официально выпущена в 2015.6, и ее официальное название — «Стандарт ECMAScript 2015» (сокращенно ES2015).

1.2.Инструмент Babel для создания среды ES6

Код, написанный с использованием синтаксиса ECMAScript 2015+, преобразуется в обратно совместимый синтаксис JavaScript, чтобы его можно было запускать в текущих и старых браузерах или других средах.

• Сначала убедитесь, что в среде есть узел

node安装：http://nodejs.cn/download/

• Инициализировать проект

// 使用默认配置初始化项目
npm init -y

• Установите соответствующие пакеты зависимостей.

// 本地安装babel-cli及对应的转化规则
npm install --save-dev babel-cli babel-preset-es2015

// 阿里巴巴定制的镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org

• Создать каталог проекта

  • Каталог src используется для хранения написанного кода es6.

  • Каталог dist используется для хранения кода, преобразованного из es6.

• Настроить бабель

Создать новый .babelrcфайл

// 配置用于转化当前代码的规则集
{
    
    
  "presets": ["es2015"]
}

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

// -o 参数指定输出文件
node_modules/.bin/babel src/index.js -o dist/index.js

// -d 参数指定输出目录
node_modules/.bin/babel src -d dist

Настройте файл package.json для компиляции в реальном времени.

// 配置启动脚本的命令
"scripts": {
    
    
  // 监听index.js文件，一发生变化就执行babel转译的命令
  "dev": "babel src -w -d dist",
}

2. Новые методы объявления и присвоения данных.

2.1. Объявление переменных let и const

Область — это эффективная область действия переменной. Раньше существовала только глобальная область видимости и область действия функции. Теперь появилась новая область видимости на уровне блока. В es6 есть два новых метода объявления переменных: let и const.

(1) Сходство между let и const

• Действует только в пределах объявленного блока кода.

if (true) {
    
    
  var a = "a";
}
console.log(a);
// let声明变量，const同理
if (true) {
    
    
  let b = "b";
}
console.log(b);

• Дублирующиеся объявления не допускаются в одной области.

• Без продвижения переменной переменную нельзя использовать до ее объявления.

console.log(a);
var a = 'a';

console.log(b);
let b = '1';

Переменные, объявленные с помощью var, будут иметь проблему продвижения переменной. Если используется let или const, проблема продвижения переменной будет устранена. Если встретится неопределенная переменная, будет выдана ошибка.

(2) Разница между let и const

• const используется для объявления переменной, доступной только для чтения.

const x = 10;
x = 13;
console.log(x);

Примечание. Переменным, объявленным как const, необходимо немедленно присвоить значение. Если объявлен простой тип данных, значение переменной не может быть изменено.

2.2.ES6 новый тип данных Символ

До ES6 примитивными типами данных JavaScript были Number, String, Boolean, Null и Undefine. В ES6 был добавлен новый уникальный тип символа.

Имена атрибутов объектов подвержены конфликтам имен. Чтобы обеспечить уникальность имен ключей, es6 вводит символ, новый примитивный тип данных, гарантирующий уникальность каждой создаваемой переменной.

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

let s = Symbol();
console.log(typeof s);

let s1 = Symbol();
let s2 = Symbol();
console.log(s1===s2);

let l1 = Symbol('lixiang');
let l2 = Symbol('lixiang');
console.log(l1===l2);

Определите уникальное имя свойства объекта

// 在对象里用Symbol作为属性名的三种写法
let s = Symbol();

// 第一种方式: 借助数组读取s变量，此时不能用点运算符,点运算符默认后面的参数是字符串
let a = {
    
    };
a[s] = 'lixiang'

// 第二种方式: 构造时声明
let a = {
    
    
  [s]: 'lixiang'
}

// 第三种 Object.defineProperty
let a = {
    
    };
Object.defineProperty(a, s, {
    
     value: 'lixiang' });

Определение констант

const s = Symbol("李祥");

2.3.Подробное объяснение назначения деструктуризации

(1) Что такое деструктурирующее задание?

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

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

(2) Деструктуризация массива

// 变量多时，对应不上的变成undefined
let [a, b, c] = [1, 2];
console.log(a, b, c);

// 变量默认值，声明变量时将c默认成6
let [a, b, c = 6] = [1, 2];
console.log(a, b, c);

// 分割数组，将1赋值给a，2,3成一个新数组
let [a, ...other] = [1, 2, 3];
console.log(a, other);

// 空内容，将a赋值为1，b赋值为3
let [a,,b] = [1, 2, 3];
console.log(a, b);

(3) Деконструкция объекта

//1赋值为a，2赋值为b
let {
    
     a, b } = {
    
     a: 1, b: 2 };
console.log(a, b);

//重命名
let {
    
     a: aa, b: bb } = {
    
     a: 1, b: 2 };
console.log(aa, bb);

(4) Прочитайте данные, возвращаемые интерфейсом.

function fun() {
    
    
  return {
    
    
    name: "张三",
    hobby: [
      {
    
    
        title: "篮球",
      },
      {
    
    
        title: "唱",
      },
      {
    
    
        title: "RAP",
      },
      {
    
    
        title: "跳",
      },
    ],
  };
}
let {
    
    
  name,
  hobby: [{
    
     title }],
} = fun();
console.log(name, title);

3. Новые методы манипулирования данными в ES6.

3.1.Новые строковые методы, предоставляемые ES6.

(1) Новый API

метод	описывать
включает (строка, индекс)	Определите, содержит ли строка указанную строку, возвращаемое значение является логическим значением.
начинается с (строка, индекс)	Определите, содержит ли начало строки указанную строку, возвращаемое значение является логическим значением.
Концы с (строка, индекс)	Определите, содержит ли конец строки указанную строку, возвращаемое значение является логическим значением.
повторить (н)	Метод повторения() возвращает новую строку, что означает повторение исходной строки n раз.
PadStart (длина, ул)	Завершение строки, используется для завершения заголовка
PadEnd(длина, ул)	Завершение строки, используется для завершения хвоста.

//判断str是否包含an
let str = 'lixiang';
console.log(str.includes('an'));
//从下标为5的字符开始判断是否含an
console.log(str.includes('an',5));

//判断str是否以l开头
let str = 'lixiang';
console.log(str.startsWith('l'));
//从下标为3的字符开始判断是否以l开头
console.log(str.startsWith('l',3));

//判断str是否以g结尾
let str = 'lixiang';
console.log(str.endsWith('g'));
//从下标为3的字符开始判断是否以g结尾
console.log(str.startsWith('g',3));

//入参数字为2，重复两次
let str = 'lixiang';
console.log(str.repeat(2));

//在lixiang前面补a，补够10位
let str = 'lixiang';
console.log(str.padStart(10, 'a'));

//在lixiang后面补a，补够10位
let str = 'lixiang';
console.log(str.padEnd(10, 'a'));

(2) Строка шаблона

В ES5 мы часто пишем такое объединение строк.

const name = '李祥';
const age = 18;
const hobbies = '写代码';

const str = '我叫'+name+'，今年'+age+'岁，'+'喜欢'+hobbies+'。'

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

const str = `我叫${
      
      name}，今年${
      
      age}岁，喜欢${
      
      hobbies}。`

console.log(str);

(3) Меры предосторожности при использовании строк шаблона

• При использовании строк шаблона для представления многострочных строк все пробелы и отступы будут сохранены в выводе.
• Чтобы ввести переменные в строку шаблона, их необходимо ввести в виде ${имя переменной}.
• Любое выражение JavaScript можно поместить внутри фигурных скобок ${…} в строке шаблона, которое может выполнять операции, ссылаться на свойства объекта, вызывать функции, даже вкладывать их и даже вызывать само себя.

3.2.Использование оператора распространения ES6

(1) Одномерный массив с глубокой копией

const list = [1, 2, 3, 4, 5];
const listCopy = [...list];
console.log(listCopy);

(2) Разделить массив

const list = [1, 2, 3, 4, 5];
const [, ...list1] = list;
console.log(list1);

(3) Преобразуйте массив в параметры и передайте их функции.

const list = [1, 2];
function fun(a, b) {
    
    
  console.log(a + b);
}
fun(...list);

3.3.Методы расширения массива ES6

(1) fill: замена элементов в массиве изменит исходный массив. Если вы хотите сохранить значение исходного массива неизменным, вы можете использовать глубокое копирование.

const list = [1, 2, 3, 4, 5];
//全部替换成6
const list1 = [...list].fill(6);
//下标从1开始到下表为4之间左闭右开，全部替换成6
const list2 = [...list].fill(6, 1, 4);
console.log(list);
console.log(list1);
console.log(list2);

(2) найти: запросить элементы массива, соответствующие условиям.

const list = [
  {
    
     name: "李祥", age: 15 },
  {
    
     name: "张三", age: 10 },
  {
    
     name: "李四", age: 19 },
  {
    
     name: "王武", age: 20 },
];
const result = list.find(function (item) {
    
    
  return item.name === "李祥";
});
console.log(result);

(3) findIndex: запросить индекс элемента в массиве, который соответствует условиям.

const result = list.findIndex(function (item) {
    
    
  return item.name === "李祥";
});
console.log(result);

(4) плоский: используется для объединения массивов.

const list = [1, 2, 3, [4, 5, 6, [ 7, 8]]];
const list2 = list.flat(2);
console.log(list2);

(5) Фильтр: фильтрация элементов, соответствующих условиям. В отличие от поиска, фильтр возвращает массив.

const result = list.filter(function (item) {
    
    
  return item.name === "李祥";
});
console.log(result);

3.4.Метод карты в массиве ES6

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

const list = [
  {
    
     name: "李祥", age: 15 },
  {
    
     name: "张三", age: 10 },
  {
    
     name: "李四", age: 19 },
  {
    
     name: "王武", age: 20 },
];
//遍历集合中每一项，创建obj对象，将原对象属性复制到新的obj中
//然后给obj增加一个属性state
const mapList = list.map(function (i) {
    
    
  let obj = {
    
    };
  //对象拷贝
  Object.assign(obj, i);
  obj.sex = 0;
  return obj;
});
console.log(mapList);

3.5.Новые возможности объектов ES6

Создать объект

const a = {
    
    
  name: 'lixiang',
  age: 21,
  address: {
    
    
    city: 'BeiJing',
    town: 'ChangYang'
  },
};

(1) Глубокое копирование простых объектов

const b = {
    
     ...a };
console.log(b);

(2) Установите значения по умолчанию для объектов.

const b = {
    
     ...a, name: 'zhangsan' };
console.log(b);

(3) Объединить объекты

const b = {
    
     sex:'0' };
const c = {
    
    ...a,...b}
console.log(c);

(4) Сокращение инициализации атрибута и метода.

(5) В Object добавлены новые методы.

• Object.is: определить, равны ли два объекта

let res = Object.is({
    
    name:'lx'}, {
    
    name:'lx'});
console.log(res);
let res1 = Object.is(NaN, NaN);
console.log(res1);

• Object.assign: копирование объекта

let a = {
    
     name: 'lx', age: 24 };
let b = {
    
    };
let c = Object.assign(b, a);
console.log(c);

• Object.keys: получить все ключи объекта.

let a = {
    
     name: 'lx', age: 24 };
const arr = Object.keys(a);
console.log(arr);

• Object.values: Получить все значения объекта

let a = {
    
     name: 'lx', age: 24 };
const arr = Object.values(a);
console.log(arr);

• Object.entries: получить ключ и значение

let a = {
    
     name: 'lx', age: 24 };
const arr = Object.entries(a);
console.log(arr);

3.6.ES6 добавляет новую карту и WeakMap.

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

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

• Свойства и методы

Свойства/методы	эффект	пример
размер	Возвращает количество пар ключ-значение	размер м
прозрачный()	Очистить все пары ключ-значение	м.очистить()
имеет (ключ)	Определите, есть ли указанное имя ключа в паре ключ-значение, возвращаемое значение является логическим значением.	м.хас (ключ)
получить (ключ)	Получите значение ключа указанного имени ключа, если оно не существует, верните неопределенное значение.	m.get(ключ)
установить(ключ, значение)	Добавьте пару «ключ-значение». Если имя ключа уже существует, обновите пару «ключ-значение».	m.set(ключ, значение)
удалить (ключ)	Удалить пару ключ-значение указанного имени ключа.	m.delete (ключ)

(1) Создать карту

//创建一个空map
let map = new Map();
//创建一个带有默认值的map
let mapDef = new Map([
    ['name','lx'],
    ['age',12]
]);
console.log(map);
console.log(mapDef);

(2) Демонстрация API

//创建一个空map
let map = new Map();
//map中增加一个元素
map.set('name','lx');
map.set('age',20);
console.log(map);
//map中修改一个元素
//map中set方法如果有key则覆盖，没有则新增
map.set('name','zs');
console.log(map);
//返回键值对的数量
console.log(map.size);
//判断是否有某个key
console.log(map.has('name'));
//获取某个key的value
console.log(map.get('name'));
//删除某个key
map.delete('name');
console.log(map);
//清空
map.clear();
console.log(map);

(3) Функция генерации траверса

const keys = map.keys();
const values = map.values();
const entries = map.entries();
console.log(Array.from(keys));
console.log(Array.from(values));
console.log(Array.from(entries));

WeakMap: принимает объекты только как имена ключей и не может быть пройден.

const weakMap = new WeakMap([[{
    
     name: 'lx' ,age: 21},{
    
    id:1,hobby:'唱、跳、rap、篮球'}]]);
console.log(weakMap);

3.7.ES6 добавляет Set и WeakSet

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

Set обеспечивает уникальность значений членов и используется для дедупликации коллекции.

• Свойства и методы

Свойства/методы	эффект	пример
добавлять	Добавить новый элемент	s.add(ключ)
размер	Вернуть количество участников	размер
прозрачный()	Очистить всех участников	с.очистить()
имеет (значение)	Определите, есть ли указанное значение в паре ключ-значение, возвращаемое значение является логическим значением.	s.has (ключ)
удалить (значение)	Удалить указанное значение	s.delete (ключ)

(1) Создать набор

const a = {
    
     name: 'lx' };
const set = new Set([a]);
console.log(set);

const list = new Set([1, 2, 3, 4]);
console.log(list);

(2) Демонстрация API

const set = new Set([1, 2, 3, 4]);
console.log(set);
//获取set长度
console.log(set.size);
//判断是否存在2元素
console.log(set.has(2));
//删除2元素
set.delete(2);
console.log(set.has(2));

WeakSet: члены массива должны быть объектами.

• Структура WeakSet также предоставляет разработчикам методы add(), delete() и has(). Их функции и использование точно такие же, как и у структуры Set.
• Структуры WeakSet не являются проходимыми. Поскольку все его члены являются слабыми ссылками на объект, они могут быть переработаны механизмом переработки в любое время, и члены исчезнут. Следовательно, структура WeakSet не будет иметь ключей(), значений(), записей(), forEach() и других методов и атрибутов размера.

3.8.Преобразование между массивом и набором

// 数组转set
const list = [1, 2, 3];
const set = new Set(list);
console.log(set);

// set转数组
const arr = Array.from(set);
console.log(arr);

3.9.Преобразование между объектом и картой

// 对象转map
const obj = {
    
     nane: 'lx', age:24 };
const map = new Map(Object.entries(obj));
console.log(map);

// map转对象
const obj1 = Object.fromEntries(map);
console.log(obj1);

4.ES6 добавляет новые точки знаний высокого уровня.

4.1 Новый прокси-сервер в ES6

(1) Введение в прокси

Как показывает английский перевод Proxy, Proxy — это API, представленный ES6 для управления объектами. Он не действует непосредственно на объект, а выступает в качестве медиума. Если объектом необходимо манипулировать, требуется согласие медиума.

(2) Как использовать

/* @params
** target: 用Proxy包装的目标对象
** handler: 一个对象，对代理对象进行拦截操作的函数，如set、get
*/
let p = new Proxy(target, handler)

(3) Практический пример

const house = {
    
    
  name: '三室一厅-次卧',
  price: 1000,
  phone: '18823139921',
  id: '20230131',
  state: '**',
};

const handle = {
    
    
  get: function (obj, key) {
    
    
    switch (key) {
    
    
      case 'price':
        return obj[key] + 500;
      case 'phone':
        return obj[key].substring(0, 3) + '****' + obj[key].substring(7);
      default:
        return obj[key];
    }
  },
  set: function (obj, key, value) {
    
    
    if (key === 'state') {
    
    
      obj[key] = value;
    }
  },
};

const houseproxy = new Proxy(house, handle);
console.log(houseproxy.id);
console.log(houseproxy.phone);
console.log(houseproxy.price);
houseproxy.state='****';
console.log(houseproxy.state);

4.2 Новое отражение Refect в ES6

(1) Введение в Reflect

Как и Proxy, Reflect введен в ES6 для работы с объектами. Он переносит некоторые методы объекта, которые явно являются внутренними для языка, в объект Reflect. Он изменяет возвращаемые результаты некоторых методов, чтобы сделать их более разумными и более эффективными. Семантический, и использует функции для реализации императивных операций над объектом.

• Свойства и методы

Свойства/методы	эффект
Reflect.apply(target, thisArg, args)	При вызове функции в качестве вызывающего параметра можно передать массив.
Reflect.construct(цель, аргументы)	Выполнение новой операции над конструктором эквивалентно выполнению новой цели (...args).
Reflect.get(цель, имя, получатель)	Получите значение атрибута объекта, аналогично target[name]. Если такого атрибута нет, возвращается неопределенное значение.
Reflect.set(цель, имя, значение, получатель)	Метод Reflect.defineProperty по сути эквивалентен Object.defineProperty, который непосредственно определяет новое свойство объекта или изменяет существующее свойство объекта. Разница в том, что Object.defineProperty возвращает этот объект. И Reflect.defineProperty вернет логическое значение.
Reflect.has(цель,имя)	Определение наличия у объекта определенного атрибута имеет ту же функцию, что и оператор in.
Reflect.ownKeys(цель)	Возвращает массив, содержащий все собственные свойства (исключая унаследованные свойства). (Подобно Object.keys(), но на него не влияет перечисляемый, Object.keys возвращает строковый массив всех перечислимых свойств).
Reflect.isExtensible(цель)	Определите, является ли объект расширяемым (можно ли добавлять к нему новые свойства), аналогично Object.isExtensible(). Возвращает логическое значение, указывающее, является ли данный объект расширяемым. (Оба метода Object.seal и Object.freeze могут пометить объект как нерасширяемый.)
Reflect.preventExtensions(цель)	Сделайте объект нерасширяемым, то есть новые свойства никогда не смогут быть добавлены.

4.3.Прокси реализует двустороннюю привязку данных.

(1) Спрос

Реализуйте двустороннюю привязку данных.

(2) Реализация

• Напишите HTML-код

<body>
    请输入内容：<input type="text" id = "input"/><br/>
    实时内容展示：<span id = "span"></span>
    <script src="./js/index.js"></script>
</body>

• Написать js-код

// 获取dom节点
const input = document.getElementById("input");
const span = document.getElementById("span");
//定义双向绑定的对象
let obj = {
    
    };

//定义代理对象的handle方法
const handle = {
    
    
  get: function (target, key) {
    
    
    return target[key];
  },
  set: function (target, key, value) {
    
    
    if (key === "text" && value) {
    
    
      span.innerHTML = value;
      return (target[key] = value);
    }
  },
};

//创建代理对象
const proxy = new Proxy(obj, handle);

//创建键盘的监听事件
input.addEventListener("keyup", function (e) {
    
    
  proxy.text = e.target.value;
  console.log(proxy.text);
});

5. Расширение функций, класс и модульность

5.1.Расширение параметров функции

(1) Параметры функции могут быть установлены на значения по умолчанию.

//求和方法，当a和b都不传值时，默认都为1
function sum(a = 1, b = 1) {
    
    
  return a + b;
}
console.log(sum());
console.log(sum(3));
console.log(sum(3,5));

(2) остальные параметры, переменные параметры

//求和方法，可变参数
function sum(...rest) {
    
    
    let num = 0;
    rest.forEach((e)=>{
    
    
        num+=e;
    })
  return num;
}
console.log(sum(...[1,2]));
console.log(sum(...[1,2,4]));

5.2.ES6 новая функция стрелки

(1) Введение в стрелочные функции

ES6 позволяет использовать => для определения функций. Стрелочные функции эквивалентны анонимным функциям и упрощают определение функции.

Стрелочные функции синтаксически проще обычных функций. Стрелочные функции используют стрелку => для определения функций, опуская ключевое слово function.

无参：()=>{
    
    }，等同于：function (){
    
    }
有参：(a,b)=>{
    
    }，等同于：function (a,b){
    
    }

(2) Стрелочные функции не связывают это

//箭头函数this指当前块级作用域
const obj = {
    
    
  num: 10,
  sum() {
    
    
    setTimeout(() => {
    
    
      console.log(this.num);
    }, 1000);
  },
};
obj.sum();

Если это не стрелочная функция, вызов функции setTimeout() относится к текущему окну.

const obj = {
    
    
  num: 10,
  sum() {
    
    
    setTimeout(function (){
    
    
      console.log(this);
    }, 1000);
  },
};
obj.sum();

(3) При каких обстоятельствах нельзя использовать стрелочные функции?

• Определить методы объекта

const obj = {
    
    
  num: 10,
  sum:() => {
    
    
    setTimeout(() => {
    
    
      console.log(this.num);
    }, 1000);
  },
};
obj.sum();

• Стрелочная функция не имеет аргументов

const fun = () => {
    
    
  console.log(arguments);
};
fun();

• Определить конструктор

const Car = () => {
    
    
  console.log(this);
};
let car = new Car();

• Определите функции обратного вызова для событий DOM

const span = document.getElementById("span");
span.addEventListener("click", () => {
    
    
  console.log(this);
  this.innerHTML = "触发事件";
});

const span = document.getElementById("span");
span.addEventListener("click", function () {
    
    
  console.log(this);
  this.innerHTML = "触发事件";
});

5.3 Концепция классов впервые представлена ​​в ES6.

До ES6 в JavaScript были только объекты и не было понятия классов. Это объектно-ориентированный язык, основанный на прототипах. Особенностью объектов-прототипов является то, что они делятся своими свойствами с новыми объектами.

(1) Определить класс

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }
  sayHello() {
    
    
    console.log(`我是${
      
      this.name},今年${
      
      this.age}岁`);
  }
}
const person = new Person("张三", 18);
person.sayHello();
console.log(person);

(2) Наследование классов, переопределяющее методы родительского класса.

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }
  hello() {
    
    
    console.log(`我是${
      
      this.name},今年${
      
      this.age}岁`);
  }
}

class Student extends Person {
    
    
  //子类重写父类属性
  constructor(name, age, sex) {
    
    
    super(name, age);
    this.sex = sex;
  }
  hello() {
    
    
    console.log(`我是${
      
      this.name},今年${
      
      this.age}岁，性别：${
      
      this.sex === '1'?'男':'女'}`);
  }
}

const person = new Student('张三', 18,'1');
person.hello();
console.log(person);

(3) Статические методы и статические свойства

//静态方法和静态属性只能由类名进行调用
class Person {
    
    
  static eyes = '眼睛';
  static hello(){
    
    
    console.log(`我是${
      
      this.name}`);
  }
}

console.log(Person.eyes);
Person.hello();

5.4.ES6 добавляет новую модульную разработку.

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

• CommonJS: Commonjs был представлен как модульная спецификация и собственный модуль в Node.
• AMD и RequireJs: AMD — это аббревиатура от «Определение асинхронного модуля», что означает «определение асинхронного модуля». Он загружает модули асинхронно, и загрузка модуля не влияет на выполнение последующих операторов. Все операторы, которые зависят от этого модуля, определены в функции обратного вызова. Эта функция обратного вызова не будет выполняться до тех пор, пока не будут загружены все зависимости (предварительные зависимости).

Импортные и экспортные дела

• экспорт.js

const name = '李祥';

function hello(){
    
    
  console.log('hello word');
}

class Car{
    
    
  constructor(name){
    
    
    this.name=name;
  }
  run(){
    
    
    console.log(this.name+'跑起来了');
  }
}

export default{
    
    
  name,
  hello,
  Car,
}

• Импорт.js

import test from './export.js';
console.log(test.name);
test.hello();

• Введение js в html должно быть изменено на тип модуля.

<script src="./js/import.js" type="module"></script>

6.ES6 улучшает асинхронное программирование

6.1.Введение обещаний и кейсы

(1) Что такое ад обратного вызова?

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

Недостатки ада обратных вызовов: Обслуживание почтового индекса сложнее.

Промисы используются для решения проблемы обратных вызовов.

Промисы инкапсулируют асинхронные операции. Создайте объект-обещание и напишите функцию в качестве параметра. Этот параметр функции имеет два параметра, а именно: разрешить и отклонить. Напишите асинхронные операции внутри функции, вызовите разрешение в случае успеха и отклоните вызов в случае неудачи. В это время объект обещания может знать статус асинхронной операции. p.then (успешное выполнение) p.catch (неудачное выполнение).

Промис — это, по сути, конечный автомат, который записывает состояние асинхронных внутренних операций.

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

function request() {
    
    
  axios.get("a.json").then((res) => {
    
    
    if (res && res.data.code === 0) {
    
    
      console.log(res.data.data.data);
      axios.get("b.json").then((res) => {
    
    
        if (res && res.data.code === 0) {
    
    
          console.log(res.data.data.data);
          axios.get("c.json").then((res) => {
    
    
            console.log(res.data.data.data);
          });
        }
      });
    }
  });
}

request();

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

// 准备阶段
new Promise((resolve, reject) => {
    
    })

// 成功状态
new Promise((resolve, reject) => {
    
    
  resolve('成功'); // 同步代码
}).then((res) => {
    
    
  console.log(res);
});

// 失败状态
new Promise((resolve, reject) => {
    
    
  reject('失败');
}).catch((err) => {
    
    
  console.log(err);
});

• На состояние объекта Promise не влияет внешний мир.

  • ожидающее начальное состояние

  • решить статус успеха

  • отклонено, статус неудачи

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

• Как только состояние промиса изменится, оно больше не изменится. Вы можете получить этот результат в любое время. Состояние не может быть отменено. Оно может измениться только с "ожидания" на "выполнено" или с "ожидания" на "отклонено".

(2) Обещание решает случай ада обратного вызова

//先定义三个函数
function requestA() {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.get("a.json").then((res) => {
    
    
      resolve(res);
    });
  });
}

function requestB() {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.get("b.json").then((res) => {
    
    
      resolve(res);
    });
  });
}

function requestC() {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.get("c.json").then((res) => {
    
    
      resolve(res);
    });
  });
}

function request() {
    
    
  requestA().then((res) => {
    
    
      console.log(res);
      return requestB();
    }).then((res) => {
    
    
      console.log(res);
      return requestC();
    }).then((res) => {
    
    
      console.log(res);
    });
}
request();

(3) Метод Promise.all

• Promise.all на самом деле является функцией, которая принимает promiseмассив и возвращает его promise. Затем promiseвы получите массив результатов, когда все они будут завершены, или выдадите ошибку, когда один из них будет отклонен.
• Возвращаемое значение будет соответствовать порядку promiseпараметров, а не promiseпорядку завершения вызовов.

function requestAll() {
    
    
  Promise.all([requestA(), requestB(), requestC()])
    .then((res) => {
    
    
      console.log(res);
    })
    .catch((err) => {
    
    
      console.log(err);
    });
}
requestAll();

(4) Метод Promise.race

Promse.race означает гонку. promiseКакой бы результат во входящем массиве ни был получен быстрее, этот результат будет возвращен, независимо от того, является ли сам результат состоянием успеха или состоянием отказа.

function requestRace() {
    
    
  Promise.race([requestA(), requestB(), requestC()])
    .then((res) => {
    
    
      console.log(res);
    })
    .catch((err) => {
    
    
      console.log(err);
    });
}
requestRace();

6.2 Элегантное асинхронное программирование async

(1) Что такое асинхронность

async — это аббревиатура от asynchronous, синтаксического сахара Generator, используемого для объявления того, что функция является асинхронной.

async function sum(a,b) {
    
    
  await console.log(a+b);
}
sum(1,2);

asyncНаписанный перед функцией, он возвращает Promiseобъект.

async await преобразует обещание. Затем асинхронный вызов.

async function request() {
    
    
  try {
    
    
    const a = await requestA();
    const b = await requestB();
    const c = await requestC();
    console.log(a, b, c);
  } catch (err) {
    
    
    console.log(err);
  }
}
request();