為什么這個(gè)數(shù)組.forEach 這個(gè)方法is underfind,如下圖和代碼

問題

我想得到數(shù)組里每一條數(shù)據(jù)的age>10 && age<30的數(shù)據(jù)

報(bào)錯(cuò)

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>

<script>
    var data = [{
        id: 1,
        name: "test1",
        age: 8,
        children: [{
            id: 11,
            name: "test1-1",
            age: 18,
            children: [{
                id: 111,
                name: "test1-1-1",
                age: 28,
                children: [{
                    id: 1111,
                    name: "test1-1-1-1",
                    age: 38
                }]
            }]
        }]
    }, {
        id: 2,
        name: "test2",
        age: 18,
        children: [{
            id: 21,
            name: "test2-1",
            age: 28,
            children: [{
                id: 211,
                name: "test2-1-1",
                age: 38,
                children: [{
                    id: 2111,
                    name: "test2-1-1-1",
                    age: 48
                }]
            }]
        }]
    }, {
        id: 3,
        name: "test3",
        age: 28,
        children: [{
            id: 31,
            name: "test3-1",
            age: 68
        }]
    }, {
        id: 4,
        name: "test4",
        age: 38,
        children: [{
            id: 41,
            name: "test4-1",
            age: 88
        }]
    }, {
        id: 5,
        name: "test5",
        age: 48,
        children: [{
            id: 51,
            name: "test5-1",
            age: 48
        }]
    }, {
        id: 6,
        name: "test6",
        age: 58,
        children: [{
            id: 61,
            name: "test6-1",
            age: 28
        }]
    }]

    function arrayFn(data) {
        data.forEach(item => {
            if (item.age < 30 && item.age>10 ) {
                console.log(item)
            }
            item.children.forEach(bb => {
                arrayFn(bb)
            })

        })
    }
    arrayFn(data)
</script>

重新上傳

vue中報(bào)錯(cuò)了 Uncaught RangeError：超出最大調(diào)用堆棧大小

<script>
export default {
    data() {
        return {
            number1: 0,
            number2: 0,
            data1: [],
            data: [
                {
                    id: 1,
                    name: "test1",
                    age: 8,
                    children: [
                        {
                            id: 11,
                            name: "test1-1",
                            age: 18,
                            children: [
                                {
                                    id: 111,
                                    name: "test1-1-1",
                                    age: 28,
                                    children: [
                                        {
                                            id: 1111,
                                            name: "test1-1-1-1",
                                            age: 38
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    name: "test2",
                    age: 18,
                    children: [
                        {
                            id: 21,
                            name: "test2-1",
                            age: 28,
                            children: [
                                {
                                    id: 211,
                                    name: "test2-1-1",
                                    age: 38,
                                    children: [
                                        {
                                            id: 2111,
                                            name: "test2-1-1-1",
                                            age: 48
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 3,
                    name: "test3",
                    age: 28,
                    children: [{ id: 31, name: "test3-1", age: 68 }]
                },
                {
                    id: 4,
                    name: "test4",
                    age: 38,
                    children: [{ id: 41, name: "test4-1", age: 88 }]
                },
                {
                    id: 5,
                    name: "test5",
                    age: 48,
                    children: [{ id: 51, name: "test5-1", age: 48 }]
                },
                {
                    id: 6,
                    name: "test6",
                    age: 58,
                    children: [{ id: 61, name: "test6-1", age: 28 }]
                }
            ]
        };
    },
    methods: {
        btn() {
            if (
                this.number1 >= this.number2 ||
                this.number1 < 0 ||
                this.number1 > 100 ||
                this.number2 < 0 ||
                this.number2 > 100
            ) {
                alert("輸入錯(cuò)誤");
                return false;
            } else {
                this.filterFn()
                console.log(this.data1);
            }
        },
        filterFn(){
            var that = this;
            this.data.forEach(item => {
                if(item.children){
                    that.filterFn(item.children)
                }
                if(item.age < this.number2 && item.age >this.number1){
                    delete item.children;
                    this.data1.push(item)
                }
            })
        }
  
    }
};
</script>

回答

編輯回答

忠妾

arrayFn方法里面的bb不是數(shù)組，不能遞歸了

    function arrayFn(data) {
        data.forEach(item => {
            if (item.age < 30 && item.age>10 ) {
                console.log(item)
            }
            item.children.forEach(bb => {
                arrayFn(bb) // 這個(gè)bb不是數(shù)組
            })

        })
    }

你要判斷是否有children, 然后遞歸

    function arrayFn(data) {
        data.forEach(item => {
            if (item.age < 30 && item.age>10 ) {
                console.log(item)
            }
            if(item.children) {
                arrayFn(item.children)
            }
        })
    }

結(jié)果

去掉children

    function arrayFn(data) {
        data.forEach(item => {
            if(item.children) {
                arrayFn(item.children)
            }
            if (item.age < 30 && item.age>10 ) {
                delete item.children
                console.log(item)
            }
            
        })
    }

結(jié)果

2017年8月29日 08:11