Javascript

Question

我希望有人能给我指出正确的方向。

我有一个 JavaScript 对象，如下所示...

var category = [{
    isExpanded: false,
    name: "Electricals",
    subcategories: [{
        isExpanded: false,
        name: "Audio",
        subcategories: null
    }, {
        isExpanded: false,
        name: "Photography",
        subcategories: null
    }]
}, {
    isExpanded: false,
    name: "Telecoms",
    subcategories: [{
        isExpanded: false,
        name: "Mobile",
        subcategories: null
    }, {
        isExpanded: false,
        name: "Sim-cards",
        subcategories: null
    }]
}, {
    isExpanded: false,
    name: "Entertainment",
    subcategories: [{
        isExpanded: false,
        name: "Gaming",
        subcategories: [{
            isExpanded: false,
            name: "Games",
            subcategories: null
        }]
    }, {
        isExpanded: false,
        name: "Sports",
        subcategories: null
    }]
}];

我的目标是遍历每个 category/subcategory 并根据我的逻辑设置 'isExpandable' 的值。有人可以建议我如何遍历对象的每个子类别，记住一个子类别并且还有一个子类别等等吗？

这是我目前的尝试...

function blah() {
  for (var i = 0; i < category.length; i++) {
    if (category[i].subcategories) {
      console.log(category[i]);
      traverseCategoryTree(category[i]);
    }
  }
}

function traverseCategoryTree(category) {
  //iterate each subcategory and update is Expanded. 
}

blah();

Answer 1

function traverseCategoryTree(categories) {
  for (var i = 0, len = categories.length; i < len; i++) {
    console.log(categories[i]);
    if (categories[i].subcategories) {
      traverseCategoryTree(categories[i].subcategories);
    }
  }
}    

traverseCategoryTree(category);

Answer 2

不要重新发明轮子。我们现在使用 object-scan 进行大部分数据处理。一旦你全神贯注，它就会很强大。以下是它如何适用于您的示例：

// const objectScan = require('object-scan');

const modify = (data) => objectScan(['**[*]'], {
  rtn: 'count',
  filterFn: ({ value }) => {
    value.isExpandable = (
      Array.isArray(value.subcategories)
      && value.subcategories.length !== 0
    );
  }
})(data);

const category = [{ isExpanded: false, name: 'Electricals', subcategories: [{ isExpanded: false, name: 'Audio', subcategories: null }, { isExpanded: false, name: 'Photography', subcategories: null }] }, { isExpanded: false, name: 'Telecoms', subcategories: [{ isExpanded: false, name: 'Mobile', subcategories: null }, { isExpanded: false, name: 'Sim-cards', subcategories: null }] }, { isExpanded: false, name: 'Entertainment', subcategories: [{ isExpanded: false, name: 'Gaming', subcategories: [{ isExpanded: false, name: 'Games', subcategories: null }] }, { isExpanded: false, name: 'Sports', subcategories: null }] }];

console.log(modify(category)); // how many matched found
// => 10

console.log(category);
// => [ { isExpanded: false, name: 'Electricals', subcategories: [ { isExpanded: false, name: 'Audio', subcategories: null, isExpandable: false }, { isExpanded: false, name: 'Photography', subcategories: null, isExpandable: false } ], isExpandable: true }, { isExpanded: false, name: 'Telecoms', subcategories: [ { isExpanded: false, name: 'Mobile', subcategories: null, isExpandable: false }, { isExpanded: false, name: 'Sim-cards', subcategories: null, isExpandable: false } ], isExpandable: true }, { isExpanded: false, name: 'Entertainment', subcategories: [ { isExpanded: false, name: 'Gaming', subcategories: [ { isExpanded: false, name: 'Games', subcategories: null, isExpandable: false } ], isExpandable: true }, { isExpanded: false, name: 'Sports', subcategories: null, isExpandable: false } ], isExpandable: true } ]

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/object-scan@13.8.0"></script>

免责声明：我是object-scan

的作者

Javascript - 遍历对象并更新属性

Javascript - traversing through object and updating property

iteration

recursion

tree-traversal

Javascript - 遍历对象并更新 属性

Javascript - traversing through object and updating property

javascript

iteration

recursion

tree-traversal

Javascript - 遍历对象并更新属性