Javascript - 如何在某个索引处启动forEach循环

时间:2017-04-08 15:19:39

标签: javascript arrays

我有一个包含很多项目的数组,我正在创建它们的列表。我在考虑将列表分页。我想知道如何在数组中的某个forEach处开始forindex循环,这在我的示例中是每个页面上列表中的项目数,因此我不需要在每个循环中迭代整个数组吗?

arr.forEach(function (item) {
  someFn(item);
})


for (var i = 0, len = arr.length; i < len; i++) {
  someFn(arr[i]);
}

6 个答案:

答案 0 :(得分:11)

您可以使用Array#slice

来使用数组的副本
  

slice() 方法将数组的一部分的浅表副本返回到从头到尾选择的新数组对象(不包括结尾)。原始数组不会被修改。

array.slice(10, 20).forEach(someFn); // only for functions which respects API of forEach*

* parameters for a callback

或者你可以从给定的索引开始并以给定的索引结束。

for (var i = 10, len = Math.min(20, arr.length); i < len; i++) {
    someFn(arr[i]);
}

使用

Math.min(20, arr.length)
如果数组小于给定值20,则

返回一个值。例如,如果数组只有索引0 ... 14,则得到结果为15。

答案 1 :(得分:5)

forEach不提供该功能,不。所以你的选择是:

  1. 一个简单的for循环

  2. 忽略您不想处理的索引(如Kind user's answer中所述)

  3. 使用slice(如Nina's answer

  4. 编写自己的函数

  5. 这是#4作为Array.prototype扩展名(当然不可枚举;向Array.prototype添加可枚举属性会破坏批次代码);在它是一个独立版本之后,添加到Array.prototype时是不合适的:

    // Giving ourselves the function
    Object.defineProperty(Array.prototype, "myEach", {
      value: function(from, to, callback, thisArg) {
        if (typeof from === "function") {
          thisArg = callback;
          callback = to;
          to = from;
          from = 0;
        }
        if (typeof to === "function") {
          thisArg = callback;
          callback = to;
          to = this.length;
        }
        for (var n = from; n < to; ++n) {
          callback.call(thisArg, this[n], n, this);
        }
      }
    });
    
    // Using it:
    var arr = ["zero", "one", "two", "three", "four", "five", "six", "seven"];
    console.log("*** From 3:");
    arr.myEach(3, function(e) { console.log(e); });
    console.log("*** From 3 (inclusive) to 5 (exclusive):");
    arr.myEach(3, 5, function(e) { console.log(e); });
    console.log("*** All:");
    arr.myEach(function(e) { console.log(e); });
    console.log("*** Check thisArg handling on 0-2:");
    var o = {answer: 42};
    arr.myEach(0, 2, function(e) {
      console.log(e + " (this.answer = " + this.answer + ")");
    }, o);
    .as-console-wrapper {
      max-height: 100% !important;
    }

    再次注意,这是一个不可枚举的属性,如果您向Array.prototype添加任何内容,这一点至关重要(否则,您会破坏大量代码)。

    你不会在图书馆中这样做,以供其他人使用,你只需要一个独立的功能:

    // Giving ourselves the function
    function myEach(array, from, to, callback, thisArg) {
      if (typeof from === "function") {
        thisArg = callback;
        callback = to;
        to = from;
        from = 0;
      }
      if (typeof to === "function") {
        thisArg = callback;
        callback = to;
        to = array.length;
      }
      for (var n = from; n < to; ++n) {
        callback.call(thisArg, array[n], n, array);
      }
    }
    
    // Using it:
    var arr = ["zero", "one", "two", "three", "four", "five", "six", "seven"];
    console.log("*** From 3:");
    myEach(arr, 3, function(e) {
      console.log(e);
    });
    console.log("*** From 3 (inclusive) to 5 (exclusive):");
    myEach(arr, 3, 5, function(e) {
      console.log(e);
    });
    console.log("*** All:");
    myEach(arr, function(e) {
      console.log(e);
    });
    console.log("*** Check thisArg handling on 0-2:");
    var o = {answer: 42};
    myEach(arr, 0, 2, function(e) {
      console.log(e + " (this.answer = " + this.answer + ")");
    }, o);
    .as-console-wrapper {
      max-height: 100% !important;
    }

答案 2 :(得分:1)

不幸的是Array#forEach遍历给定数组中的每个元素,但您可以应用一个简单的条件来确定哪些元素(具有指定的索引)应用给定的函数。

i > 3 ? someFn(item) : null;
^ if index more than 3 - call the function

var arr = [1,2,3,4,5,6,7];

function someFn(elem){
  console.log(elem);
}

arr.forEach(function(item, i) {
  return i > 3 ? someFn(item) : null;
})

答案 3 :(得分:0)

考虑@NinaScholz评论的内容,也许您可​​以使用变量,并且可以在这些变量中设置任何更改,而不是更改循环。

&#13;
&#13;
function someFn(item, array2){
  array2.push(item, array2);
}

var arrayItems1 = [1,2,3,4,5,6,7,8,9,10];
var arrayItems2 = [];

var firstIndex = 1;
var lastIndex = 5;
var i = 0;

for (i = firstIndex; i < lastIndex; i++){
     someFn(arrayItems1[i], arrayItems2);
}

alert(arrayItems2.join(' '));
&#13;
&#13;
&#13;

答案 4 :(得分:0)

您可以应用某种迭代器模式的实现。

var Iterator = function (list, position) {
  return {
    isNext: function () {
      return position + 1 < list.length;
    },
    isDefined: function () {
      return (position < list.length && position >= 0);
    },
    element: function () {
      return list[position];
    },
    position: function () {
      return position;
    },
    moveNext: function () {
      if (this.isNext()) { return Iterator(list, position + 1); }
      return Iterator([], 0);
    }      
}

Iterator.forEach = function (action, iterator, length) {
  var counter = 0;
  while (counter < length && iterator.isDefined()) {
    counter = counter + 1;
    action(iterator.element(), iterator.position());
    iterator = iterator.moveNext();
  }

  return iterator;
}   

然后有一个迭代器用于遍历列表并将最后一次迭代的状态保持在列表中。

var list = [1, 3, 5, 3, 6];
var iterator = Iterator(list, 0);

iterator = Iterator.forEach(function (element, index) {
  console.log(element, index);
}, iterator, 3);

//1 0
//3 1
//5 2

Iterator.forEach(function (element, index) {
   console.log(element, index);              
}, iterator, 5);

//3 3
//6 4

答案 5 :(得分:0)

array.values()获取迭代器,.next()并使用它。

let ar=[1,2,3,4]

var _;for(let a of(_=ar.values(),_.next(),_)){
  console.log(a)
}