Преимущества необязательных цепочек JS

JavaScript ECMAScript 6

Автор: Дмитрий Павлютин Переводчик: Front-end Xiaozhi Источник: дмитрипавлутин

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

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

Некоторые функции JS радикально изменили способ написания кода. Решения, стрелочные функции, классы и системы модулей для функций, которые больше всего влияют на наш код из ES6.

По состоянию на август 2019 года новое предложение альтернативной сети вступило в третью фазу, что является хорошим улучшением. Необязательная цепочка изменяет способ доступа к свойствам из глубоких структур объектов.

Посмотрим, что это за хрень.

На этой неделе проводится лотерея "Moving the World", призы: колонка "Левое ухо слушает ветер" x3, техническая книга x5, просьба обратить внимание на ответ: лотерея

вопрос

Из-за динамической природы JS объекты могут иметь несколько слоев различных вложенных структур объектов.

Обычно, когда мы обращаемся к этим объектам:

  • Получить удаленные данные JSON
  • Использование объектов конфигурации
  • Имеет необязательные атрибуты

Хотя JS поддерживает различные иерархические структуры данных для объектов, сложность также возрастает при доступе к свойствам таких объектов.

bigObjectМожет иметь разные наборы свойств во время выполнения

// 嵌套版本
const bigObject = {
  // ...
  prop1: {
    //...
    prop2: {
      // ...
      value: 'Some value'
    }
  }
};

// 简单版本
const bigObject = {
  // ...
  prop1: {
    // Nothing here   
  }
};

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

if (bigObject && 
    bigObject.prop1 != null && 
    bigObject.prop1.prop2 != null) {
  let result = bigObject.prop1.prop2.value;
}

Это слишком многословно, чтобы писать, и лучше этого не писать.

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

2. Легкий доступ к свойствам

Создайте объект, который содержит информацию о фильме. Объект содержит обязательные поляtitleатрибуты и необязательныеdirectorа такжеactors.

movieSmallОбъект содержит толькоtitle,а такжеmovieFullСодержит полный набор свойств:

const movieSmall = {
  title: 'Heat'
};

const movieFull = {
  title: 'Blade Runner',
  director: { name: 'Ridley Scott' },
  actors: [{ name: 'Harrison Ford' }, { name: 'Rutger Hauer' }]
};

написать получитьdirectorФункция. пожалуйста, помните,directorможет не существовать.

function getDirector(movie) {
  if (movie.director != null) {
    return movie.director.name;
  }
}

getDirector(movieSmall); // => undefined
getDirector(movieFull);  // => 'Ridley Scott'

if（movie.director）{...}Условие используется для проверки, если оно определеноdirectorАтрибуты.如果没有这个预防措施，在访问movieSmallобъектdirector, JS выкинетTypeError: Cannot read property 'name' of undefined.

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

function getDirector(movie) {
  return movie.director?.name;
}

getDirector(movieSmall); // => undefined
getDirector(movieFull);  // => 'Ridley Scott'

在movie.director?.nameможно найти в выражении?.Необязательный оператор цепочки.

существуетmovieSmall, Здесь нетdirectorАтрибуты. следовательно,movie.director？.name的Результатundefined. Дополнительный оператор цепочки предотвращает бросокTypeError: Cannot read property 'name' of undefined.

Проще говоря, фрагмент кода:

let name = movie.director?.name;

Эквивалентно

let name;
if (movie.director != null) {
  name = movie.director.name;
}

?.Упрощение за счет сокращения двух строк кодаgetDirector()функций, вот почему я люблю необязательные цепочки.

2.1 Элементы массива

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

Следующей задачей является написание функции, которая возвращает значение фильма.actorsсерединаname.

существуетmovieв объекте,actorsМассивы могут быть пустыми или даже отсутствовать, поэтому для проверки на пустое необходимо добавить дополнительные условия.

function getLeadingActor(movie) {
  if (movie.actors && movie.actors.length > 0) {
    return movie.actors[0].name;
  }
}

getLeadingActor(movieSmall); // => undefined
getLeadingActor(movieFull);  // => 'Harrison Ford'

if (movie.actors && movies.actors.length > 0) {...}Состояние Основное суждениеmovieВключатьactorsатрибут, и этот атрибут имеет хотя бы одинactor.

Используя необязательную цепочку, код также очень лаконичен:

function getLeadingActor(movie) {
  return movie.actors?.[0]?.name;
}

getLeadingActor(movieSmall); // => undefined
getLeadingActor(movieFull);  // => 'Harrison Ford'

actors?.убедисьactorsсвойства существуют,[0]?.Убедитесь, что первый существует в спискеactor.

3. Оператор двойного вопросительного знака

имяnullish coalescing operatorновое предложение? иметь дело сundefinedилиnull, чтобы по умолчанию установить для них определенные значения.

выражение变量??если переменнаяundefinedили дляnull, значением по умолчанию является указанное значение.

const noValue = undefined;
const value = 'Hello';

noValue ?? 'Nothing'; // => 'Nothing'
value   ?? 'Nothing'; // => 'Hello'

затем используйте??оптимизироватьgetLeading()функционировать, когдаmovieобъект не имеетactorвозвращает "Unknown actor"

function getLeadingActor(movie) {
  return movie.actors?.[0]?.name ?? 'Unknown actor';
}

getLeadingActor(movieSmall); // => 'Unknown actor'
getLeadingActor(movieFull);  // => 'Harrison Ford'

4. Три формы необязательных цепочек

Мы можем использовать следующие 3 формы необязательных цепочек.

Первый:object?.propertyДля доступа к статическим свойствам:

const object = null;
object?.property; // => undefined

Второй:object?.[expression]Для доступа к динамическим свойствам или элементам массива:

// 其一
const object = null;
const name = 'property';
object?.[name]; // => undefined
// 其二
const array = null;
array?.[0]; // => undefined

Третий:object?.([arg1, [arg2, ...]])выполнить объектный метод

const object = null;
object?.method('Some value'); // => undefined

Объединение этих трех создает необязательную цепочку:

const value = object.maybeUndefinedProp?.maybeNull()?.[propName];

5. Короткое замыкание: встречаnull/undefinedостановка

Интересная особенность необязательного оператора цепочки заключается в том, что пока он находится слеваleftHandSide？.rightHandSideПравосторонний доступ прекращается, когда встречается недопустимое значение, что называется коротким замыканием.

Взгляните на пример:

const nothing = null;
let index = 0;

nothing?.[index++]; // => undefined
index;              // => 0

6. Когда использовать необязательную цепочку

Не спешите использовать необязательный оператор цепочки для доступа к любому свойству: это может привести к неправильному использованию.

6.1 Доступ к потенциально недопустимым свойствам

?.Обычно используется для свойств, которые могут быть пустыми:maybeNullish?.prop. Используйте метод доступа к свойству, если вы уверены, что свойство не равно null:.property或[propExpression].

// 好
function logMovie(movie) {
  console.log(movie.director?.name);
  console.log(movie.title);
}

// 不好
function logMovie(movie) {
  // director needs optional chaining
  console.log(movie.director.name);

  // movie doesn't need optional chaining
  console.log(movie?.title);
}

6.2 Часто есть лучшие варианты

следующие функцииhasPadding()получить необязательныйpaddingСвойства объекта стиля.paddingимеютleft,top,right,bottomНеобязательный атрибут.

Попробуйте использовать необязательный оператор цепочки:

function hasPadding({ padding }) {
  const top = padding?.top ?? 0;
  const right = padding?.right ?? 0;
  const bottom = padding?.bottom ?? 0;
  const left = padding?.left ?? 0;
  return left + top + right + bottom !== 0;
}

hasPadding({ color: 'black' });        // => false
hasPadding({ padding: { left: 0 } });  // => false
hasPadding({ padding: { right: 10 }}); // => true

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

Лучшим подходом является использование оператора распространения объекта дляpaddingОбъект по умолчанию имеет нулевое значение

function hasPadding({ padding }) {
  const p = {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    ...padding
  };
  return p.top + p.left + p.right + p.bottom !== 0;
}

hasPadding({ color: 'black' });        // => false
hasPadding({ padding: { left: 0 } });  // => false
hasPadding({ padding: { right: 10 }}); // => true

Это более лаконично, чем необязательная цепочка.

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

оригинал:Рисовое путешествие avlutin.com/JavaScript-…

общаться с

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

Категории