Что-то есть в новом синтаксисе JS

внешний интерфейс JavaScript

Автор обратил внимание на предложение TC39, и я собрал несколько интересных, чтобы поговорить о них сегодня.

PS: Всего в предложении пять этапов, только этап 4 будет включен в спецификацию релиза, а остальные будут иметь только шанс быть включенными.

.at()

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

По вышеуказанным причинам, если мы хотим получить последний элемент, мы должны написать так:arr[arr.length - 1], позжеatТаким образом, мы можемarr.at(-1)Давайте возьмем элементы в конце, и то же самое относится к массивам и строкам.

// Polyfill
function at(n) {
    // ToInteger() abstract op
    n = Math.trunc(n) || 0;
    // Allow negative indexing from the end
    if(n < 0) n += this.length;
    // OOB access is guaranteed to return undefined
    if(n < 0 || n >= this.length) return undefined;
    // Otherwise, this is just normal property access
    return this[n];
}

ожидание верхнего уровня

awaitдолжны использоватьasyncКаждый должен знать, что пакет функций, это ограничение не позволяет нам использовать его непосредственно в глобальной области видимости.await, должны быть упакованы.

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

В настоящее время предложение вошло в стадию 4, и оно обязательно будет выпущено. Фактически, недавнее обновление Chrome уже поддерживает эту функцию.

image-20210620162451146

Error Cause

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

async function getSolution() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      // How to wrap the error properly?
      // 1. throw new Error('Download raw resource failed: ' + err.message);
      // 2. const wrapErr = new Error('Download raw resource failed');
      //    wrapErr.cause = err;
      //    throw wrapErr;
      // 3. class CustomError extends Error {
      //      constructor(msg, cause) {
      //        super(msg);
      //        this.cause = cause;
      //      }
      //    }
      //    throw new CustomError('Download raw resource failed', err);
    })
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult });
}

await doJob(); // => TypeError: Failed to fetch

Таким образом, с помощью этого синтаксиса мы можем упростить код следующим образом:

async function doJob() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed', { cause: err });
    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed', { cause: err });
    });
}

try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Error: Upload job result failed
// Caused by TypeError: Failed to fetch

оператор трубы

этограмматикаЗвёзд много, больше 5к, и со стороны видно, что это популярная грамматика, но до выхода её должно пройти много времени.Ведь это предложение было сделано года три-четыре назад , и то только на 1 этапе.

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

let result = exclaim(capitalize(doubleSay("hello")));
result //=> "Hello, hello!"

let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

result //=> "Hello, hello!"

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

Новые структуры данных: записи и кортежи

этоструктура данныхАвтор считает, что это будет особенно полезно после релиза.Всего добавлено две новые структуры данных.Можно переходить#объявить:

  1. #{ x: 1, y: 2 }
  2. #[1, 2, 3, 4]

Эта структура данных является неизменяемой, аналогично immer или immutable.js, представленным в React для оптимизации производительности, в которых значения принимают только базовые типы или оба неизменяемых типа данных.

const proposal = #{
  id: 1234,
  title: "Record & Tuple proposal",
  contents: `...`,
  // tuples are primitive types so you can put them in records:
  keywords: #["ecma", "tc39", "proposal", "record", "tuple"],
};

// Accessing keys like you would with objects!
console.log(proposal.title); // Record & Tuple proposal
console.log(proposal.keywords[1]); // tc39

// Spread like objects!
const proposal2 = #{
  ...proposal,
  title: "Stage 2: Record & Tuple",
};
console.log(proposal2.title); // Stage 2: Record & Tuple
console.log(proposal2.keywords[1]); // tc39

// Object functions work on Records:
console.log(Object.keys(proposal)); // ["contents", "id", "keywords", "title"]

наконец

Выше автор перечислил несколько интересных предложений по TC39.Кроме вышеперечисленных есть много предложений.Если интересно,можете зайти наTC39найти в.

Категории