关于js循环

 

while/do while
while、do while主要的功能是,当满足while后边所跟的条件时,来执行相关业务。这两个的区别是,while会先判断是否满足条件,然后再去执行花括号里面的任务,而do while则是先执行一次花括号中的任务,再去执行while条件,判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作,生产中这个就可能用的比较少了,因为他与接下来要讲的for循环相比,个人觉得可读性上差了一点。

while(条件){
执行...
}
------------
do{
执行...
}
while(条件)
1
2
3
4
5
6
7
8
for
for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }
1
2
3
4
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
这个就不赘述了,也比较好理解,主要聊一下for…in/for…of这两个东西。

for…in
for…in的作用主要是去遍历对象的可枚举属性。即

 var foo = {
                name: 'bar',
                sex: 'male'
            }
            Object.defineProperty(foo, "age", { value : 18})
            for(var a in foo){
                console.log(`可枚举属性:${a}`)
            }
            console.log(`age属性:${foo.age}`)
1
2
3
4
5
6
7
8
9
因为Object.defineProperty,建立的属性,默认不可枚举,因此在浏览器中打印的结果为: 
 
在JS当中,数组也算作对象,但一般不推荐把for…in用在数组遍历上面,如果for…in普通数组的话,a返回数组的索引。

for…of
for…of是ES6新增的方法,主要作用是用来遍历具有iterator接口的数据集合,除了ES5的Array,还有ES6新增的Map,Set等,但是for…of不能去遍历普通的对象(普通对象不具备iterator接口),如果想去遍历普通对象,可以使用generator函数去给普通对象先生成iterator接口。for…of的好处是可以使用break跳出循环。

every/some
返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时,可以使用every/some。这两个的区别是,every会去判断判断数组中的每一项,而some则是当某一项满足条件时返回。例如:

let foo=[5,1,3,7,4].every(function (item,index) {
                console.log(`索引:${index},数值:${item}`)
                return item>2
            })
            console.log(foo)
1
2
3
4
5
打印结果为: 
 
当第二项不满足条件式跳出循环,返回false。

let foo=[5,1,3,7,4].some(function (item,index) {
                console.log(`索引:${index},数值:${item}`)
                return item>2
            })
            console.log(foo)
1
2
3
4
5
打印结果为: 
 
当数组的某项满足条件时跳出循环,返回true. 
在按照约定条件筛选数组时,every/some是非常方便的方法。

filter
筛选出一个满足相关条件的新数组。

let foo=[5,1,3,7,4].filter(function (item,index) {
                console.log(`索引:${index},数值:${item}`)
                return item>2
            })
            console.log(foo)
1
2
3
4
5
 
将满足返回值条件的item组成一个新的数组。过滤器,顾名思义,比较好理解。在按照约定条件筛选数组元素时,filter比较方便。filter() 不会改变原始数组。

map
let foo=[5,1,3,7,4].map(function (item,index) {
                console.log(`索引:${index},数值:${item}`)
                return item+2
            })
            console.log(foo)
1
2
3
4
5
 
返回一个将每个元素进行“二次加工”的新数组,map与filter都是返回一个新的数组,区别则是filter是将原数组,通过相关条件筛选出合法的item,来组成一个新的数组,而map则是将每个item通过再加工来返回一个新的数组。

reduce
将数组元素做“叠加”处理,返回一个值。

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引:${pre},数值:${cur}`)
                return pre+cur
            })
            console.log(foo)
1
2
3
4
5
打印结果为: 
 
pre为累加值,cur为当前值。reduce函数值得注意的是,reduce(fn,init)第二个参数,可以传一个初始值,如果代码改成这样:

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引:${pre},数值:${cur}`)
                return pre+cur
            },'')
            console.log(foo)
1
2
3
4
5
则为: 


indexOf
返回指定字符串首次出现的位置

 let foo=['57','17','37','7','4'].indexOf('7')
            console.log(foo)
1
2
 
这个函数比较常用的应用场景是,在做if判断时,可以代替||,&&等关系符。比如: 
 
可以代替 
if(value==’next’||value==’pre’)的这种写法,当判断元素较多时,这种写法比较划算。

总结
个人非常喜欢filter/map/reduce,但是看到身边的同学一言不合就foreach,替这三个函数心疼几秒。。。不过低版本浏览器也确实不支持这些函数。。。根据自己需要去选择合适的遍历方式可以大大提升效率。哦耶
--------------------- 
作者:j_bleach 
来源:CSDN 
原文:https://blog.csdn.net/j_bleach/article/details/61615347 
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值