在 Javascript 中通過鍵本身編輯 object 值

Question

伙計們。

我正在制作一些商店系統。 我必須像這樣訪問我的 object 值。

const store = {
    modules: {
    A: {
        numbers: [1, 2, 3, 4]
    },
    B: {
        chars: ['a', 'b']
    }
  }
}

const doubled = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: [...store.modules.A.numbers, ...store.modules.A.numbers]
      }
    }
  }
}

const few = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: store.modules.A.numbers.slice(0, 2)
      }
    }
  }
}

但是，這段代碼太長了，沒有用處。 我不喜歡這種方式。

我想做doubled的， few喜歡這個短代碼。 （錯誤代碼）

const doubled = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: [...**this.**numbers, ...**this.**numbers]
      }
    }
  }
}

const few = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: **this.**numbers.slice(0, 2)
      }
    }
  }
}

有沒有辦法通過鍵本身編輯 object 值？

Answer 1

看起來你正在嘗試構建一個 Redux Vuex state 存儲，但是您沒有正確表示狀態轉換函數 - 它們應該是函數，而不是對象。

通用邏輯可以移動到其他純函數中，並通過combineReducers使用。 但就我的回答而言，我將使用更加手寫的方法：

你只需要這樣做：

第 1 步：注意常用功能

const store = {
    // same as above
};

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function double( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: doubleNumbers( store.modules.A.numbers )
            }
        }
    }
}

function few( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: take2Numbers( store.modules.A.numbers )
            }
        }
    }
}

第二步：Function組成

這可以通過通過cloneStateButUpdateNumbers為numbers組成純函數來在語法上更短：

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function cloneStateButUpdateNumbers( store, numbersFunc ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: numbersFunc( store.modules.A.numbers )
            }
        }
    }
}

function double( store ) {
    return cloneStateButUpdateNumbers( store, doubleNumbers );
}

function few( store ) {
    return cloneStateButUpdateNumbers( store, take2Numbers );
}

第 3 步：語法簡潔：

...並通過使用 ECMAScript 6 箭頭函數語法和const ：

const doubleNumbers = ( arr ) => [ ...arr, ...arr ];
const take2Numbers  = ( arr ) => arr.slice( 0, 2 );

// See https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object 
const cloneStateButUpdateNumbers = ( store, numbersFunc ) => ( {
    ...store,
    modules: {
        A: {
            numbers: numbersFunc( store.modules.A.numbers )
        }
    }
} );

const double = ( store ) => cloneStateButUpdateNumbers( store, doubleNumbers );
const few    = ( store ) => cloneStateButUpdateNumbers( store, take2Numbers );

達達！