Новое предложение ES: оператор двойного вопросительного знака

JavaScript ECMAScript 6

Автор: Фронтенд Сяочжи Переводчик: д-р Аксель Раушмайер Источник: 2ality

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

1 Обзор

двойной вопросительный знак??оператор с||Аналогично, если заданное значение переменной равноnullилиundefined, просто используйте значение по умолчанию после двойного вопросительного знака, в противном случае используйте значение переменной.

следующим образом:

> undefined ?? 'default'
'default'
> null ?? 'default'
'default'
> false ?? 'default'
false
> '' ?? 'default'
''
> 0 ?? 'default'
0

2. Ранний оператор ||

Давайте возьмем пример, чтобы продемонстрировать||операции следующие два уравнения эквивалентны:

a || b
a ? a : b

еслиaявляется истинным значением, возвратa, иначе возвратb.

Это делает использование||Можно указать значение по умолчанию, которое будет использоваться, если фактическое значение ложно:

const result = actualValue || defaultValue;
function getTitle(fileDesc) {
  return fileDesc.title || '(Untitled)';
}
const files = [
  {path: 'index.html', title: 'Home'},
  {path: 'tmp.html'},
];
assert.deepEqual(
  files.map(f => getTitle(f)),
  ['Home', '(Untitled)']);

Обратите внимание, что basic работает только тогда, когда фактическое значениеundefinedили дляnullЗначение по умолчанию следует использовать только тогда, когдаundefinedа такжеnullОба ложны (мнимые значения):

> undefined || 'default'
'default'
> null || 'default'
'default'

К сожалению, значение по умолчанию также используется, если фактическое значение является каким-то другим фиктивным значением:

> false || 'default'
'default'
> '' || 'default'
'default'
> 0 || 'default'
'default'

Следовательно, этоgetTitle()не всегда работает:

assert.equal(
  getTitle({path: 'empty.html', title: ''}),
  '(Untitled)');

3. Используйте оператор двойного вопросительного знака, чтобы решить проблему операции ||

??используется в основном для решения||Некоторые проблемы с рабочими символами, следующие два выражения эквивалентны:

a ?? b
a !== undefined && a !== null ? a : b

Значение по умолчанию предоставляется следующим образом:

const result = actualValue ?? defaultValue;

дляundefinedа такжеnull,??Оператор работает так же, как||тот же оператор

> undefined ?? 'default'
'default'
> null ?? 'default'
'default'

Кромеundefinedа такжеnullдругие мнимые значения ,??Значение по умолчанию не будет возвращено.

> false ?? 'default'
false
> '' ?? 'default'
''
> 0 ?? 'default'
0

использовать??переписатьgetTitle():

function getTitle(fileDesc) {
  return fileDesc.title ?? '(Untitled)';
}

используй сейчасfileDescназовите это, это.titleявляется пустой строкой и по-прежнему работает так, как мы ожидаем:

assert.equal(
  getTitle({path: 'empty.html', title: ''}),
  '');

3.1 Деконструкция дает заданное значение по умолчанию

Помимо использования??ДатьgetTitleДобавьте значения по умолчанию, мы также можем дать значения по умолчанию, деструктурировав:

function getTitle({title = '(Untitled)'}) {
  return title;
}

3.2 Практический пример использования оператора ??

В качестве реалистического примера используем??чтобы упростить приведенную ниже функцию.

function countMatches(regex, str) {
  if (!regex.global) {
    throw new Error('Regular expression must have flag /g: ' + regex);
  }
  const matchResult = str.match(regex); // null or Array
  if (matchResult === null) {
    return 0;
  } else {
    return matchResult.length;
  }
}

assert.equal(
  countMatches(/a/g, 'ababa'), 3);
assert.equal(
  countMatches(/b/g, 'ababa'), 2);
assert.equal(
  countMatches(/x/g, 'ababa'), 0);

// Flag /g is missing
assert.throws(
  () => countMatches(/a/, 'ababa'), Error);

использовать??После манипуляций с символами упростите следующим образом:

function countMatches(regex, str) {
  if (!regex.global) {
    throw new Error('Regular expression must have flag /g: ' + regex);
  }
  return (str.match(regex) ?? []).length;
}

3.3 Оператор двойного вопросительного знака (??) и необязательная цепочка (?)

двойной вопросительный знак(??) было предложено дополнить необязательную цепочку (?), чтобы увидеть сценарий, в котором два брата используются вместе (строка A):

const persons = [
  {
    surname: 'Zoe',
    address: {
      street: {
        name: 'Sesame Street',
        number: '123',
      },
    },
  },
  {
    surname: 'Mariner',
  },
  {
    surname: 'Carmen',
    address: {
    },
  },
];

const streetNames = persons.map(
  p => p.address?.street?.name ?? '(no name)'); // (A)
assert.deepEqual(
  streetNames, ['Sesame Street', '(no name)', '(no name)']
);

4. Совместимость

в состоянии пройтиECMAScript Next compatibility tableПроверить??Ситуация поддержки.

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

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории