如何在 Javascript 中为无效输入设置消息？

Question

我有一个对象数组。

let mainMenu = [
    {
        brand: "Zara",
        type: "Shirt",
        gender: ["Men", "Women", "Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "300",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Nike",
        type: "Shirt",
        gender: ["Men", "Women", "Boys"],
        size: "Medium",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Adidas",
        type: "Shirt",
        gender: ["Men", "Women"],
        size: "Large",
        image: "",
        description: "",
        price: "700",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "tShirt",
        gender: ["Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Nike",
        type: "tShirt",
        gender: ["Men", "Women", "Girls"],
        size: "Medium",
        image: "",
        description: "",
        price: "400",
        colour: "Red",
        stock: "50",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Zara",
        type: "tShirt",
        gender: ["Women", "Boys", "Girls"],
        size: "Large",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "USPA",
        type: "Jeans",
        gender: ["Men"],
        size: "Small",
        image: "",
        description: "",
        price: "2000",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Adidas",
        type: "Jeans",
        gender: ["Women"],
        size: "Medium",
        image: "",
        description: "",
        price: "2500",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "Jeans",
        gender: ["Boys"],
        size: "Large",
        image: "",
        description: "",
        price: "3000",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    }
];

我想显示匹配性别名称的所有项目。我的输入是let searchForGender = "Men"; 下面是功能和工作正常。

function getClothesAvaGen() {
    mainMenu.forEach(obj => {
        for (let i = 0; i < obj["gender"].length; i++) {
            if (obj["gender"][i] === searchForGender && searchForType === "" && searchForSize === "" && searchForBrand === ""
                && searchForStock === "" && searchForPrice === "" && searchForRating === "") {
                console.log(obj)
                document.write("gender : " + obj["gender"][i] + "<br>" + "type : " + obj["type"] + "<br>" + "size : " + obj["size"] + "<br>" + "brand : " + obj["brand"] + "<br>" +
                    "price : " + obj["price"] + "<br>" + "stock : " + obj["stock"] + "<br>" + "rating : " + obj["rating"] + "<br>" + "<br>")
            }
        }
    });
}
getClothesAvaGen();

输出：

gender : Men
type : Shirt
size : Small
brand : Zara
price : 300
stock : 10
rating : 4

gender : Men
type : Shirt
size : Medium
brand : Nike
price : 600
stock : 20
rating : 5

gender : Men
type : Shirt
size : Large
brand : Adidas
price : 700
stock : 30
rating : 5

gender : Men
type : tShirt
size : Medium
brand : Nike
price : 400
stock : 50
rating : 4

gender : Men
type : Jeans
size : Small
brand : USPA
price : 2000
stock : 30
rating : 4

但我想为“Men1”、“MenAbc”等输入或任何其他无效输入设置'No Match Found'。我如何以及在哪里可以在上面编写的代码中设置它。 'No Match Found' 应该只出现一次错误输入。

Answer 1

就在for循环之后，像这样

function getClothesAvaGen() {
    mainMenu.forEach(obj => {

        let isNotFound = true

        for (let i = 0; i < obj["gender"].length; i++) {
            if (obj["gender"][i] === searchForGender && searchForType === "" && searchForSize === "" && searchForBrand === ""
                && searchForStock === "" && searchForPrice === "" && searchForRating === "") {
                isFound = false
                console.log(obj)
                document.write("gender : " + obj["gender"][i] + "<br>" + "type : " + obj["type"] + "<br>" + "size : " + obj["size"] + "<br>" + "brand : " + obj["brand"] + "<br>" +
                    "price : " + obj["price"] + "<br>" + "stock : " + obj["stock"] + "<br>" + "rating : " + obj["rating"] + "<br>" + "<br>")
            }
        }

        if(isNotFound) {
           // do something
        }
    });
}
getClothesAvaGen();

Answer 2

您可以使用array.filter 和array.includes 函数来简化操作。

function getClothesAvaGen(){
  // filter items those their gender, includes our searchForGender term.
  let availableItems = mainMenu.filter(item => item['gender'].includes(searchForGender));

  // if not found such items then print no match and get out of function.
  if (availableItems.length == 0){
    console.log('No Match');
    return;
  }

  //If found , for each of them, print some data
  availableItems.forEach(obj =>{
    console.log("gender : " + searchForGender + "\n" + "Brand : " + obj['brand'] + "\n" + "Other Data...")});
}

getClothesAvaGen();

let mainMenu = [
    {
        brand: "Zara",
        type: "Shirt",
        gender: ["Men", "Women", "Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "300",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Nike",
        type: "Shirt",
        gender: ["Men", "Women", "Boys"],
        size: "Medium",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Adidas",
        type: "Shirt",
        gender: ["Men", "Women"],
        size: "Large",
        image: "",
        description: "",
        price: "700",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "tShirt",
        gender: ["Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Nike",
        type: "tShirt",
        gender: ["Men", "Women", "Girls"],
        size: "Medium",
        image: "",
        description: "",
        price: "400",
        colour: "Red",
        stock: "50",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Zara",
        type: "tShirt",
        gender: ["Women", "Boys", "Girls"],
        size: "Large",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "USPA",
        type: "Jeans",
        gender: ["Men"],
        size: "Small",
        image: "",
        description: "",
        price: "2000",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Adidas",
        type: "Jeans",
        gender: ["Women"],
        size: "Medium",
        image: "",
        description: "",
        price: "2500",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "Jeans",
        gender: ["Boys"],
        size: "Large",
        image: "",
        description: "",
        price: "3000",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    }
];
let searchForGender = "Men";
function getClothesAvaGen(){
  let availableItems = mainMenu.filter(item => item['gender'].includes(searchForGender));
  if (availableItems.length == 0){
    console.log('No Match');
    return;
  }
  availableItems.forEach(obj =>{
    console.log("gender : " + searchForGender + "\n" + "Brand : " + obj['brand'] + "\n" + "Other Data...")});
}

getClothesAvaGen();