如何使用 switch 语句 javascript 创建函数

问题描述 投票：0回答：5

我目前正在开始学习 JS，我需要用 switch 语句做以下练习。

function colorMix (color1, color2){
  if ((color1 === 'red' && color2 === 'blue') || (color1 === 'blue' && color2 === 'red')){
    return 'violet';
  } else if ((color1 === 'red' && color2 === 'yellow') || (color1 === 'yellow' && color2 === 'red')){
    return 'orange';
  } else if ((color1 === 'blue' && color2 === 'yellow') || (color1 === 'yellow' && color2 === 'blue')){
    return 'green';
  } else {
    return 'need to mix two diferent colours'
  }
}

 let myColor = colorMix('blue', 'blue');
  console.log(`The color created is: ${ myColor}`);

这就是我到目前为止所得到的，但它不起作用：

let color1 = '';
let color2 = '';

let firstColour = ((color1 === 'red' && color2 === 'blue') || (color1 === 'blue' && color2 === 'red'))
let secondColour = ((color1 === 'red' && color2 === 'yellow') || (color1 === 'yellow' && color2 === 'red'))
let thirdColour = ((color1 === 'blue' && color2 === 'yellow') || (color1 === 'yellow' && color2 === 'blue'))

function colorMix (color1, color2){
switch (color1, color2){
  case 'firstColour':
    return 'violet';
    break;
  case 'secondColour':
    return 'orange';
    break;
  case 'thirdColour':
    return 'green';
  default:
    return 'error';
  }
}

let myColour = colorMix('red', 'blue');
console.log(`Colour created is ${myColour}`)

我不知道如何制作 switch 语句来识别我介绍的颜色。有什么想法吗？谢谢！！！

javascript function switch-statement conditional-statements
5个回答
1
投票

您可以通过将颜色组合到一个键中并打开该键来实现：

function colorMix (color1, color2){
    const key = color1 < color2 ? color1 + " \t " + color2 : color2 + " \t " + color1;
    switch (key) {
        case "blue \t red":
            return "violet";
        case "red \t yellow");
            return "orange";
        case "blue \t yellow";
            return "green";
        default:
            return return "need to mix two diferent colours";
    }
}

假设颜色名称中没有空格/制表符/空格。

这是可行的，因为我们使用的是可以组合成单个键的字符串。如果我们不这样做，或者表达式更复杂，那么虽然用 switch 来做到这一点是 

可能
的，但没有充分的理由这样做，你基本上会写出与
if
/
else if
链（因为在 JavaScript 中，这就是 
switch
的全部 - 与其他具有类似语法的语言不同），并且结果对于其他阅读代码的人来说将是真的令人惊讶。

为了完整起见，以下是一般情况：

// DON'T DO THIS
switch (true) {
    case (color1 === 'red' && color2 === 'blue') || (color1 === 'blue' && color2 === 'red'):
        return 'violet';
    case (color1 === 'red' && color2 === 'yellow') || (color1 === 'yellow' && color2 === 'red'):
        return 'orange';
    // ...
}

这是可行的，因为 case 标签是 JavaScript 中的表达式，它们按顺序进行测试（

default
除外），并使用第一个匹配项。

但是，再次强调，不要这样做。 :-D

您也可以考虑查找表：

// Creates a key for the two colors, where the colors are always
// in lexicographical order (so we don't have to worry about the
// argument order)
const colorKey = (color1, color2) => color1 < color2 ? color1 + "\t" + color2 : color2 + "\t" + color1;

const colorMix = new Map([
    [colorKey("blue", "red"), "violet"],
    [colorKey("red", "yellow"), "orange"],
    [colorKey("blue", "yellow"), "green"],
]);

// ...

function colorMix (color1, color2){
    const color = colorMix.get(colorKey(color1, color2));
    return color ?? "need to mix two diferent colours";
}
0
投票

表达式 

(color1, color2)
的计算结果为 
color2
，因为逗号在这里是一个 运算符。所以这对于 
switch
声明没有用。

使其发挥作用的一种方法是将颜色字符串转换为颜色数字，这样主颜色（红色，黄色和蓝色）是2的幂。如果它们加在一起（或者更好OR 在一起），找到其他颜色编号。

具体方法如下：

const colorNames = ["none", "red", "yellow", "orange", "blue", "violet", "green", "black"];
const colorNums = Object.fromEntries(colorNames.map((name, i) => [name, i]));

const colorMix = (color1, color2) => colorNames[colorNums[color1] | colorNums[color2]];

console.log(colorMix("blue", "red")); // violet
// Order does not matter
console.log(colorMix("red", "blue")); // violet
// Mixing a color with itself does not change it
console.log(colorMix("orange", "orange")); // orange
// Can mix an already mixed color again
console.log(colorMix("violet", "yellow")); // black

说明

const colorNames = ["none", "red", "yellow", "orange", "blue", "violet", "green", "black"];

这里我们创建一个颜色名称数组。名称在此数组中出现的 index 是其唯一标识符。主要颜色位于 2 的幂的索引上：1、2 和 4。如果我们将索引写为二进制数，则上面的数组如下所示：

二进制索引 颜色名称
000 无
001 红色
010 黄色
011 橙色
100 蓝色
101 紫罗兰
110 绿色
111 黑色

该数组可用于给出与索引相对应的颜色名称。请注意“橙色”(011) 如何组合“红色”(001) 和“黄色”(010) 的二进制位，当任一混合颜色在二进制的相同位置具有“1”时，取“1”代表。

以下语句创建反向映射（从名称到索引）：

const colorNums = Object.fromEntries(colorNames.map((name, i) => [name, i]));


.map()
创建名称和索引对（上表，但交换了列）。 
Object.fromEntries
使用此信息创建一个普通对象：

{
    none: 0,
    red: 1,
    yellow: 2,
    orange: 3,
    blue: 4,
    violet: 5,
    green: 6,
    black: 7
}

有了这两个转换对象，我们现在可以制作一个漂亮的混色器功能：

const colorMix = (color1, color2) => colorNames[colorNums[color1] | colorNums[color2]];

使用 

colorNums
将两种颜色分别转换为其数字。

这两个数字使用二元或运算符 (

|
) 组合。这将给出我们想要获得的颜色的数量。

最后，使用 

colorNames
数组将该值转换回颜色名称。

脚本的其余部分说明了如何调用该函数：

  • 参数的顺序并不重要
  • 当两个输入颜色相同时，行为与您所做的不同：颜色只是原样返回，推理将颜色与其本身混合不会改变颜色。
  • 已经混合的颜色可以再次混合（这当然是现实的简化，其中混合颜色受到与另一种颜色混合的油漆的量的影响。相对量影响结果）。
0
投票

这里我使用按位添加颜色，所以无论顺序如何，它们总是会生成一个唯一的ID，使用开关我检查颜色ID，它是两种颜色的ID之和。

function getColorIndex(color1, color2) {
    const colors = {
        "red": 1,
        "blue": 2,
        "yellow": 4 // next will be the double (n * 2) e.g: "violet": 8
    }

    return color1 !== color2 ? colors[color1] | colors[color2] : -1;
}

function colorMix (color1, color2) {
    switch (getColorIndex(color1, color2)) {
        case 3: // red + blue (1 + 2 === 3)
            return "violet";
        case 5: // red + yellow (1 + 4 === 5)
            return "orange";
        case 6: // blue + yellow (2 + 4 === 6)
            return "green";
        case -1: // getColorIndex will return -1 if colors are equal
            return "need to mix two diferent colours";
        default:
            return `Unrecognized colors: ${color1} + ${color2}`;
    }
}

let myColor = colorMix('blue', 'blue');
console.log(`The color created is: ${ myColor}`);

myColor = colorMix('omg', 'idk');
console.log(`The color created is: ${ myColor}`);

myColor = colorMix('red', 'yellow');
console.log(`The color created is: ${ myColor}`);

0
投票

您可以获取数组中的所有颜色并对它们进行排序，然后使用标准化顺序进行检查，而不是使用 

switch
语句进行过多比较。

function colorMix(...colors) {
    colors.sort();
    if (color[0] === 'blue' && color[1] === 'red') return 'violet';
    if (color[0] === 'red' && color[1] === 'yellow') return 'orange';
    if (color[0] === 'blue' && color[1] === 'yellow') return 'green';
    return 'need to mix two diferent colours';
}

不同的方法 

Set

function colorMix(...colors) {
    const
        mixedColors = {
            violet: new Set(['blue', 'red']),
            orange: new Set(['red', 'yellow'])
            green: new Set(['blue', 'yellow'])
        };

    return Object.keys(mixedColors).find(c => colors.every(Set.prototype.has, mixedColors[c]))
        || 'need to mix two diferent colours';
}

最后一个没有状态，只有一个访问器

function colorMix(...colors) {
    const mixed = {
        blue: { red: 'violet', yellow: 'green' },
        red: { yellow: 'orange' }
    }
    colors.sort();
    return mixed[colors[0]]?.[colors[1]] ||'need to mix two diferent colours';
}
0
投票

let c1 =提示(“输入颜色1：”); 让c2 =提示（“输入颜色2：”）;

switch (c1.toLowerCase() + c2.toLowerCase()) { 案例“红蓝”： 案例“蓝红”： console.log("紫色"); 打破；

case "redyellow":
case "yellowred":
      console.log("Orange");
      break;
      
case "blueyellow":
case "yellowblue":
      console.log("green");
      break;
      
default:
    console.log("Unknown color combination");
    break;

}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.