6种不同的方法循环遍历阵列

可以通过许多不同的方法循环遍历数组。我从上到下整理了我最喜欢的6种方法。

1.使用for循环

当它只是在数组中循环时，for循环是我的首选。

让数组=[1，2，3，4，5]；for（设i=0；i<array.length；i++）{console.log（array[i]）；}

2.使用forEach循环

forEach循环是一种在数组中循环的现代方式。此外，它还提供了对阵列和元素的更多灵活性和控制。

让数组=[1，2，3，4，5]；array.forEach（（元素）=>{console.log（元素）；});

3.用于。。。属于

对于of循环允许您直接访问数组元素。

让数组=[1，2，3，4，5]；for（数组的let元素）{console.log（元素）；}

4.用于。。。在回路中

对于中提供了一个键，您可以使用该键访问数组元素。

让数组=[1，2，3，4，5]；for（数组中的let索引）{console.log（array[index]）；}

5.使用while循环

而loop也可以用于循环通过阵列。

让数组=[1，2，3，4，5]；let length=array.length；而（长度>0）{console.log（array[array.length-length]）；长度--；}

6.使用do…while循环

同样，我使用do…while循环

让数组=[1，2，3，4，5]；let length=array.length；做{console.log（array[array.length-length]）；长度--；}而（长度>0）

例如，我在Firefox控制台中使用了：

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

您可以使用querySelectorAll获得相同的结果

document.querySelectorAll（'pre'）.forEach（（e）=>{console.log（e.textContent）；})<pre>文本1</pre><pre>文本2</pre><pre>文本3</pre>

var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

干净多了。。。

深奥的

让a=[“你好”，“世界”]；while（a.length）{console.log（a.shift（））；}

性能测试

今天（2022-11-13），我在Chrome 107、Safari 15.2和Firefox 106上对选定的解决方案进行了测试。

结论

解决方案C和D在所有阵列的所有浏览器上都是快速或最快的。解决方案A和B在所有阵列的所有浏览器上都是最慢的

后果

细节

我执行3项测试：

small-用于2元素数组（如OP）-可以在此处运行中等-用于10K元素阵列-您可以在这里运行大-对于100K元素数组-您可以在这里运行

下面的代码段显示了测试中使用的代码。

函数A（A）{设r=0；而（a.length）r+=a.shift（）.length；返回r；}函数B（a）{设r=0；对于（i in a）r+=a[i]长度；返回r；}函数C（a）{设r=0；对于（a的x）r+=x.length；返回r；}函数D（a）{设r=0；对于（i=0；i<a.length；++i）r+=a[i].length；返回r；}函数E（a）{设r=0；a.对于每个（x=>r+=x.length）；返回r；}let arr=[“你好”，“世界！”]；[A，B，C，D，E].forEach（f=>console.log（`${f.name}:${f（[…arr]）}`））

以下是Chrome对于中等阵列的示例结果：

这个答案为循环和数组函数提供了一种替代方法，以遍历数组。

在某些情况下，在常规循环和回调上使用递归实现是有意义的。特别是，如果必须使用多个数组或嵌套数组。避免编写嵌套循环来访问多个数组中的数据。我还发现这段代码更容易读写。

/**
  array is the array your wish to iterate. 
  response is what you want to return.
  index increments each time the function calls itself.
**/

const iterateArray = (array = [], response = [], index = 0) => {
    const data = array[index]

    // If this condition is met. The function returns and stops calling itself.
    if (!data) {
      return response
    }
    // Do work...
    response.push("String 1")
    response.push("String 2")

    // Do more work...

    // THE FUNCTION CALLS ITSELF
    iterateArray(data, response, index+=1)
}

const mainFunction = () => {
    const text = ["qwerty", "poiuyt", "zxcvb"]

    // Call the recursive function
    const finalText = iterateArray(text)
    console.log("Final Text: ", finalText()
}

假设传递给iterateArray的数组包含对象而不是字符串。每个对象中都包含另一个数组。您必须运行嵌套循环才能访问内部数组，但如果递归迭代，则不必如此。

您还可以将iterateArray设置为Promise。

const iterateArray = (array = [], response = []) =>
  new Promise(async (resolve, reject) => {
    const data = array.shift()
    // If this condition is met, the function returns and stops calling itself.
    if (!data) {
      return resolve(response)
    }

    // Do work here...

    const apiRequestData = data.innerArray.find((item) => {
      item.id === data.sub_id
    })

    if (apiRequestData) {
      try {
        const axiosResponse = await axios.post(
          "http://example.com",
          apiRequestData
        )
        if (axiosResponse.status === 200) {
          response.push(apiRequestData)
        } else {
          return reject("Data not found")
        }
      } catch (error) {
        reject(error)
      }
    } else {
      return reject("Data not found")
    }
    // THE FUNCTION RESOLVES AND CALLS ITSELF
    resolve(iterateArray(data, response))
  })

是的，您可以使用循环在JavaScript中执行同样的操作，但不限于此。在JavaScript中有很多方法可以对数组进行循环。假设下面有一个数组，您想对其进行循环：

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

以下是解决方案：

1） For循环

for循环是JavaScript中循环数组的常见方式，但它不被认为是大型数组的最快解决方案：

for (var i=0, l=arr.length; i<l; i++) {
  console.log(arr[i]);
}

2） While循环

while循环被认为是循环长数组的最快方式，但在JavaScript代码中通常很少使用：

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3） 做的同时do-while与while执行相同的操作，但语法差异如下：

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

这些是实现JavaScript循环的主要方法，但还有其他几种方法可以实现。

此外，我们还使用for in循环对JavaScript中的对象进行循环。

还可以查看JavaScript中Array上的map（）、filter（）、reduce（）等函数。他们做事情可能比使用while和for更快、更好。

如果您想进一步了解JavaScript中的异步函数和数组，这是一篇很好的文章。

函数式编程在当今世界的发展。有充分的理由：功能性技术可以帮助您编写更容易编写的声明性代码一目了然地理解、重构和测试。函数式编程的基石之一是它的特殊用途列表和列表操作。这些东西正是听起来就像是：一系列的东西，以及你对它们做的事情。但功能思维方式对待他们的方式与你有点不同可能会想到。本文将详细介绍我喜欢称之为“大三个“列表操作：map、filter和reduce围绕这三个功能是实现编写干净的功能代码功能和反应式编程的强大技术。这也意味着你再也不用编写for循环了。

阅读更多>>此处：