Что делает эта деструктуризация массива в функции в ES6?

Question

Я прочитал учебник redux-actions , и меня смущает использование ими (как я считаю,) деструктуризации. Ниже приведен пример (обе функции increment & decrement возвращаются функцией createAction).

const { createAction, handleActions } = window.ReduxActions;

const reducer = handleActions(
  {
    [increment]: state => ({ ...state, counter: state.counter + 1 }),
    [decrement]: state => ({ ...state, counter: state.counter - 1 })
  },
  defaultState
);

Вот еще один пример его использования:

const { createActions, handleActions, combineActions } = window.ReduxActions;
​
const reducer = handleActions(
  {
    [combineActions(increment, decrement)]: (
      state,
      { payload: { amount } }
    ) => {
      return { ...state, counter: state.counter + amount };
    }
  },
  defaultState
);

Может кто-нибудь объяснить, что происходит в этих строках? Проще говоря, я просто вижу {[function]: () => ({})} и не понимаю, что это делает.

Answer 1

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

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

function x() {}
const obj = { [x]: 42 };
console.log( obj[x] ); // 42
console.log( obj[x.toString()] ); // 42, key is the same actually
console.log( Object.keys(obj) );  // ["function x() {}"]

Преимущество такого подхода состоит в том, что вам не нужно создавать дополнительные ключи - если у вас есть ссылка на функцию, она у вас уже есть. На самом деле, вам даже не нужно иметь ссылку - достаточно иметь функцию с тем же источником:

const one = () => '';
const two = () => '';
console.log(one === two); // false apparently 
const fatArrObj = { [one]: 42 } 
fatArrObj[two]; // 42, take that Oxford scholars!!

Недостатком является то, что функция приводится к строке каждый раз, когда она используется в качестве ключа - (предположительно незначительное) снижение производительности. <ч />

Чтобы добавить веселья, это действительный литерал объекта:

{ 
   [null]: null, // access either with [null] or ['null']
   [undefined]: undefined, 
   [{ toString: () => 42 }]: 42 // access with, you guess it, 42 (or '42')
}

... и это может войти в книгу странных вопросов для интервью:

const increment = (() => { let x = 0; return () => ++x })();
const movingTarget = { toString: increment };
const weirdObjectLiteral = { [movingTarget]: 42 };
console.log( weirdObjectLiteral[movingTarget] ); // undefined