当我的下一个过滤器基本上是一个条件在 JS 中匹配时，如何清除或覆盖浏览器上的 document.write()

问题描述

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","Boys"],size: "Medium",price: "600",stock: "20",rating: "5"
    },{
        brand: "Adidas","Women"],size: "Large",price: "700",stock: "30",{
        brand: "Puma",type: "tShirt",gender: ["Boys",stock: "40",price: "400",stock: "50",{
        brand: "Zara",gender: ["Women",{
        brand: "USPA",type: "Jeans",gender: ["Men"],price: "2000",gender: ["Women"],price: "2500",gender: ["Boys"],price: "3000",rating: "4"
    }
];

let filteredArr = [];
filteredArr = mainMenu;

我想搜索一件衬衫，如果存在，则想使用 document.write() 显示。我的输入是：let searchForType = "Shirt";。

我的代码是：

function fetchItemsByType() {
    let isItemAva = filteredArr.filter(obj => obj["type"] === searchForType);
    isItemAva.forEach(obj => {
        for (let i = 0; i < obj["type"].length; i++) {
            if (obj["type"] === searchForType) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isItemAva;
}
let getItemsByType = fetchItemsByType();

if (searchForType === searchForType) {
    console.log(getItemsByType);
}

输出：

Shirt of Small size is Available for Men,Women,Boys,Girls

Shirt of Medium size is Available for Men,Boys

Shirt of Large size is Available for Men,Women

下次，我想检查衬衫尺寸的可用性。如果尺寸可用，则再次希望显示（通过 document.write()）仅衬衫尺寸的结果并非所有衬衫的结果。我试过，但同时得到两种情况的结果。但我想在我的最终输出中只显示选定尺寸的衬衫。下面是我输入衬衫尺寸时的代码，即'Small'。

function fetchItemsBySize() {
    let isSizeAva = getItemsByType.filter(obj => obj["size"] === searchForSize);
    isSizeAva.forEach(obj => {
        for (let i = 0; i < obj["size"].length; i++) {
            if (obj["size"] === searchForSize) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isSizeAva;
}
let getItemsBySize = fetchItemsBySize();

if (searchForSize === searchForSize) {
    console.log(getItemsBySize);
}

输出为：

Shirt of Small size is Available for Men,Women

Shirt of Small size is Available for Men,Girls

但我只想

Shirt of Small size is Available for Men,Girls

有没有可能？

解决方法

我建议采用单一功能进行过滤并移交类型和值进行搜索。

此方法检查属性，如果值是数组，则检查项目，否则与移交值进行比较。

要显示过滤后的数据，您可以取一个元素并替换结果

const
    filter = (array,key,value) => array.filter(object => Array.isArray(object[key])
        ? object[key].includes(value)
        : object[key] === value
    ),data = [{ 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","Boys"],size: "Medium",price: "600",stock: "20",rating: "5" },{ brand: "Adidas","Women"],size: "Large",price: "700",stock: "30",{ brand: "Puma",type: "tShirt",gender: ["Boys",stock: "40",price: "400",stock: "50",{ brand: "Zara",gender: ["Women",{ brand: "USPA",type: "Jeans",gender: ["Men"],price: "2000",gender: ["Women"],price: "2500",gender: ["Boys"],price: "3000",rating: "4" }];

document.getElementById('result').innerHTML = JSON.stringify(filter(data,'size','Small'),null,4);

setTimeout(() => document.getElementById('result').innerHTML = JSON.stringify(filter(data,'type','Shirt'),4),3000);

<pre id="result"></pre>

见Document API。
如果要清除文档，可以使用document.open()。
或者，您可以在预计下一个 document.close() 会自动清除时尝试 document.write()。

不完全是所问问题的答案，只是一种不同的方法：

如果您停止使用 document.write 而是将 <div id="mydiv"> 添加到您的 html，您可以使用 document.getElementById("mydiv").innerHTML = "whatever"; 更改 div 文本，以便您可以在填充之前将其清空。>

示例：

let mainMenu = [
    {
        brand: "Zara",rating: "4"
    },{
        brand: "Nike",rating: "5"
    },{
        brand: "Adidas",{
        brand: "Puma",{
        brand: "Zara",{
        brand: "USPA",rating: "4"
    }
];

let filteredArr = [];
filteredArr = mainMenu;

let searchForSize = "Small";

function fetchItemsBySize() {
    document.getElementById("mydiv").innerHTML = "";

    let isSizeAva = mainMenu.filter(obj => obj["size"] === searchForSize);
    isSizeAva.forEach(obj => {
        for (let i = 0; i < obj["size"].length; i++) {
            if (obj["size"] === searchForSize) {
            }
        }
         document.getElementById("mydiv").innerHTML = document.getElementById("mydiv").innerHTML + obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>";
        //document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isSizeAva;
}
let getItemsBySize = fetchItemsBySize();

if (searchForSize === searchForSize) {
    console.log(getItemsBySize);
}

<div id="mydiv">content</div>

所以如果我理解正确的话，您不想简单地将第二个输出附加到前一个输出，而是要清除前一个输出，然后写入新的输出。我认为您有两种不同的方法来解决这个问题。

您可以擦除整个输出，然后再次写入，但这次您可以省略不需要的行。使用 document.open() 创建一个新的空文档。
您可以使用标签仅更改该标签的内容，例如，您可以将 T 恤尺寸的内容显示在这个新标签内，这样您就可以轻松替换标签的内容，而无需改变你的其余输出。这可以通过提供一个 div 和 id 来完成。

<div id="myDiv">
</div>

在你的 js 代码中...

let myDiv = document.getElementById("myDiv")
myDiv.innerHTML = "This is my output"

希望这会有所帮助...如果您有任何问题，请告诉我。

arrayobject function function function if-statement javascript