Новые мощные функции в JavaScript: закрытые поля в классах, необязательная цепочка, недопустимые операторы объединения и BigInts.
Автор: Джон Ау-Юнг
Перевод: сумасшедший технический ботаник
оригинал:уровень up.git connect.com/new-feature…
Копирование без разрешения строго запрещено
С момента выпуска ES6 с 2015 года JavaScript стремительно развивается, и в каждой итерации будет много новых фич. Новая версия спецификации языка JavaScript обновляется ежегодно, а предложение новых языковых функций происходит быстрее, чем когда-либо. Это означает, что новая функция будет интегрирована в современные браузеры и другие механизмы выполнения JavaScript (такие как Node.js) с беспрецедентной скоростью.
В 2019 году на этапе «Этап 3» появилось много новых функций, а это значит, что он близится к завершению и уже получает поддержку этих функций в браузерах и Node. Если бы мы хотели использовать их в производстве, мы могли бы использовать что-то вроде Babel, чтобы преобразовать их в устаревший JavaScript для использования в устаревших браузерах (таких как Internet Explorer), когда это необходимо.
В этой статье мы рассмотрели закрытые поля в классах, необязательную цепочку, операторы объединения void и BigInts.
закрытые поля класса
Одно из последних предложений — способ добавления приватных переменных в классы. мы будем использовать#Символы представляют частные переменные класса. Это избавляет от необходимости использовать замыкания для сокрытия закрытых переменных, которые вы не хотите показывать внешнему миру. Например, мы можем написать простой класс для увеличения и уменьшения чисел, посмотрите на следующий код:
class Counter {
#x = 0; increment() {
this.#x++;
} decrement() {
this.#x--;
} getNum(){
return this.#x;
}
}const c = new Counter();
c.increment();
c.increment();
c.decrement();
console.log(c.getNum());
в кодеconsole.logВыходной результат равен 1.#xявляется закрытой переменной и не может быть доступна вне класса. Итак, если мы напишем это:
console.log(c.#x);
будет предложеноUncaught SyntaxError: Private field '#x'.
Закрытые переменные — очень необходимая функция для классов JavaScript. Эта функция теперь доступна в последней версии Chrome и Node.js v12.
необязательный оператор цепочки
В настоящее время, если вы хотите получить доступ к глубоко вложенным свойствам объекта, вам нужно пройти через длинное логическое выражение, чтобы проверить свойства на каждом уровне вложенности. Каждое свойство, определенное на каждом уровне, должно быть проверено вплоть до желаемого глубоко вложенного свойства, как показано в следующем коде:
const obj = {
prop1: {
prop2: {
prop3: {
prop4: {
prop5: 5
}
}
}
}
}obj.prop1 &&
obj.prop1.prop2 &&
obj.prop1.prop2 &&
obj.prop1.prop2.prop3 &&
obj.prop1.prop2.prop3.prop4 &&
console.log(obj.prop1.prop2.prop3.prop4.prop5);
К счастью, приведенный выше код определяет каждое свойство на каждом уровне, к которому мы хотим получить доступ. Однако, если в любом объекте уровня естьundefinedилиnullвложенных объектов, если не поставить галочку, то программа вылетит. Это означает, что мы должны проверять каждый уровень, чтобы убедиться, что при встречеundefinedилиnullобъект не падает.
Чтобы использовать необязательный оператор цепочки, просто используйте?.Для доступа к вложенным объектам. И если встречаundefinedилиnullсвойство, то он просто возвращаетundefined. При необязательной цепочке приведенный выше код можно изменить на:
const obj = {
prop1: {
prop2: {
prop3: {
prop4: {
prop5: 5
}
}
}
}
}console.log(obj?.prop1?.prop2?.prop3?.prop4?.prop5);
Когда наша программа выполняется дляundefinedилиnullсвойство, не падает, просто возвращаетсяundefined. К сожалению, это еще не реализовано ни в одном браузере, поэтому последняя версия Babel использует эту функцию.
Нулевой оператор объединения
отundefinedилиnullДругая проблема со значениями заключается в том, что если нужная нам переменнаяundefinedилиnullВы должны установить значение по умолчанию для переменной. Например:
const y = x || 500;
когда используешь||оператор будетxУстановить какyкогда, еслиxопределяется какundefined, мы должны установить значение по умолчанию. оператор||Проблема в том, что все вещи, такие как 0,falseили пустые строки, такие как значения, будут переопределены значениями по умолчанию, которые нам не нужны.
Для решения этой проблемы было предложено создать «нулевой» оператор объединения, используя??Выражать. С ним у нас есть только первый элемент какnullилиundefinedустановить значение по умолчанию. С недопустимым оператором объединения приведенное выше выражение принимает вид:
const y = x ?? 500;
Например, есть следующий код:
const x = null;
const y = x ?? 500;
console.log(y); // 500const n = 0
const m = n ?? 9000;
console.log(m) // 0
yбудет присвоено значение 500, потому чтоxценностьnull. Однако из-заnне дляnullилиunfined,следовательноmприсваивается значение0. если мы используем||вместо??, то поскольку 0 ложно, будетmПрисвойте значение 9000.
К сожалению, эта функция еще не реализована ни в одном браузере или Node.js, для ее использования необходимо использовать последнюю версию Babel.
BigInt
Мы можем использовать объекты BigInt для представления более
целое число. Операции сложения, вычитания, умножения, деления, остатка и идемпотентности можно выполнять с помощью обычных операций, таких как арифметические операторы. Он может быть составлен из чисел и шестнадцатеричных или двоичных строк. Он также поддерживает побитовые операции, такие как AND, OR, NOT и XOR. Единственная недопустимая побитовая операция — это оператор сдвига вправо, дополненный нулями (>>>).
Аналогично, унарный оператор+Аддитивный транспорт между Numbers и BitInts также не поддерживается. только если все операндыBigIntsвыполнить эти операции. в JavaScriptBigIntотличается от обычных чисел. Оно отличается от обычных чисел тем, что число имеетn.
Мы можем определить BigInt, используя фабричную функцию BigInt. Он принимает один параметр, который может быть целым числом или строкой, представляющей десятичное целое число, шестнадцатеричное слово или двоичное число. BigInt нельзя использовать со встроенными объектами Math. Также необходимо соблюдать осторожность при преобразовании между числами и BigInt, так как точность BigInt может быть потеряна при преобразовании BigInt в число и наоборот.
Чтобы определить BigInt, если передаваемый параметр является целым числом, это может быть похоже на следующий код:
const bigInt = BigInt(1);
console.log(bigInt);
когда мы бежим кconsole.logоператор, он выведет1n. Если бы мы хотели передать строку фабричной функции, мы могли бы написать:
const bigInt = BigInt('2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
console.log(bigInt);
Вы также можете использовать0xСтрока в начале передает строку шестнадцатеричных цифр в фабричную функцию:
const bigHex = BigInt("0x1fffffffffffff111111111");
console.log(bigHex);
когда мыbigHexзапускать наconsole.log, приведенный выше код будет выводиться как618970019642690073311383825n.
Вы можете пройти в0bНачало бинарной строки для получения BigInt:
const bigBin = BigInt("0b111111111111111000000000011111111111111111111111");
console.log(bigBin);
Когда мы бежим вышеconsole.log, результат, полученный приведенным выше кодом, равен281466395164671n. Передача строки удобна, если создаваемый BigInt превышает допустимый диапазон для числового типа.
Вы также можете использовать литералы BigInt для определения типов BigInt. метод добавляетnперсонаж. Например, вы можете написать:
const bigInt = 22222222222222222222222222222222n;
console.log(bigInt);
Тогда мы будем22222222222222222222222222222222222nтак какbigIntвывод сделан. Арифметические операции могут выполняться над BigInts, такими как числа, например.+,-,/,*,％Ждать. Если мы собираемся использовать BigInts для этих операций, все операнды должны быть BigInts. Но если мы получим результат с десятичной запятой, часть после запятой будет усечена. BigInt является большим целым числом и не может хранить десятичные дроби. Например, в следующем примере:
const expected = 8n / 2n;
console.log(expected) // 4n
const rounded = 9n / 2n;
console.log(rounded) // 4n
у нас естьexpectedа такжеroundedЗначения4n. Это связано с тем, что дробная часть была удалена из BigInt.
Операторы сравнения могут применяться к BigInts. Операнд может быть BigInt или числом. Например, вы можете1nа также1Сравнивать:
1n === 1
Приведенный выше код будет оцениваться какfalse, потому что BigInt и Number — это разные типы. Однако, когда мы заменяем тройной знак равенства двойным знаком равенства, как показано в следующем коде:
1n == 1
Приведенное выше утверждение оценивается какtrue, так как сравнивается только это значение. Обратите внимание, что в обоих примерах мы смешиваем операнды BigInt с числовыми операндами. BigInts и числа также можно сравнивать с другими операторами, например, в следующих примерах:
1n < 9
// true9n > 1
// true9 > 9n
// false9n > 9
// false9n >= 9
// true
Кроме того, их можно смешивать вместе для формирования массива и сортировать. Например:
const mixedNums = [5n, 6, -120n, 12, 24, 0, 0n];
mixedNums.sort();
console.log(mixedNums)
Эта функция теперь доступна в последних версиях Chrome и Node.js.
Суммировать
мы можем использовать#Числа для переменных частных классов. Это устраняет необходимость скрытия с закрытиями, мы не хотим разоблачать внешний мир частных переменных. Для того, чтобы решить объектnullа такжеundefinedПроблемы со значением, мы предоставляем необязательные операторы цепочки для доступа к свойствам без проверки каждого уровня.nullещеundefined. Используя недопустимый оператор объединения, мы можем создать переменную только дляnullилиundefinedустановить значение по умолчанию. Используя объекты BigInt, мы можем представлять в JavaScript большие числа, выходящие за безопасный диапазон обычных чисел, и выполнять над ними стандартные операции, за исключением того, что дробная часть будет опущена в результате.