es6数组循环

布满荆棘的人生 2023-07-11 06:10 11阅读 0赞

先说说es5的循环，一下几种循环的前五种接收的参数是一样的，都是两个参数：  
第一个参数：循环里面执行的回调函数，循环调用执行的语句  
第二个参数：this的指向  
循环中回调函数的参数有三个：  
第一个参数：循环出来的值  
第二个参数：循环出来的索引值  
第三个参数：数组本身  
**1.forEach()**

let arr = ['东','京','很','热'];
    arr.forEach(function(val,index,arr){ 
    	console.log(this,val,index,arr);
    	//{111} "东" 0 ['东','京','很','热']
    	//{111} "京" 1 ['东','京','很','热']
    	//{111} "很" 2 ['东','京','很','热']
    	//{111} "热" 3 ['东','京','很','热']
    },111)

这个例子中输出的111就是改变this之后的值，如果没有做任何修改的话当然是window，用箭头函数是下面这样的：

let arr = ['东','京','很','热'];
    arr.forEach((val,index,arr)=>{ 
        console.log(this,val,index,arr);
        //window "东" 0 ['东','京','很','热']
    	//window "京" 1 ['东','京','很','热']
    	//window "很" 2 ['东','京','很','热']
    	//window "热" 3 ['东','京','很','热']
    },111);

this并没有发生改变，因为在这个箭头函数的例子里this本身指向的就是window  
**2. map()**  
这个方法一般在和后台数据交互的时候，做映射，所谓映射就是–对应关系，与forEach不一样的地方就是有返回值，如果不加return就和forEach完全一样，因为forEach没有返回值；如果加了return，就会返回一个新数组，请看下面两个列子：  
（1）没给return返回值的时候，返回的是undefined

let arr = ['东','京','很','热'];
    let newArr = arr.map((val,index,arr) => { 
        console.log(val,index,arr);
        // "东" 0 ['东','京','很','热']
    	// "京" 1 ['东','京','很','热']
    	// "很" 2 ['东','京','很','热']
    	// "热" 3 ['东','京','很','热']
        // [undefined, undefined, undefined, undefined]
    });
    console.log(newArr);

(2)有return返回值的时候

let arr = ['东','京','很','热'];
    let newArr = arr.map((val,index,arr) => { 
        console.log(val,index,arr);
        return 1;
        // "东" 0 ['东','京','很','热']
    	// "京" 1 ['东','京','很','热']
    	// "很" 2 ['东','京','很','热']
    	// "热" 3 ['东','京','很','热']
        // [1, 1, 1, 1]
    });
    console.log(newArr);

map方法一般会用在整理数据结构上，在数据交互的时候，根据需求我们需要改一些前端部分需要的数据形式：

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

控制台输出：  
![控制台输出的内容][20200305104145393.png]  
**4.some()**  
这个方法类似于查找一个字符串存在不存在:

let aNews = ['冰','岩','阿兰若'];
    let newArr = aNews.some((item,index,arr) => { 
        return item=='冰';
    });
    console.log(newArr);  // true

**5.every()**  
和some一样，只不过是查找数组中的每一项，所有元素都要符合条件，才返回true：

let arr = [2,4,6,8,10];
    let newArr = arr.every((val,index,arr)=>{ 
        return val%2==0;  // 判断是不是偶数
    });
    console.log(newArr);  // true

下面这两种方法可以用来求数组的和、阶乘、幂运算；接受4个函数参数。举例如下：  
**6.reduce()**  
从左往右运算：

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

**7.reduceRight()**  
从右往左运算

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

**ES2017新增的幂运算符(**)\*\*

let arr = [2,3,2];
    let newArr = arr.reduce((prev,curr,index,arr)=>{ 
        return Math.pow(prev,curr);
            //return prev**curr;
    });
    console.log(newArr);    // 64

**8.for…of…**

*本文也是结合网上示例，总结格式，方便自己以后查看，如有错误请多多指正！*  
[原文链接][Link 1]

[20200305104145393.png]: https://img-blog.csdnimg.cn/20200305104145393.png
[Link 1]: https://www.jianshu.com/p/e26def31b2ee