Страница пуста? Пересмотреть его?

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

задний план

Сегодня служба контроля качества снова обнаружила меня: вчера эта страница была в порядке, но сегодня экран пуст. Что-то не так с вашим кодом? Поторопитесь и посмотрите.

Посмотрите и найдите причину:

оригинальныйpickup, dropoffЕсли в двух полях нет данных, он должен вернуть{}, теперь результатpickupполе возвращеноnull, и когда мы взяли значение, мы не стали защищать это место.

list: openApiOrderInfo.pickup.address_list,

Результат:脚本报错， 页面不可用。

Это также очень просто решить, или дать默认值или используйте?.Сделайте слой защиты.

После изменения попробуйте еще раз, все будет в порядке, и страница вернется в нормальное состояние.

Давайте поговорим об этом?.

Сегодня основное содержание:

  • Что такое необязательный оператор цепочки (?.)
  • Как включить эту функцию
  • необязательный оператор цепочки (?.) как это работает
  • HenyОпубликованная соответствующая информация
  • Суммировать

язык текста

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

Что такое необязательный оператор цепочки (?.)

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

Например, рассмотрим объект obj, который имеет вложенную структуру. Без дополнительной цепочки при поиске глубоко вложенного подсвойства вам необходимо проверить ссылки между ними, например:

let nestedProp = obj.first && obj.first.second;

Во избежание ошибок перед доступом к obj.first.second убедитесь, что значение obj.first не является ни нулевым, ни неопределенным.

Если вы просто напрямую обращаетесь к obj.first.second, не проверяя obj.first, может возникнуть ошибка.

С необязательным оператором цепочки (?.) больше нет необходимости явно проверять состояние obj.first перед доступом к obj.first.second, а затем использовать вычисление короткого замыкания для получения окончательного результата:

let nestedProp = obj.first?.second;

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

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

?.Функция оператора аналогична.цепной оператор, за исключением того, что:

в отношении нулевого (nullилиundefined) на случай, если不会引起错误, возвращаемое значение короткого замыкания этого выражения:undefined.

При использовании с вызовом функции, если данная функция не существует, она возвращаетundefined.

при попытке доступа可能不存在的对象属性когда используешь可选链操作符сделает выражение更短、更简明.

Есть два момента, на которые мы должны обратить внимание:

  1. Если есть имя свойства, которое не является функцией, использование ?. все равно вызовет TypeError (x.y не является функцией).
let result = someInterface.customMethod?.();

Исключение, если сам someInterface имеет значение null или не определеноTypeErrorвсе равно выкинут.

Если вы хотите разрешить someInterface также дляnullилиundefined, то нужно написать такsomeInterface?.customMethod?.()

  1. дополнительная цепочка不能用于赋值 
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

Как включить эту функцию

// install
npm install --save-dev @babel/plugin-proposal-optional-chaining

// babel config
{
 "plugins": [
    "@babel/plugin-proposal-optional-chaining" //可选链
    "@babel/plugin-proposal-nullish-coalescing-operator", //双问号
  ]
}

необязательный оператор цепочки (?.) как это работает

const a = {
  b: 1
};

console.log(a?.b);

будет преобразовано в:

const a = {
  b: 1
};

console.log(a === null ? void 0 : a.b);

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

const a = {
  b: {
    c: 1,
    d: 2,
  }
};

console.log(a?.b?.c)

будет преобразовано в:

var _a$b;

const a = {
  b: {
    c: 1,
    d: 2
  }
};
console.log(
  a === null || a === void 0
    ? void 0 
    : (_a$b = a.b) === null || _a$b === void 0
      ? void 0
      : _a$b.c
);

HenyОпубликованная соответствующая информация

Хени в настоящее времяbabelОтветственный за проект ранее опубликовал статью, в которой рассказывается о текущей дилемме Babel.

Ссылка на твит выше:Twitter.com/left_crawl/body…

Если вам интересно, вы можете пойти и посмотреть.

Суммировать

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

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

?.И младший брат по имени空值合并运算符(??), я не буду говорить это здесь, перейдите на MDN, чтобы увидеть документацию.

На сегодня это все, надеюсь всех вдохновил.

Категории