ES6语法学习笔记之数组的各种循环方法-CSDN博客

一、回顾ES5中的一些循环方法

1.forEach()

		let arr = ['apple','orange','tomato','banana'];

		arr.forEach(function(val,index,arr){
			console.log(val,index,arr);
		});//依次打印的是该数组每次循环的值，索引号和数组本身，这是es5里原本拥有的一个循环
复制代码

forEach()通常有两个参数，第一个就是每循环一次需要执行的回调函数，该函数有三个参数，分别是每次循环的选项，索引和数组本身；第二个则是当前this指向的对象，默认是window，还可以指定为任意字符串、数字、document等等。

		arr.forEach((val,index,arr)=>{
			console.log(val,index,arr);
		});//如上也可以换成箭头函数表达
复制代码

但是，当回调函数用箭头函数表达时，第二个参数无论怎么写，this对象都是当前函数定义所在的对象，一般情况下是window。但如果当前函数被定义在某个json对象里，那就是该json对象。

2.map()非常有用，做数据交互映射

如下案例，map看起来与forEach的作用一致

		let arr1=[
		{title:'aaaaa',read:'120',hot:true},
		{title:'bbbbb',read:'100',hot:true},
		{title:'ccccc',read:'15',hot:true},
		{title:'ddddd',read:'10',hot:true},
		{title:'eeeee',read:'195',hot:true},
		];

		arr1.map((item,index,arr)=>{
			console.log(item,index,arr);
		});//依次打印数组的每个选项、索引及数组本身
复制代码

map正常情况下，需要结合return使用，返回一个新数组；如果没有return，就相当于forEach。

如下案例中，如果加了return，则返回数组[1,1,1,1,1];如果没加，则返回数组[undefined,undefined,undefined,undefined,undefined]。

		let newArr = arr1.map((item,index,arr)=>{
			console.log(item,index,arr);
			return 1;
		});

		console.log(newArr);//arr1在上个案例中定义
复制代码

注意：map会返回一个数组，forEach则没有返回值，上面的map如果改成forEach返回的结果只有一个undefined.

map还可以用于整理数据的表达方式:

		let arr2=[
		{title:'aaaaa',read:120,hot:true},
		{title:'bbbbb',read:100,hot:true},
		{title:'ccccc',read:15,hot:true},
		{title:'ddddd',read:10,hot:true},
		{title:'eeeee',read:195,hot:true},
		];


		//map还可以用于整理数据的表达方式

		let newArr2 = arr2.map((item,index,arr2)=>{
			let json2={}
			json2.t=`哈哈哈${item.title}-----`;
			json2.r=item.read+200;
			json2.hot=item.hot==true && '牛逼！';
			return json2;
		});
		
		console.log(newArr2);
		/*
		[
		0: {t: "哈哈哈aaaaa-----", r: 320, hot: "牛逼！"}
                1: {t: "哈哈哈bbbbb-----", r: 300, hot: "牛逼！"}
                2: {t: "哈哈哈ccccc-----", r: 215, hot: "牛逼！"}
                3: {t: "哈哈哈ddddd-----", r: 210, hot: "牛逼！"}
                4: {t: "哈哈哈eeeee-----", r: 395, hot: "牛逼！"}
                length: 5
                __proto__: Array(0)
                ]
        */
复制代码

filter(),过滤一些不合格的“元素”，如果返回值为true，那么它的值就留下来

		let arr3=[
		{title:'aaaaa',read:120,hot:true},
		{title:'bbbbb',read:100,hot:false},
		{title:'ccccc',read:15,hot:true},
		{title:'ddddd',read:10,hot:true},
		{title:'eeeee',read:195,hot:false},
		];

		let newArr3 = arr3.filter((item,index,arr3)=>{
			// return item.hot==true;
			return item.hot;
		});

		console.log(newArr3);//只有hot为true的被返回
复制代码

some()类似于查找，数组里面只要有某一个元素符合条件，就返回true

		let arr4=['apple','banana','orange'];
		let arrr4 = arr4.some((val,index,arr4)=>{
			return val=='banana';
		});
		console.log(arrr4);//true
复制代码

		let arr5=['apple','banana','orange'];
		
		function findInArray(arr,item){
			return arr.some((val,index,arr)=>{
				return val==item;
			});
		}
		console.log(findInArray(arr5,'orange'));
复制代码

every()数组必须都符合条件，才返回true

		let arr6 = [1,3,5,7,9];
		var arrr6 = arr6.every((val,index,arr6)=>{
			return val%2==1;
		});

		console.log(arrr6);//true
复制代码

reduce()回调函数接受4个参数，第一个是上一个值，第二个是当前值，第三个索引，第四个当前数组

偶尔会被用来求和：

		let arr7=[1,2,3,4,5,6,7,8,9,10];
		let res = arr7.reduce((prev,cur,index,arr)=>{
			return prev+cur;
		});

		console.log(res);//55,即数组的和
复制代码

		let arr8=[2,2,3];
		let res2 = arr8.reduce((prev,cur,index,arr)=>{
			return Math.pow(prev,cur);//math.pow(x,y),求x的y次方
		});

		console.log(res2);//64
复制代码

ruduceRight()和上面相似，但计算顺序是从右往左：

		let arr9=[2,2,3];
		let res3 = arr9.reduceRight((prev,cur,index,arr)=>{
			return Math.pow(prev,cur);
			//return prev**cur;
		});

		console.log(res3);//3的2次方是9，9的2次方是81，结果81
复制代码

ES6新增的循环

for...of...

arr.keys()表示数组的下标,arr.entries()表示数组的每一项，其本身也可认为是一个数组，所以item[0]才是索引

		let arr=['apple','banana','orange','tomato'];
		for (let val of arr){
			console.log(val);
		};//打印数组的值

		for(let index of arr.keys()){
			console.log(index);
		};//打印数组的索引

		for (let item of arr.entries()){
			console.log(item);
			console.log(item[0]);//打印索引
			console.log(item[1]);//打印值
		};//同时打印索引和值
		
		for(let [key,val] of arr.entries()){
			console.log(key,val);
		};
复制代码