es6, 7, 8, 9 новый синтаксис новые функции - сводка

1. команды let и const

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

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

constОбъявите константу только для чтения. После объявления значение константы не может быть изменено.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

2. Разрушающее присвоение переменных

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

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

По сути, этот способ записи представляет собой «сопоставление с образцом», поскольку образец с обеих сторон знака равенства одинаков, переменной слева будет присвоено соответствующее значение. Вот несколько примеров деструктуризации с использованием вложенных массивов.

(1) деструктурирование присваивания массива

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

(2) Разрушающее присвоение объектов

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

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

(3) Разрушающее присвоение строк

Строкам также может быть назначена деструктуризация. Это связано с тем, что в этот момент строка преобразуется в объект, подобный массиву.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

(4) Разрушающее присвоение числовых и логических значений

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

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

(5) Разрушающее назначение функциональных параметров

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

3. Расширение строки

API:

• codePointAt(): может правильно обрабатывать символы, хранящиеся в 4 байтах, возвращая кодовую точку символа.
  
• String.fromCodePoint(): используется для возврата соответствующего символа из кодовой точки, но этот метод не может распознавать 32-битные символы UTF-16.
  
• at(): возвращает символ в заданной позиции в строке. Метод не распознает кодовые точки больше, чем0xFFFFслово
  
• normalize(): он используется для объединения различных представлений символов в одну и ту же форму, что называется нормализацией Unicode.
  
• include(): возвращает логическое значение, указывающее, была ли найдена строка параметра.
  
• startWith(): возвращает логическое значение, указывающее, находится ли строка параметра в начале исходной строки.
  
• endWith(): возвращает логическое значение, указывающее, находится ли строка параметра в конце исходной строки.
  
• Repeat(): возвращает новую строку, которая повторяет исходную строку.nВторосортный.
  
• padStart()padEnd():Если строка недостаточно длинная, она будет заполнена в начале или в конце.padStartдля завершения головы,padEndИспользуется для завершения хвоста.
  

(1) Представление символов Unicode

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

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

(2) Интерфейс путешественника строки

ES6 добавляет к строкам интерфейс обходчика, чтобы строки можно былоfor...ofПереберите.

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

(3) строка шаблона

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

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

4. Обычное расширение

(1) конструктор регулярных выражений

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

new RegExp(/abc/ig, 'i').flags
// "i"

(2) Регулярный метод строк

Строковые объекты имеют 4 метода, которые могут использовать регулярные выражения:match(),replace(),search()а такжеsplit().

ES6 вызывает методы экземпляра RegExp для этих четырех методов внутри языка, так что все обычные методы определяются в объекте RegExp.

• String.prototype.matchпередачаRegExp.prototype[Symbol.match]
• String.prototype.replaceпередачаRegExp.prototype[Symbol.replace]
• String.prototype.searchпередачаRegExp.prototype[Symbol.search]
• String.prototype.splitпередачаRegExp.prototype[Symbol.split]

(3) модификатор у

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

5. Расширение значений ES6

Двоичная и восьмеричная запись

ES6 предоставляет новые способы записи двоичных и восьмеричных значений, соответственно с префиксом0b(или0B)а также0o(или0O)Выражать.

API

• Number.isFinite()
  
• Number.isNaN()
• Number.parseInt()
• Number.parseFloat()
• Number.isInteger()
• Number.EPSILON

6. Расширение массива

Array.from()

Используется для преобразования двух типов объектов в настоящие массивы: массивоподобные объекты и итерируемые объекты (включая новые структуры данных ES6 Set и Map).

Array.of()

Array.ofМетод используется для преобразования набора значений в массив.

7. Расширение функций

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

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

(1) Функция стрелки

ES6 позволяет использовать «стрелки» (=>) для определения функции.

var f = v => v;
// 等于
var f = function(v) {
 return v;
};

(2) Оператор спреда

Оператор спреда (spread) — три точки (...). Это похоже на инверсию остальных параметров, превращая массив в последовательность параметров, разделенных запятыми.

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

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

(1) Краткое представление свойств и методов

ES6 позволяет напрямую записывать переменные и функции как свойства и методы объектов. Этот способ написания более лаконичен.

var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// 等同于
var baz = {foo: foo};

(2) Краткое представление метода

var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function() {
    return "Hello!";
  }
};

(3) Объект.назначить

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

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

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

9. Символ

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

10. Объект обещания

ES6 указывает, что объект Promise — это конструктор, который генерирует экземпляр Promise.

Следующий код создает экземпляр Promise.

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

После создания экземпляра Promise метод then можно использовать для указания функций обратного вызова для состояний Resolved и Reject соответственно.

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Ниже приведен пример асинхронной загрузки изображений.

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

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

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

S6 предоставляет новую структуру данных Set. Он похож на массив, но все значения членов уникальны и нет повторяющихся значений.

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

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Назначение и основное использование структуры Map

ES6 предоставляет структуру данных карты. Он подобен объекту и также представляет собой набор пар ключ-значение, но область действия «ключей» не ограничивается строками, и в качестве ключей могут использоваться различные типы значений (включая объекты). Другими словами, структура Object обеспечивает соответствие "строка-значение", а структура Map обеспечивает соответствие "значение-значение", что является более полной реализацией структуры Hash. Если вам нужна структура данных "ключ-значение", Map больше подходит, чем Object.

var m = new Map();
var o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

12. Прокси и отражение

Proxy

Прокси используется для изменения поведения определенных операций по умолчанию, что эквивалентно внесению изменений на уровне языка, поэтому он относится к разновидности «метапрограммирования», то есть к программированию на языке программирования.

Прокси можно понимать как настройку уровня «перехвата» перед целевым объектом, и доступ к объекту из внешнего мира должен сначала пройти этот уровень перехвата, поэтому он обеспечивает механизм фильтрации и перезаписи доступа к внешнему миру. . Первоначальное значение слова Proxy — прокси, и здесь оно используется для обозначения того, что оно используется для «прокси» некоторых операций, что можно перевести как «прокси».

Proxy

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

(1) будетObjectМетоды объекта, которые явно являются внутренними для языка (например,Object.defineProperty), вставитьReflectна объекте. На этом этапе некоторые методыObjectа такжеReflectобъект, будущие новые методы будут развернуты только наReflectна объекте.

(2) Изменить возвращаемые результаты некоторых методов объекта, чтобы сделать их более разумными. Например,Object.defineProperty(obj, name, desc)Ошибка выдается, когда свойство не может быть определено, иReflect.defineProperty(obj, name, desc)вернусьfalse.

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

13. Итератор и for...of циклы

Понятие тератора

Исходная структура данных JavaScript, представляющая «коллекцию», состоит в основном из массива (Array) и объекта (Object).ES6 добавляет Map и Set. Таким образом, существует четыре вида наборов данных, и пользователи также могут использовать их в комбинации для определения своих собственных структур данных.Например,элементы массива — это Map, а элементы Map — объекты. Это требует единого механизма интерфейса для обработки всех различных структур данных.

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

Итератор имеет три функции: одна — предоставить унифицированный и удобный интерфейс доступа к различным структурам данных, другая — дать возможность расположить элементы структуры данных в определенном порядке, третья — ES6 создает новую команду обходаfor...ofLoop, интерфейс Iterator в основном используется дляfor...ofПотребление.

Процесс обхода Iterator выглядит следующим образом.

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

(2) Первый вызов объекта указателяnextметод, вы можете указать указатель на первый член структуры данных.

(3) Второй вызов объекта указателяnextметод указатель указывает на второй член структуры данных.

(4) Постоянный вызов объекта указателяnextметод, пока он не укажет на конец структуры данных.

каждый звонокnextвсе методы возвращают информацию о текущем члене структуры данных. В частности, он возвращаетvalueа такжеdoneОбъект с двумя свойствами. в,valueсвойство является значением текущего члена,doneСвойство является логическим значением, указывающим, завершен ли обход.

Ниже представлена ​​симуляцияnextПример возвращаемого значения метода.

var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

for... цикла

ES6 опирается на языки C++, Java, C# и Python, чтобы представитьfor...ofЦиклы как единый способ обхода всех структур данных.

Структуру данных нужно только развернутьSymbol.iteratorсчитается, что у него есть интерфейс итератора, и его можно использовать сfor...ofПеребрать его члены. То есть,for...ofСтруктура данных вызывается внутри циклаSymbol.iteratorметод.

for...ofДиапазон циклов, которые можно использовать, включает массивы, структуры Set и Map, некоторые подобные массивам объекты (такие какargumentsобъекты, объекты DOM NodeList), объекты генератора позже и строки.

Массивы изначально доступныiteratorинтерфейс (то есть развернутый по умолчаниюSymbol.iteratorатрибуты),for...ofЦикл — это, по сути, обходчик, сгенерированный вызовом этого интерфейса, что можно продемонстрировать с помощью следующего кода.

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

const obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);

for(let v of obj) {
  console.log(v); // red green blue
}

14. Генератор/выход

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

function* gen() {
  yield  123 + 456;
}

15. асинхронно и ждать

ES7 обеспечиваетasyncФункции, которые делают асинхронные операции более удобными.asyncЧто такое функция? Одним словом,asyncФункции — это синтаксический сахар для функций-генераторов.

Последовательно прочитать два файла.

var fs = require('fs');

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

написано какasyncфункционируют следующим образом

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}

Разработчики, знакомые с чистыми объектно-ориентированными языками, такими как Java, object-c, c# и т. д., будут иметь особое чувство класса. В ES6 появились классы, чтобы сделать объектно-ориентированное программирование на JavaScript проще и понятнее.

  class Animal {
    // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);

    }
  }

 var animal = new Animal('dog','white');//实例化Animal
 animal.toString();

 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true

 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super函数的constructor将会被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat('catch')
 cat.toString();

 // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

17. Модуль

экспорт (экспорт)

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

Экспорт переменных/констант

//test.js
export var name = 'Rainbow'

ES6 рассматривает файл как модуль, а указанный выше модуль экспортирует переменную через экспорт. Модуль также может одновременно выводить наружу несколько переменных.

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

функция экспорта

// myModule.js
export function myModule(someArg) {
  return someArg;
} 

импорт (импорт)

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

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

18. Декоратор

Декоратор — это функция, которая изменяет поведение класса. Это для ES7предложение, который в настоящее время поддерживается транскодером Babel.

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

модификация класса

function testable(target) {
  target.isTestable = true;
}

@testable
class MyTestableClass {}

console.log(MyTestableClass.isTestable) // true

В приведенном выше коде@testableявляется модификатором. это изменяетMyTestableClassПоведение этого класса, добавление к нему статических свойствisTestable.

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

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

Модификация метода

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Ссылаться на

Языковой стандарт ECMAScript® 2016

ECMAScript® 2017