JavaScript (или ECMA Script) — это развивающийся язык, и есть много предложений и идей о том, как двигаться вперед. TC39 (Технический комитет 39) — это комитет, отвечающий за определение стандартов и функций JS, и в этом году они были очень активны. Ниже приводится краткое изложение некоторых предложений, которые в настоящее время находятся на «Этапе 3», последнем этапе перед «Завершением». Это означает, что эти функции скоро будут реализованы в браузерах и других движках. На самом деле, некоторые из них существуют и сейчас.
1. Частные поля#
Chrome и NodeJS 12 уже поддерживаются
Да, вы не ошибаетесь. JS наконец-то поддерживает приватные поля в классах. больше нетthis._doPrivateStuff(), определить замыкания для хранения приватных значений или использоватьWeakMapдля косвенной реализации частных свойств.
Синтаксис таков:
// 私有字段必须以 '#' 开头
// and they can't be accessed outside the class block
class Counter {
#x = 0;
#increment() {
this.#x++;
}
onClick() {
this.#increment();
}
}
const c = new Counter();
c.onClick(); // 正常
c.#increment(); // 出错
Предложение:GitHub.com/Job39/предложения…
2. Необязательные вызовы в цепочке?.
В прошлом, когда вам нужно было получить доступ к свойствам, вложенным в несколько уровней внутри объекта, вы получали пресловутую ошибкуCannot read property 'stop' of undefined. Затем вам нужно изменить свой код, чтобы обрабатывать все возможныеundefinedобъекты, такие как:
const stop = please && please.make && please.make.it && please.make.it.stop;
// 或者使用 'object-path' 这样的库
const stop = objectPath.get(please, "make.it.stop");
С необязательной цепочкой вы можете сделать то же самое, просто написав:
const stop = please?.make?.it?.stop;
Предложение:GitHub.com/Job39/предложения…
3. Нулевой оператор объединения??
Необязательное значение переменной может быть недоступно, если используется не значение по умолчанию. Такая ситуация очень распространена:
const duration = input.duration || 500;
использовать||Проблема в том, что он перезаписывает все ложные значения типа (0, '', false), эти значения могут быть допустимыми входными данными в некоторых случаях.
Введите нулевой оператор объединения, он просто перезапишетundefinedилиnull.
const duration = input.duration ?? 500;
Предложение:GitHub.com/Job39/предложения…
4. BigInt 1n
Chrome и NodeJS 12 уже поддерживаются
Одна из причин, по которой JS всегда плохо разбирался в математике, заключается в том, что мы не можем надежно хранить больше, чем2 ^ 53чисел, что очень затрудняет обработку довольно больших чисел. К счастью,BigIntявляется предложением решить эту конкретную проблему.
// 可以通过附加'n'到一个数字字面量来定义BitInt
const theBiggestInt = 9007199254740991n;
// 使用构造器
const alsoHuge = BigInt(9007199254740991);
// 或则字符串形式
const hugeButString = BigInt('9007199254740991');
вы также можетеBigIntиспользуйте те же операторы, что и обычные числа, например.+, -, /, *, %и т.п. Но есть проблема, в большинстве операций не может бытьBigIntа такжеNumberСмешанное использование. СравниватьNumberа также BigIntДа, но вы не можете сложить их вместе.
1n < 2
// true
1n + 2
// 🤷♀️ Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
Предложение:GitHub.com/Job39/предложения…Справочное чтение:Узнайте о новом типе данных JavaScript BigInt в одной статье
5. staticполе
Chrome и NodeJS 12 поддерживаются
Это очень просто. Это позволяет классам иметь статические поля, как и в большинстве языков ООП. Статические поля можно использовать вместо перечислений, а также частных полей.
class Colors {
// public static 字段
static red = '#ff0000';
static green = '#00ff00';
// private static 字段
static #secretColor = '#f0f0f0';
}
font.color = Colors.red;
font.color = Colors.#secretColor; // Error
Предложение:GitHub.com/Job39/предложения…
6. Верхний слойawait
Chrome уже поддерживает
Позволяет вам использовать await в области верхнего уровня вашего кода. Это полезно для отладки асинхронного содержимого в консоли браузера (например,fetch) очень полезен, если его не оборачивать в асинхронную функцию.
Другой вариант использования киллера заключается в том, что его можно использовать поверх модулей ES, которые инициализируются асинхронно (например, при установлении соединения с базой данных). Когда такой асинхронный модуль импортируется, модульная система будет ждать его разрешения, прежде чем выполнять зависящие от него модули. Это упростит обработку асинхронной инициализации по сравнению с текущим возвратом обещания инициализации и ожиданием его разрешения. Модуль не будет знать, являются ли его зависимости асинхронными.
// db.mjs
export const connection = await createConnection();
// server.mjs
import { connection } from './db.mjs';
server.start();
В этом примереserver.mjsничего не делает в , покаdb.mjsзавершить подключение.
предложение:GitHub.com/Job39/предложения…
Справочное чтение:Высший уровень ждет уточнения
7. WeakRef
- Chrome и NodeJS 12 уже поддерживаются*
Слабая ссылка на объект — это ссылка, которой недостаточно для того, чтобы объект был живым. Когда мы используем (const, let, var) при создании переменной сборщик мусора (GC) никогда не удалит переменную из памяти, пока ее ссылки остаются доступными. Это сильные ссылки. Однако если объект, на который ссылается слабая ссылка, не имеет строгой ссылки, сборщик мусора может удалить его в любое время.WeakRefЭкземпляр имеет методderef, который возвращает исходный объект ссылки, или если исходный объект перерабатываетсяundefined.
Это может быть полезно для кэширования дешевых объектов, поскольку вы не хотите хранить все объекты в памяти навсегда.
const cache = new Map();
const setValue = (key, obj) => {
cache.set(key, new WeakRef(obj));
};
const getValue = (key) => {
const ref = cache.get(key);
if (ref) {
return ref.deref();
}
};
const fibonacciCached = (number) => {
const cached = getValue(number);
if (cached) return cached;
const sum = calculateFibonacci(number);
setValue(number, sum);
return sum;
};
Это может быть не очень хорошей идеей для кэширования удаленных данных, так как удаленные данные могут быть удалены из памяти непредсказуемым образом. В этом случае лучше использовать кэш типа LRU. предложение:GitHub.com/Job39/предложения…
над. Надеюсь, вы так же, как и я, взволнованы использованием этих замечательных новых функций. Чтобы узнать больше об этих предложениях и других деталях, которые я не упомянул, следуйтеПредложение TC39 на github
оригинал:7 Exciting New JavaScript Features You Need to Know
общаться с
Добро пожаловать в общедоступную учетную запись WeChat «Станция перевода 1024» и следите за последними технологическими тенденциями вместе со мной.