将参数“0”传递给函数时接收 NaN答案

【问题标题】：Receiving NaN when passing argument "0" to function将参数“0”传递给函数时接收 NaN
【发布时间】：2019-02-20 22:48:27
【问题描述】：

我在研究javascript，结果出乎意料，不知道哪里出错了，按照下面可测试的例子：

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', 0);
currentLife = store.get('currentLife');
console.log(currentLife); // -> NaN
console.log(currentLife === 90); // -> false

我希望在测试中获得 90 和 true store.commit('reduceValueOfLife', 0);...。

【问题讨论】：

提示：!payload 是 true 当payload === 0 （或false，或'' 或null 或undefined 或NaN - 我想这就是全部)
@JaromandaX 我不知道，以为只是“未定义”。 !payload 会发生哪些情况？
我在编辑中列出了它们：p 对于您正在寻找的逻辑，我建议 (payload === undefined) ? ....
@JaromandaX 我只需要检查它是否是undefined，谢谢光。我不知道，但我认为这是缺乏教育，人类对他获得的任何一点力量都会生气。
另一个选项是检查arguments.length < 2

标签： javascript function nan

【解决方案1】：

您的commit 函数具有：

commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation]    (this.state, payload);
},

也就是说，第一个表达式仅在payload 为truthy 时运行。但是你的

store.commit('reduceValueOfLife', 0);

使用 falsey payload 值调用，因此以下运行：

this.mutations[keyMutation](this.state)

keyMutation 为 'reduceValueOfLife'。所以你的reduceValueOfLife 函数

reduceValueOfLife(state, valueForReduce) {
        state.life -= valueForReduce;
        console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
}

使用valueForReduce 调用undefined，并从state.life 中减去undefined 原来的结果为NaN。

最好检查payload 是否未定义，而不仅仅是falsey，然后你的store.get 返回一个数字值，而不是NaN：

commit(keyMutation, payload) {
  if (payload === undefined) this.mutations[keyMutation](this.state)
  else this.mutations[keyMutation](this.state, payload);
},

您的commit 的另一个选项，而不是检查是否定义了参数，是简单地使用this.state 和payload 调用[keyMutation] 函数。如果commit 的payload 是undefined，那么传递的第二个参数将是undefined，这与您根本不传递第二个参数时看到的行为相同。

commit(keyMutation, payload) {
  this.mutations[keyMutation](this.state, payload);
},

如果你希望最终的currentLife 是 100，在第二部分减少到 90 之后，那么你必须调用

store.commit('reduceValueOfLife', -10);

在最后一部分将其增加到 100：

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
      console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    if (payload === undefined) this.mutations[keyMutation](this.state)
    else this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', -10);
currentLife = store.get('currentLife');
console.log(currentLife);
console.log(currentLife === 100);

【讨论】：

“-10”的那部分跑题了，我已经编辑了问题，只解决了问题的问题。

【解决方案2】：

您遇到的问题是因为0 是（“falsey”）（以及null、undefined、''、NaN，当然还有false）

这意味着this.mutations[keyMutation](this.state)将在传入0作为第二个参数时被执行

commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
},

虽然您可以简单地测试payload === undefined，但这意味着您永远不能将undefined 作为有效负载传递

相反，您可以使用arguments.length 来检查函数调用了多少参数，如下所示：

commit(keyMutation, payload) {
    (arguments.length < 2) ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
},

【讨论】：