javascript怎么遍历？

示例均使用如下测试数据：

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

1. for 循环

for循环语句，最基础的遍历，以数组的下标为索引，对数组元素进行遍历。

function arrFor(arr) {
    try {
        var ret = '',
            st = performance.now();
        for (var k = 0; k < arr.length; k++) {
            ret += arr[k];
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for 总耗时：" + diff);
    } catch (e) {
        console.log("array for 报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
array for 总耗时：1.7999999690800905

2. for in

for in循环不仅可以遍历数组，还可以遍历对象，但for in存在一些陷阱，比如它会在遍历完元素之后，还会对数组或对象的prototype中的属性进行遍历，所以，for in 更像是为对象遍历而设计的。

示例：

function arrForIn(arr) {
    try {
        var ret = '',
            st = performance.now();
        for (var k in arr) {
            ret += arr[k];
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for in 总耗时：" + diff);
    } catch (e) {
        console.log("array for in报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：1.5999999595806003

3. for of (ES6)

ES6中引入了 for ... of 循环，以替代 for...in 和 forEach() ，允许对 Array(数组)、String(字符串)、Maps(映射)、Sets(集合)等可迭代的数据结构进行遍历。

function arrForOf(arr) {
    try {
        var ret = '',
            st = performance.now();
        for(var k of arr) {
            ret += k;
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for of 总耗时：" + diff);
    } catch (e) {
        console.log("array for of报错了：" + e.message);
    }
}

注意：

• for(var k of arr) 中的 k ，就是数组 arr 中的元素，而不是数组的下标。

• IE 不支持，Edge支持。

结果：

abcdefghijklmnopqrstuvwxyz
array for of 总耗时：2.3999999975785613

4. forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

function arrForEach(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.forEach(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array forEach 总耗时：" + diff);
    } catch (e) {
        console.log("array forEach报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
array forEach 总耗时：1.7000000225380063

注意：

• forEach() 对于空数组是不会执行回调函数的。

• 回调函数 function (v, k) 中的 k 是数组的下标，v 是数组元素值。

• IE9以下的版本不支持。

5. map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

function arrMap(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.map(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array map 总耗时：" + diff);
    } catch (e) {
        console.log("array map报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
array map 总耗时：1.5999999595806003

6. filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

function arrFilter(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.filter(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array filter 总耗时：" + diff);
    } catch (e) {
        console.log("array filter报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
array filter 总耗时：1.6000000177882612

7. every

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolen。

function arrEvery(arr) {
    try {
        var st = performance.now();
        var ret = arr.every(function (v, k) {
            return v.length > 1;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array every 总耗时：" + diff);
    } catch (e) {
        console.log("array every报错了：" + e.message);
    }
}

结果：

false
array every 总耗时：1.500000013038516

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

• 如果所有元素都满足条件，则返回 true。

• every() 不会对空数组进行检测。

• every() 不会改变原始数组。

8. some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断。

function arrSome(arr) {
    try {
        var st = performance.now();
        var ret = arr.some(function (v, k) {
            return v.length > 1;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array some 总耗时：" + diff);
    } catch (e) {
        console.log("array some报错了：" + e.message);
    }
}

结果：

false
array some 总耗时：1.6999999643303454

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

• 如果没有满足条件的元素，则返回false。

• some() 不会对空数组进行检测。

• some() 不会改变原始数组。

9. JQuery方法 $.each

each() 方法为每个匹配元素规定要运行的函数。JQuery的each方法既可以遍历数组，也可以遍历对象。在遍历对象时可以很容易获取对象属性名。

function jqueryEach(obj) {
    try {
        var ret = '',
            st = performance.now();
        $.each(obj, function(k, v) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("jquery each 总耗时：" + diff);
    } catch(e) {
        console.log("jquery each报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
jquery each 总耗时：2.8999999922234565

• 一般用法为：$(selector).each(function(index,element)) 或者 $.each(obj,function(index,element)) ；回调函数中 index 参数是 对象obj的属性名（或者 数组obj 的索引），element 参数是 具体的值。

• 执行 return true 相当于 continue;

• 执行 return false 相当于 break;

10. Object.keys.forEach

Object.keys.forEach() 主要是用于遍历对象，获取对象的属性名，对于遍历数组意义不大。

function objectKey(obj) {
    try
    {
        var ret = '',
            st = performance.now();
        Object.keys(obj).forEach(function(key, index, arr) {
            ret += obj[key];
        });
        //ES6写法
        //Object.keys(obj).forEach(k => {
        //    ret += obj[k];
        //});　
        console.log(ret);
        let diff = performance.now() - st;
        console.log("object key 总耗时：" + diff);
    }
    catch (e)
    {
        console.log("object key 报错了：" + e.message);
    }
}

结果：

abcdefghijklmnopqrstuvwxyz
object key 总耗时：1.799999998183921

Object.keys.forEach 在遍历时，回调函数的参数 key是属性名（对于数组，属性名和索引一一对应)，index 是keys数组的索引，arr是keys数组；所以在取值的时候还是用 obj[key]

想要了解更多相关知识，可访问 前端学习网站！！

以上就是javascript怎么遍历？的详细内容，更多请关注0133技术站其它相关文章！