javascript - 在Javascript中通过键本身编辑对象值

Question

伙计们。

我正在制作一些商店系统。我必须像这样访问我的对象值。

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)
      }
    }
  }
}

有没有办法通过键本身来编辑对象值？

标签： javascriptobject

Answer 1

看起来你正在尝试构建一个还原Vuex 状态存储，但是你没有正确表示你的状态转换函数——它们应该是函数，而不是对象。

通用逻辑可以移动到其他纯函数中并通过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 )
            }
        }
    }
}

第二步：功能组合

这可以通过为numbersvia组合纯函数来在语法上更短cloneStateButUpdateNumbers：

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 );

达达！