javascript - 通过数组映射的 Switch 语句给出无法访问的代码警告

Question

这可能是一个我所缺少的非常简单的解决方案，但希望有人能提供帮助。

我正在循环遍历一个数组并尝试计算出它的长度，并根据长度返回不同的值。然后我映射它并希望根据金额返回值。有人可以告诉我我做错了什么吗？

谢谢!

编辑谢谢大家的意见。我打算对 switch 语句结果执行的操作是根据 getGridPercentages 数组值确定网格大小。因此，如果它是“4”，它将返回“25% 25% 25% 25%”。

然后，我使用 CSS 网格的 grid-template-columns 在样式组件中使用该值:

const ContainerWrapper = styled.div `
display: grid;
grid-template-columns: ${op}; //Value of grid here
grid-gap: 10px;
`;

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

let op = getGridPercentages.map(function(item) {
    const getAmount = item.Text;
    switch(getAmount) {
        case '1':
            return '100%'
        case '2':
            return '50% 50%'
        case '3':
            return '33% 33% 33%'
        case '4':
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }
});

Answer 1

您应该进行这些更改

1. 当您尝试查找单个字符的长度时，item.Text.length 将始终返回 1。
2. return 语句后不需要break语句。(这就是无法访问的代码的样子)

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

let op = getGridPercentages.map(function(item) {
    const getAmount = item.Text;
    
    switch(getAmount) {
        case '1':
            return '100%'
        case '2':
            return '50% 50%'
        case '3':
            return '33% 33% 33%'
        case '4':
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }
});

console.log(op);

更新:正如您在评论中询问的那样，您想要基于元素的数量，这与问题所说的完全相反。

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

function getGridSize(arr){
  switch(arr.length) {
        case 1:
            return '100%'
        case 2:
            return '50% 50%'
        case 3:
            return '33% 33% 33%'
        case 4:
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }

}

console.log(getGridSize(getGridPercentages))