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

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 的值时提供第二个值——这个新值是字符串"GREEN"。括号确保它首先执行，并且它给出的任何值都是调用其 toUpperCase() 方法的值。

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 默认参数以处理空字符串

Setting ES6 default arguments to handle empty strings

javascript

reactjs

ecmascript-6

destructuring

default-parameters