javascript 6种常见的遍历数组的方法

在使用js 开发项目的时候，遍历数组等信息是不可避免的一个问题，今天分享6种常见的遍历数组的方法，及性能的一个测试，方便大家在循环遍历的时候好清楚的选择使用哪一种更适合自己

1、for循环

循环可多次执行代码块。

let cars = [1,2,3];
for (let i = 0; i < cars.length; i++) { 
    console.log(i);
}
// Output:
// 1
// 2
// 3

2、forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

3、for in

for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of，那么for ... in的到底有什么用呢？

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in。

var obj = { a: 1, b: 2, c: 3 };

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

4、for of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

5、while

while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// Expected output: 3

6、do while

do...while 语句创建一个执行指定语句的循环，直到condition值为 false。在执行声明后检测condition，所以指定的声明至少执行一次。

var text = ""
var i = 0;
do {
    text += "<br>数字为 " + i;
    i++;
} while (i < 5);
document.getElementById("demo").innerHTML = text;
// Output:
//数字为 0
//数字为 1
//数字为 2
//数字为 3
//数字为 4

跳出循环

Break语句:

break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。

for(let i = 0; i < 50; i++) {
    if(i == 5) {
        break;
    }
    console.log(i);
}
//当i = 5的时候，直接退出for这个循环。这个循环将不再被执行。

Continue语句:

continue语句和break语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内, 在其他地方使用都会引起错误?

for(var i = 5; i >=0; i--) {
    if(i == 4 || i == 3 || i == 1) {
        continue;
    }
    console.log(i);
}
//当i = 4、i = 3以及i = 1的时候，直接跳出for循环。

Return语句:

return语句就是用于指定函数返回的值。return语句只能出现在函数体内，出现在代码中的其他任何地方造成语法错误！

function writeNumber(){
    for(var i = 1; i < 10; i++) {
        if(i == 8) {
            return;
        }
        console.log(i);
    }
}

性能对比

const arr = new Array(100000).fill(Math.random());
//1.for
console.time('for');
for (let i = 0; i < arr.length; i++) { }
console.timeEnd('for');
//2.forEach
console.time('forEach');
arr.forEach(element => { });
console.timeEnd('forEach');
//3.for of
console.time('for of')
for (let i of arr) { }
console.timeEnd('for of')
//4.for in
console.time('for in')
for (let i in arr) { }
console.timeEnd('for in');
//5.while
console.time('while')
let i = 0;
while (i < arr.length) { i++ }
console.timeEnd('while');
//6.do while
console.time('do while')
let j = 0;
do { j++ }
while (j < arr.length);
console.timeEnd('do while');