[JavaScript知识库]ES6中新增的一些数组循环

首先我们先来回顾一下ES5中的两种循环：

1. 第一种就是常见的for循环

 for(let i=0; i<arr.length; i++){
      //循环语句
}

2. 第二种就是while循环

while(条件为真){
    //循环语句
}

到ES6中又增加了一些循环比如：
forEach 、map 、filter 、some() 、every() 、reduce() 、 reduceRight() 、for…of 等共八种。

forEach:

<script>
    let arr=['apple','banana','orange','tomato'];
    arr.forEach((val,index,arr)=>{
        console.log(this,val,index,arr);//window
    },123); //在箭头函数中thsi指向当前定义函数所在的对象
</script>

map():

整理数据结构

注：map必须有return返回值

  <script>
        let arr=[
            {title:'aaaaa',read:100,hot:true},
            {title:'bbbbb',read:100,hot:true},
            {title:'ccccc',read:100,hot:true},
            {title:'ddddd',read:100,hot:true}
        ];


        let newArr=arr.map((val,index,arr)=>{
            console.log(val,index);
            return "返回值";
        });
        console.log(...newArr);
    </script>

filter:

用来过滤一些不合格的元素，如果回调函数返回的是 true，那么自然会被留下来，为 false 的就会被过滤掉

<script>
    var arr = [
    {title:'侯耀华有多“恨”郭德纲？听听这段', read:5, hot:true},
    {title:'赵家班爆笑小品《镶牙》：宋小宝演', read:100, hot:true},
    {title:'最后10秒的精彩，猎豹队小哥一人', read:20, hot:false},
    {title:'赵本山自爆当年李双江等来找他，他', read:5, hot:true}
]
//过滤当前标签为热带你的新闻
let newArr=arr.filter((item,index,arr)=>{
    return item.hot==true; //返回指定条件的记录，其余被过滤掉
});
console.log(newArr);
</script>

some():

查找一个字符串存在不存在

   <script>
        let arr=["aaa","banana","orange"];
        let b=arr.some((val,index,arr)=>{
            return val=="banana"
        })
        console.log(b?"banana":"没有香蕉");
    </script>

every():

查找数组中的每一项，所有元素都要符合条件，才返回 true

<script>
    let arr=[1,3,5,7,9];
    var b=arr.every((val,index,arr)=>{
        return val%2==1
    })
    console.log(b);
</script>

reduce():

从左往右运算→求数组的和、差、积、阶乘

<script>
    let arr=[1,2,3,4,5,6,7,8,9,10];
    let res=arr.reduce((perv,cur,index,arr)=>{ 
    //prev上一个  cur当前的
        return prev+cur
    })
    console.log(res);
</script>

reduceRight():

从右往左运算←
上面这两种方法可以用来求数组的和、阶乘、幂运算；接受 4 个函数参数

<script>
    let arr = [2,3,3];
	let newArr = arr.reduceRight((prev,curr,index,arr)=>{
	 return prev-curr; // 运算的方式
	});
	console.log(newArr); // -2
</script>

幂运算符：**

<script>
    console.log(2**3); //求2的3次方
    console.log(2**8); //求2的8次方
</script>

for…of:

<script>
    let arr=["apple","banana","orange","tomato"]
    console.log("遍历值");
    for(let val of arr){
        console.log(val); //遍历值
    }
    console.log("------------------------------------------");
    console.log("索引值");
    for(let index of arr.keys()){
        console.log(index);  //索引值
    }
    console.log("------------------------------------------");

    console.log("遍历索引和值");
    for(let item of arr.entries()){
     //便利索引和值，arr.entries为数组新增的一个方法，意为实体
        console.log(item);
    }
    console.log("-------------------------------------------");

    console.log("便利索引和值");
    for(let [index,val] of arr.entries()){ //遍历索引和值
        console.log(index,val);
    }
</script>