Возникли проблемы с пониманием этого заявления о деструктурировании JavaScript

Question

Я работаю с примером проекта «Реакция / Избыточность», и, поскольку я в некотором роде новичок в Javascript, мое знакомство с некоторыми сокращенными версиями ES6 javascript ограничено. У меня возникла следующая проблема:

function mapStateToProps(state) {
  const { selectedSubreddit, postsBySubreddit } = state;

  // This part here is confusing to me
  const { isFetching, lastUpdated, items: posts } = postsBySubreddit[
    selectedSubreddit
  ] || {
    isFetching: true,
    items: []
  };

  return {
    selectedSubreddit,
    posts,
    isFetching,
    lastUpdated
  };
}

Я в основном понимаю назначение этой функции, но я не уверен, что происходит в той части, в которой у меня есть комментарий.

Пока я понял, что postsBySubreddit - это массив, из которого мы получаем элемент на основе selectedSubreddit. Из этого элемента мы «извлекаем» isFetching, lastUpdated и items (одновременно совмещая его с posts). То, что меня отталкивает, - это оператор || и следующее за ним выражение в фигурных скобках.

Это условие ИЛИ? Если это так, мы говорим, что если postsBySubreddit [selectedSubreddit] === undefined, мы даем isFetching значение true и элементы пустой массив?

Answer 1

Ваше понимание почти правильно. Пока оператор ||, вы правы. Но для оператора ||,

если postsBySubreddit [selectedSubreddit] === undefined , мы даем isFetching значение true, а элементы - пустой массив

Не обязательно undefined, если postsBySubreddit[selectedSubreddit] ложно, например 0, '', false, null, undefined, NaN. Обратите внимание, что [] и {} являются правдой. (чтобы легко проверить, что вы забыли, вы можете набрать !!NaN в консоли разработчика или интерпретаторе узла).

let a = b || c эквивалентно:

let a;
if (b)
  a = b;
else
  a = c;

Аналогично, let a = b || {x: 0, y: 1} эквивалентно

let a;
if (b)
  a = b;
else
  a = {x: 0, y: 1};

Answer 2

Оператор || означает запуск следующего оператора, если предыдущий является ложным.

Просто посмотрите на это:

if (thing == "ok" || otherthing == "notok") {

Я думаю, что вы знаете, что это значит.Введите блок, если любой оператор true.Он «запускается», сначала проверяя левый оператор (thing == "ok") и, если false, затем выполняет следующий оператор (otherthing == "notok").

То же самое можно сделать, чтобы назначить переменным:

var result = thing == "ok" || otherthing == "notok";

Эта вещь приведет к результату true, если левый или правый оператор вернет true, следуя той же логике, что я объяснил выше.

Теперь, если мы пойдемдалее с этой логикой мы можем сделать это:

var result = FIRST_STATEMENT || SECOND_STATEMENT;

Это запустит FIRST_STATEMENT, получит значение и проверит, не является ли false.Если результат не ложный, запустится SECOND_STATEMENT и вернет значение.если FIRST_STATEMENT не равно false, вместо этого будет возвращено это значение (поскольку не будет выполняться SECOND_STATEMENT).

Короче , оператор || будет оценивать операторыслева направо и верните первое, отличное от false.

PD: обратите внимание, что null, undefined, "", NaN и 0 совпадают сfalse оператор.

PD2: Для пояснения, ни одно из этих значений не будет тройным (===) друг к другу.