JavaScript基础--遍历数组的方法

最新推荐文章于 2023-03-28 19:54:17 发布

JJ_Smilewang

最新推荐文章于 2023-03-28 19:54:17 发布

阅读量392

点赞数 1

分类专栏： JavaScript基础文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124798557

版权

JavaScript基础专栏收录该内容

20 篇文章 2 订阅

订阅专栏

JS为我们提供了很多遍历方法，而每种方法都有各自特点，今天就简单总结下：

主要有：① for循环
② for...in
③ for...of
④ forEach() 方法

1. for循环

所谓遍历其实就是一种循环，所以任何数组，都可以使用for循环进行遍历，它是通用的，而且效用最强大。

let arr = [1, 'string', 'null', 'true', null, true];
// 这里的i是下标index的简写，习惯使然，所以计数器就从i开始了，依次往后使用字母
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
要注意的是数组下标是从0开始，所以计数器的初始值为0，条件为计数器<数组长度。

2. for...in 主要用于遍历对象，也可以遍历数组

let arr = [1, 2, 3, 'red', 'green', 'blue'];
for (var k in arr) {
   console.log(k);   // k表示元素的下标
   console.log(arr[k]);  // arr[k]表示元素
};

let obj = {
    name: '张三',
    age: 23,
    hobby: function() {
        alert('喜爱运动');
    }
}
for (var k in obj) {
    console.log(k); // k表示属性名
    console.log(obj[k]); // obj[k] 表示属性值
}

for...in主要是用于遍历对象的，但是一般情况下遍历数组也是没问题的，但是如果是在DOM中遍历获取到的元素集合，就会存在一些问题，这时需要这样解决：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li');
        // 理论上使用for...in遍历lis就可以得到这个5个小li元素，但是事实上这样得到的远不止元素本身
        for (var k in lis) { 
            console.log(k);  // 输出发现k包含信息不止是下标，而且还包含其他方法
            // console.log(lis[k]); // 所以lis[k]也不止包含元素，还有其他方法体，从而在后面直接使用lis[k]进行方法操作时会报错
     // 因此要想使用for...in遍历出集合中的元素，则需要加上以下判断即可
            if (k < lis.length) {
                console.log(lis[k]);  // 此时的lis[k]表示的就是5个li元素
            }
        }
    </script>
</body>

因此，for...in主要用于遍历对象，数组/集合不太推荐使用，避免出现不必要的问题。

3. for...of 遍历数组

let arr = [1, 2, 3, 'red', 'green', 'blue'];
for (var k of arr) {
    console.log(k);  // 这里的k表示的就是数组中的元素
}
for...of 和 for...in 的区别：

① 里面定义的变量，of中的k表示的就是元素，而in中的k一般指的是下标，特殊集合里还会包含方法；
② for...in 可以遍历对象也可以遍历数组
③ for...of 只可以遍历数组，不可遍历对象

4. forEach() 方法

forEach() 方法用于遍历数组，其格式为：

数组名.forEach(function(item, index, arr)) { }
① item 表示数组的每个元素
② index 表示元素的对应下标
③ arr 表示原数组

let arr = [1, 2, 3, 4];
arr.forEach(function(item, index, arr) {
    // console.log(arr[item]);  // 遍历数值
    // console.log(arr[index]);  // 遍历下标
    // console.log(arr);  // 遍历数组
    console.log(item, index, arr); // 前面表示数值，后面表示下标
})
以上为打印结果，从左到右分别表示数组arr元素，元素对应下标，原数组arr。

另外，函数里面的3个形参，名字是自己取的，不一定要使用item、index和arr，但是推荐使用这三个，可以见名思意。还有就是并非每次都要写三个参数，需要几个写几个，但是如果只写一个，不管名字是啥，都表示元素，写两个就表示元素和下标。

小总结：以上4种遍历数组的方法，各有千秋：

① for循环：程序简洁，结构清晰，循环体和循环条件位置突出
② for...in ：大部分用于遍历对象，要注意的是for (var k in arr) 这里的k是字符串型。其优点主要在于可以遍历对象的属性和属性值
③ for...of：其规避了for...of的缺点，推荐使用其遍历数组，方便高效
④ forEach() 方法：使用便利简洁，效率高，而且不用考虑下标问题，减少了出错概率

JJ_Smilewang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础--遍历数组的方法

JS为我们提供了很多遍历方法，而每种方法都有各自特点，今天就简单总结下：主要有：① for循环 ② for...in ③ for...of ④ forEach() 方法1. for循环所谓遍历其实就是一种循环，所以任何数组，都可以使用for循环进行遍历，它是通用的，而且效用最强大。let arr = [1, 'string', 'null', 'true', null, true];// 这里的i是下标...
复制链接

扫一扫