Question

下面有一个对象，键值映射。

const COLORS_BY_TYPE = {
  RED: 'red',
  BLUE: 'blue',
  GREEN: 'green',
};

const getCorrectColor = ({ colorType = 'GREEN' }) => COLORS_BY_TYPE[colorType.toUpperCase()];

我有类似上面的内容，当我没有通过与之相关的正确道具时，当我致电getCorrectColor时，它可以正常工作。当我传递一个空字符串时，它将无法正常运行。我将如何修改上面的内容，以便在prop是空字符串的情况下使用默认颜色。

任何人都可以提供我要寻找的功能类型的简单示例吗？

Answer 1

我认为您正在寻找

function getCorrectColor({colorType = ''}) {
    const key = colorType.toUpperCase();
    return COLORS_BY_TYPE[key in COLORS_BY_TYPE ? key : 'GREEN'];
}

Answer 2

仅当默认参数所代表的参数值为undefined时才应用默认参数。因此，当您传递空字符串时，默认值不会应用于该参数。但是，由于可以在JavaScript中将空字符串强制为false，因此可以在函数主体中使用OR（||）来获取所需的内容。

此代码应该可以解决您的问题：

const COLORS_BY_TYPE = {
RED: '#ffffff'
BLUE: '#ffffff'
GREEN: '#ffffff'
}

const getCorrectColor = ({colorType = 'GREEN'}) =>
COLORS_BY_TYPE[(colorType || "GREEN").toUpperCase()];

在这里，我们将colorType的读数括在一对括号中，并为它可以强制转换为false的值提供第二个值-这个新值是字符串{{ 1}}。括号可确保首先执行此操作，并且给出的值就是调用其"GREEN"方法的值。

Answer 3

另一种可能性是Map。显然，这需要您更改设置（而不是使用对象文字），但是Map允许您使用空字符串作为键。

const COLORS_BY_TYPE = new Map()
COLORS_BY_TYPE.set('RED', '#f00')
COLORS_BY_TYPE.set('BLUE', '#00f')
COLORS_BY_TYPE.set('GREEN', '#0f0')
COLORS_BY_TYPE.set('', COLORS_BY_TYPE.get('GREEN'))

const getCorrectColor = ({
  colorType
}) => COLORS_BY_TYPE.get(colorType.toUpperCase())

console.log(getCorrectColor({
  colorType: 'GREEN'
}))
console.log(getCorrectColor({
  colorType: ''
}))

Answer 4

我不知道您为什么使用解构任务，但这对我有用：

const COLORS_BY_TYPE = {
RED: '#ff0000',
BLUE: '#0000ff',
GREEN: '#00ff00'
}

const getCorrectColor = (colorType = 'GREEN') =>
COLORS_BY_TYPE[colorType.toUpperCase() in COLORS_BY_TYPE ? colorType.toUpperCase() : 'GREEN'];

console.log(getCorrectColor())
console.log(getCorrectColor(''))
console.log(getCorrectColor('red'))

设置ES6默认参数以处理空字符串

4 个答案: