javascript主要的循环有哪些


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

javascript主要的循环有:1、for循环;2、“for...in”循环;3、map方法;4、forEach循环;5、filter过滤循环;6、Object.keys遍历对象的属性。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。

一、for循环

for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环。

1

2

3

let arr = [1,2,3,4,5,6,7]for(let i = 0;i<arr.length;i++){

  console.log(arr[i])

}// 1,2,3,4,5,6,7

二、for...in

for...in循环主要针对于对象的遍历,当想要获取对象的对应键值时,使用for...in还是比较方便的

1

2

3

4

5

6

7

8

9

10

//针对对象来说 

//任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,

//for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。

//结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}

for(let key in obj){

    if(obj.hasOwnProperty(key)){

        console.log(obj[key])

    }

}

三、map

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完

1

2

3

4

5

6

let arr = [1,2,3,4,5]

let arr2 = arr.map((n)=>{

      return n+1

})

console.log(arr2) // [2,3,4,5,6]

console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

let arrObj = [{

    id: 1,

    name: 'xiaohua'

},{

    id:2,

    name: 'xiaomin'

},{

    id:3,

    name: 'xiaobai'

}]

arrObj.map((item,index,arr)=>{

    console.log(arr) // arrObj

    console.log(index)  // 0 1 2

    console.log(item.name) // xiaohua xiaomin xiaobai

})

四、forEach

forEach的使用方法和map使用方法差不多,只是forEach方法不返回值,只用来操作数据,且循环中途是无法停止的,总是会将所有成员遍历完

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

let arrObj = [{

    id: 1,

    name: 'xiaohua'

},{

    id:2,

    name: 'xiaomin'

},{

    id:3,

    name: 'xiaobai'

}]

arrObj.forEach((item,index,arr)=>{

    console.log(arr) // arrObj

    console.log(index)  // 0 1 2

    console.log(item.name) // xiaohua xiaomin xiaobai

})

五、filter过滤循环

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

let arrObj = [{

    id: 1,

    name: 'xiaohua'

},{

    id:2,

    name: 'xiaomin'

},{

    id:3,

    name: 'xiaobai'

}]

let arr2 = arrObj.filter((item,index,arr)=>{

    return (item.name === 'xiaohua')

})

console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string):

1

2

3

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];

let arrNew = arr.filter(Boolean);

console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.

六、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。

1

2

3

let obj = {name: 'xiaohua', sex: 'male', age: '28'}

console.log(Object.keys(obj))

// ["name", "sex", "age"]

判断一个对象是否是空对象,可以用Object.keys(obj).length>0

【推荐学习:javascript高级教程

以上就是javascript主要的循环有哪些的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript中回文数是什么?怎么判断?

javascript怎么将字符串转为对象

javascript中的强制类型转换的方法介绍

javascript怎么修改div内容

javascript是基于对象的吗

详解获取javascript各种全局对象变量的方法

javascript怎么控制页面跳转

js如何实现自定义鼠标右击菜单

设计一个javascript插件系统,重要无比

javascript分为哪两种数据类型

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...