浅谈js中的遍历

X1nFLY 发布于2019-08-23 12:14 / 364人阅读

摘要：这几个方法会完整地遍历数组，即使在满足条件后，循环依旧进行。如果要同时遍历索引和项上述都是遍历数组的方法，这个是遍历对象的方法，并且最好不要混用

遍历是程序中必不可少的一环，在所有语言中都存在，因为它可以简化人们的规律性操作，本文将一一道来。

for++

这是最基础的for循环语句，格式如下：

    var arr = [1, 2, 3, 4, 5]
    for (var i = 0; i < arr.length; i++) {
        console.log(i)
        if (i > 2) break
    }

也有人这样写,据说效率更高

    for (var i = 0, len = arr.length; i < len; i++) {
        console.log(i)
        if (i > 2) break
    }

while

for循环可以同时拿到每个循环的索引和数组对应的项，如果只是满足一定条件内的循环，可以使用while 。

    var i = 0
    while (i < 5) {
        console.log(i)
        if(i>2)break
        i++
    }

forEach, map, filter

上述方法写起来略微麻烦，所以es5新增了几个对数组的遍历方法，此外还有every,some,reduce，不过不是很常用。这几个方法会完整地遍历数组，即使在满足条件return后，循环依旧进行。
用法如下：

// forEach 直接遍历
arr.forEach((item, index) => {
        console.log(item, index)
    })
    
// map 依次遍历，对每一项进行转换，映射成另一个数组
const arr1 = arr.map((item, index) => {
        return item * 2
    })
console.log(arr1) // [2,4,6,8,10]

// filter 依次遍历，过滤得到满足条件的项，组成数组
const arr2 = arr.filter((item, index) => {
        return item % 2 == 0
    })
console.log(arr2) // [2,4]

for...of

这个是es6推荐的数组遍历方法，相比forEach，优点有2点：
1.可以使用break和continue跳出循环
2.找到满足条件的项，跳出循环后，后面的循环不会进行，从而减少内存消耗。

for (const item of arr) {
        console.log(item)
        if (item > 2) break
    }
    
// 如果要同时遍历索引和项
for (const [index, item] of arr.entries()) {
        if (index === 2) {
            console.log(item)
            break
        }
    }

for...in

上述都是遍历数组的方法，这个是遍历对象的方法，并且最好不要混用

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
for (const key in obj) {
    console.log(key, obj[key])
}

GPU云服务器云服务器 js获取遍历中的单个 js遍历 js 遍历磁盘 js 遍历数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98172.html

浅谈JS中 reduce() 的用法

摘要：一语法其中，表示将要原数组表示上一次调用回调时的返回值，或者初始值表示当前正在处理的数组元素表示当前正在处理的数组元素的索引，若提供值，则索引为，否则索引为表示初始值。一、语法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示将要原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 评论0 收藏0
浅谈模板引擎之artTemplate

摘要：来给大家推荐一款模板引擎，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个大概也才几左右。对于前端开发者来说，有一个绑数据的模板是多么的幸福，不用我多说大家也知道，终于不用在js中一个个字符串拼接一大推元素数据啥的，可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个template.js大概也才几...

zeyu 2019-08-01 17:19 评论0 收藏0
浅谈模板引擎之artTemplate

摘要：来给大家推荐一款模板引擎，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个大概也才几左右。对于前端开发者来说，有一个绑数据的模板是多么的幸福，不用我多说大家也知道，终于不用在js中一个个字符串拼接一大推元素数据啥的，可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个template.js大概也才几...

caohaoyu 2019-08-20 18:28 评论0 收藏0
浅谈JS的浅拷贝和深拷贝(递归和树遍历)

摘要：对象的特殊性因为对象的是通过指针仔细内存地址的，所以对象的拷贝不能像变量一般简单的赋值，对象的赋值只是将指针的地址赋值过去而已，修改属性值会对所有指向这个内存地址的对象的属性值都会被改变，见下面的例子变量赋值修改不会对造成影响对象赋值修改会 1.对象的特殊性因为对象的是通过指针仔细内存地址的，所以对象的拷贝不能像变量一般简单的赋值，对象的赋值只是将指针的地址赋值过去而已，修改属性值会...

cjie 2019-08-23 16:10 评论0 收藏0
浅谈webpack之plugin，webpack-manifest-plugin源码解读

摘要：注册方法之后，当执行了当前的，那么挂载正在当前上的方法就会被执行。比如在开始编译之前，就能触发钩子，就用到了当前的。上面都是前置知识，下面通过解读一个源码来巩固下。先看一段简单的源码。，是众多的的一个，官网的解释是编译创建之后，执行插件。通过解读webpack-manifest-plugin，了解下plugin机制先简单说一下这个插件的功能，生成一份资源清单的json文件，如下 s...

william 2019-08-23 16:18 评论0 收藏0