Question

情景：

我有一个可观察的对象数组，需要进行过滤和格式化。

我有这种方法

messageModel.solution(self.selectedNumbers()
                          .filter(greaterThanZero)
                          .map(formatNumberSelected)
                          .join(', ');

有了这几个功能：

function greaterThanZero(number) { return number.amount() > 0 };
function formatNumberSelected(number){ return number.theNumber + " [" + number.amount() + "]" };

这是以字符串形式提供优秀结果

12346 [3], 12347 [3], 12348 [3], 12349 [3], 12350 [2], 12351 [3], 12352 [3], 12353 [6], 12354 [2], 12355 [3], 12356 [2], 12357 [3], 12358 [3], 12359 [6], 12360 [3], 12361 [3], 12362 [6], 12363 [3], 12364 [6], 12365 [3], 12366 [3], 12367 [6], 12368 [3], 12369 [2], 12370 [3], 12371 [2], 12372 [6], 12373 [3], 12374 [6], 12375 [2], 12376 [3], 12377 [2], 12378 [3], 12379 [2], 12380 [6],    12381 [2], 12382 [3], 12383 [2], 12384 [6]

但只要形成一个模态的HTML，就不太可读了。

预期结果:(模拟新线理解和可读性!!）

12346 [3], 12347 [3], 12348 [3], 12349 [3], 12350 [2]<br>, 
12351 [3], 12352 [3], 12353 [6], 12354 [2], 12355 [3]<br>, 
12356 [2], 12357 [3], 12358 [3], 12359 [6], 12360 [3]<br>, 
12361 [3], 12362 [6], 12363 [3], 12364 [6], 12365 [3]<br>, 
12366 [3], 12367 [6], 12368 [3], 12369 [2], 12370 [3]<br>, 
12371 [2], 12372 [6], 12373 [3], 12374 [6], 12375 [2]<br>, 
12376 [3], 12377 [2], 12378 [3], 12379 [2], 12380 [6]<br>, 
12381 [2], 12382 [3], 12383 [2], 12384 [6]

实际方法：

我当然用以下方法取得了这个成绩：

var candidates = self.selectedNumbers().filter(greaterThanZero);
var SEPARATOR = "";
var toReturn = "";
for (var item in candidates) {
  var number = candidates[item];
  toReturn = toReturn + SEPARATOR + number.theNumber + " [" + number.amount() + "]";
  if (item % 5 === 0) toReturn = toReturn + "</br>";
  SEPARATOR = ", ";
}

但不完全是我正在寻找的......所以......这是我的

问题：

那么......有一种方法可以插入</br>每个N个元素吗？在我的情况下，将大约5个组合Array.prototype内置函数？

Answer 1

Array#map传入一个可选的索引参数，因此你可以使用它：

function formatNumberSelected(number, i){ 
    return number.theNumber + 
           " [" + number.amount() + "]" +
           (i % 5 === 4 ? '<br>' : '');
}

或将其分成两个.map()，以便单个功能不会做太多：

messageModel.solution(self.selectedNumbers()
                      .filter(greaterThanZero)
                      .map(formatNumberSelected)
                      .map(insertBreak)
                      .join(', ');

function insertBreak(val, i) {
    return val + (i % 5 === 4 ? '<br>' : '');
}

或者，如果您可以访问像lodash这样的库，则可以对数字进行分块，然后添加分隔符和<br>（为简洁起见，下面的示例使用简单数字而不是您拥有的类型，但它可以使用您的原始greaterThanZero和formatNumberSelected）来处理您的类型：

＆＃13;

var formatted = _.chain(selectedNumbers())
                 .filter(greaterThanZero)
                 .map(formatNumberSelected)
                 .chunk(5)
                 .map(addSeparators)
                 .join(', <br>');

console.log(formatted);

function greaterThanZero(number) { return number > 0 }
function formatNumberSelected(number){ 
    return "[" + number + "]"; 
}
function addSeparators(rowValues) {
    return rowValues.join(', ');
}

function selectedNumbers() {
    return [5, 6, 7, 0, 9, 3, 2, 6, 7, 0, 1, 9, 2, 9];
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

＆＃13;

map和filter数组，但每N个元素添加修改

1 个答案: