Angular 1中无需循环为数组对象赋值的优化方案问询

我来帮你梳理下这个问题的几种优化思路哈：

一、更简洁的实现方式 #

首先可以把重复的判断逻辑抽成独立函数，不管是评论还是回复都复用这个逻辑，代码会更简洁易维护：

// 抽离公共逻辑，给符合条件的项添加pending属性
function markPending(item) {
  if (item.approved === 0) {
    item.pending = true;
  }
  return item;
}

// 处理评论列表和每个评论的回复
angular.forEach($scope.comments, function(comment) {
  markPending(comment);
  // 先确保replies是数组，再批量处理回复
  comment.replies = (comment.replies || []).map(markPending);
});

如果想用你尝试的map方法（适配Angular 1.4），可以优化成下面这样——你之前的map写法里返回comment.approved其实没必要，应该返回处理后的对象，这样才能保证数组处理的完整性：

function markPending(item) {
  if (item.approved === 0) {
    item.pending = true;
  }
  return item;
}

$scope.comments = $scope.comments.map(function(comment) {
  markPending(comment);
  comment.replies = (comment.replies || []).map(markPending);
  return comment;
});

二、是否必须在控制器中循环？ #

其实不是必须，但更推荐在控制器或者专门的数据服务里处理，原因有这几点：

• 符合Angular的MVC思想，把数据处理逻辑和视图展示逻辑分开，视图只负责渲染，数据转换交给控制器/服务
• 后续如果要修改pending的判断规则（比如改成approved === 2），只需要改一处逻辑，不用去模板里到处找
• 避免在视图里写复杂判断，让模板更简洁好读

当然也可以用过滤器，但过滤器适合做数据格式化（比如日期、文本截断），不适合修改原始数据的属性——过滤器应该是纯函数，只返回新结果不改动原数据，所以这里用过滤器并不合适。

三、能否通过ng-repeat传递值？ #

ng-repeat主要是用来遍历数据生成DOM的，它没法直接给数据添加属性。不过你可以在模板里直接用表达式判断展示，但我不推荐这么做：
比如模板里写：

<div ng-repeat="comment in comments">
  <p>{{comment.content}}</p>
  <!-- 直接在视图里判断状态，但不会给数据加pending属性 -->
  <span ng-if="comment.approved === 0" class="pending">待审核</span>
  <div ng-repeat="reply in comment.replies">
    <p>{{reply.content}}</p>
    <span ng-if="reply.approved === 0" class="pending">待审核</span>
  </div>
</div>

这种方式虽然能实现展示效果，但没有给数据添加pending属性，如果后续有其他逻辑需要用到这个状态（比如批量操作待审核评论），就没法复用，而且把判断逻辑写在视图里，后期维护起来会很麻烦。

所以还是建议提前在控制器/服务里处理好数据，让视图只负责根据pending状态渲染对应内容就好~

另外补充下：你提到用map代替循环，其实forEach和map都能用——forEach是直接修改原数组元素，map是返回新数组，两者性能差异不大，抽离公共函数后两种写法都很简洁，选你习惯的就行。

内容的提问来源于stack exchange，提问作者Rych