关于JS轮回遍历

2019年8月31日 114次阅读 来源: j_bleach

关于JS轮回遍历

写下这篇文章的目标，主假如想总结一下关于JS关于鸠合对象遍历的体式格局要领，以及在现实运用场景中如何去运用它们。本文会重要引见：while,for,forEach,every,some,filter,reduce,map,indexOf…

while/do while

while、do while重要的功用是，当满足while后边所跟的前提时，来实行相干营业。这两个的区分是，while会先推断是不是满足前提，然后再去实行花括号内里的使命，而do while则是先实行一次花括号中的使命，再去实行while前提，推断下次还是不是再去实行do内里的操纵。也就是说 do while最少会实行一次操纵，生产中这个便可能用的比较少了，由于他与接下来要讲的for轮回比拟，个人以为可读性上差了一点。

while(前提){
实行...
}
------------
do{
实行...
}
while(前提)

for

for (语句 1; 语句 2; 语句 3)
  {
  被实行的代码块
  }

  • 语句 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}`)

由于Object.defineProperty，竖立的属性，默许不可罗列，因此在浏览器中打印的效果为：
《关于JS轮回遍历》

在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)

打印效果为：
《关于JS轮回遍历》

当第二项不满足前提式跳出轮回，返回false。

let foo=[5,1,3,7,4].some(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)

打印效果为：
《关于JS轮回遍历》

当数组的某项满足前提时跳出轮回，返回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)

《关于JS轮回遍历》

将满足返回值前提的item构成一个新的数组。过滤器，望文生义，比较好明白。在依据商定前提挑选数组元素时，filter比较轻易。

map

let foo=[5,1,3,7,4].map(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item+2
            })
            console.log(foo)

《关于JS轮回遍历》

返回一个将每一个元素举行“二次加工”的新数组，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)

打印效果为：
《关于JS轮回遍历》

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)

则为：
《关于JS轮回遍历》

indexOf

返回指定字符串初次涌现的位置

 let foo=['57','17','37','7','4'].indexOf('7')
            console.log(foo)

《关于JS轮回遍历》

这个函数比较经常使用的运用场景是，在做if推断时，能够替代||，&&等关联符。比方：
《关于JS轮回遍历》

能够替代
if（value==’next’||value==’pre’）的这类写法，当推断元素较多时，这类写法比较划算。

总结

个人异常喜好filter/map/reduce，然则看到身旁的同砚一言不合就foreach,替这三个函数疼爱几秒。。。不过低版本浏览器也确切不支持这些函数。。。依据本身须要去挑选适宜的遍历体式格局能够大大提拔效力。哦耶

    原文作者：j_bleach
    原文地址: https://segmentfault.com/a/1190000008680579
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞