我目前正在開始學習 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 陳述句識別我介紹的顏色。有什么想法嗎？謝謝！！！

uj5u.com熱心網友回復：

您可以通過將顏色組合成一個鍵并打開該鍵來做到這一點：

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";
    }
}

假設顏色名稱中沒有空格/制表符/空格。

這很有效，因為我們使用的字串可以組合成一個鍵。如果我們不這樣做，或者運算式更復雜，那么雖然可以使用a 來執行此操作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";
}

uj5u.com熱心網友回復：

運算式的(color1, color2)計算結果為，color2因為逗號在這里是一個運算子。所以這對switch宣告沒有用。

使其作業的一種方法是將顏色字串轉換為顏色數字，以這樣一種方式，即主要顏色（紅色、黃色和藍色）是 2 的冪。如果將它們加在一起（或更好的 OR'd 在一起） ，找到其他顏色編號。

這是如何做到的：

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"];

在這里，我們創建了一個顏色名稱陣列。此陣列中出現名稱的索引是其唯一識別符號。主要顏色位于 2 的冪的索引上：1、2 和 4。如果我們將索引寫為二進制數，則上述陣列如下所示：

該陣列可用于給出與索引對應的顏色名稱。請注意“橙色”（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。

這兩個數字使用二元 OR 運算子 ( |)組合在一起。這將給出我們想要獲得的顏色的數量。

colorNames最后，使用陣列將該值轉換回顏色名稱。

腳本的其余部分說明了如何呼叫該函式：

• 引數的順序無關緊要
• 當兩種輸入顏色相同時，行為與您所做的不同：顏色只是原樣回傳，原因是混合顏色與自身不會改變顏色。
• 已經混合的顏色可以再次混合（這當然是對現實的簡化，其中混合顏色受與另一種顏色混合的油漆量的影響。相對量會影響結果）。

uj5u.com熱心網友回復：

在這里，我使用按位添加顏色，所以無論順序如何，它們總是會生成一個唯一的 ID，使用 switch 我檢查顏色 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}`);

uj5u.com熱心網友回復：

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';
}

標籤：

上一篇：為什么這個javascript函式總是失敗

下一篇：執行另一個函式時如何呼叫函式