Question

我想遍历对象以检查是否有至少一个订单颜色或subProducts订单颜色是黑色还是红色。

如果至少有一个订单颜色或子产品订单颜色为黑色或红色，则应隐藏“隐藏我”按钮。

下面是代码

function Parent() {
    const product = {
        items: [
            {
                id: '1',
                orders: [
                    {
                        id: '1',
                        color: 'red',
                    }, 
                    {
                        id: '2',
                        color: 'green',
                    }
                ],

                subProducts: [
                    {
                        id: '1',
                        orders: [
                            {
                                id: '4',
                                color: 'green',
                            }
                        ],
                    }
                ]
            }, 
            {
                id: '2',
                orders: [
                    {
                        id: '3',
                        color: 'black',
                     },
                     {
                         id: '4',
                         color: 'blue',
                     }
                ],
                subProducts: [
                    {
                        id: '2',
                        orders: [
                            {
                                id: '5',
                                color: 'green',
                            }, 
                            {
                                id: '6',
                                color: 'black',
                            }
                        ],
                    }
                ]
            }
        ]
    }

    return (
        < Menu > Hide me <  / Menu > 
    );
}

我尝试了什么？

function Parent() {
    const checkArray = (array: any[]) => {
        for (const item of array) {
            if (item.color === 'black' || item.color === 'red') {
                return true;
            }
        }
        return false;
    };
    const output = () => {
    let hideBool = false;
        if (product.items) {
            for (const item of product.items) {
                if (hideBool) {
                    break;
                }
                if (item.orders) {
                    hideBool = checkArray(item.orders);
                }
                if (!hideBool) {
                    if (item.subProducts) {
                        for (const subProduct of item.subProducts) {
                            if (subProduct.orders) {
                                hideBool = checkArray(subProduct.orders);
                            }
                            if (hideBool) {
                                break;
                            }
                        }
                    }
                }
           }
       }
       return hideBool;
    };

    const isColor = output();
    return (
        {!isColor && 
            <Menu> Hide me </Menu>
        }
    );
}

以上代码段有效。但是代码看起来很笨拙，带有很多if条件。如何使用打字稿进一步重构此代码片段并做出反应。

有人可以帮我这个忙吗？谢谢。

Answer 1

您可以使用一些而不是for循环。它需要较少的代码行，但是是否更具可读性则需要辩论。

var myDataModel = function () {
    var self = this;
    self.states = {};
    self.states.createState = ko.observable(true);
    self.states.lookupState = ko.observable(false);
    self.states.currentState = ko.observable(self.states.createState);
    self.states.changeState = function (state) {
    var currentState = self.states.currentState();
        currentState(false);
        self.states.currentState(state);
        state(true);
    }
};
return myDataModel;

如何使用打字稿重构代码以遍历对象并做出反应？

1 个答案: