深入浅出ES6教程『数组的循环』

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了扩展运算符的用法，下面我们一起来继续学习数组的循环：

这里我们先说ES5中的循环，以下几种循环的前五种接受的参数是一样的，都有两个参数：
第一个参数：循环里面执行的回调函数，循环调用执行的语句
第二个参数：this的指向(可有可无)
循环中回调函数的参数有三个：
第一个参数：循环出来的值
第二个参数：循环出来的值的索引
第三个参数：数组本身

1. forEach()

let arr = ['aaa','bbb','ccc'];
arr.forEach(function(val,index,arr){
	console.log(this,val,index,arr);
	// {111} "aaa" 0 ["aaa", "bbb", "ccc"]
	// {111} "bbb" 1 ["aaa", "bbb", "ccc"]
	// {111} "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

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

let arr = ['aaa','bbb','ccc'];
arr.forEach((val,index,arr)=>{
	console.log(this,val,index,arr);
	// window "aaa" 0 ["aaa", "bbb", "ccc"]
	// window "bbb" 1 ["aaa", "bbb", "ccc"]
	// window "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

你会发现this并没有改变，因为在这个箭头函数的例子里this本身指向的就是window

2. map()

这个方法还是挺有用的，一般在和后台数据交互的时候，做映射，所谓映射就是一一对应的关系，与forEach不一样的地方就是有返回值，如果不加return就和forEach完全一样，因为forEach没有返回值；如果加了return，就会返回一个新数组，下面看两个例子：
(1) 没给return放入值的时候，返回的是undefined：

let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
	console.log(val,index,arr);
	// "aaa" 0 ["aaa", "bbb", "ccc"]
	// "bbb" 1 ["bbb", "bbb", "ccc"]
	// "ccc" 2 ["ccc", "bbb", "ccc"]
	// [undefined, undefined, undefined]
});
console.log(newArr);

(2) return一个值的时候：

let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
	console.log(val,index,arr);
	return 1;
	// "aaa" 0 ["aaa", "bbb", "ccc"]
	// "bbb" 1 ["bbb", "bbb", "ccc"]
	// "ccc" 2 ["ccc", "bbb", "ccc"]
	// [1, 1, 1]
});
console.log(newArr);

小白：说了半天这个东西到底有什么用呢？
格格：别着急哈，下面就来介绍一下：

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

let aNews = [
	{aaa: '为排行暴走万步', bbb: 404512},
	{aaa: '李荣浩庆生杨丞琳', bbb: 444512},
];
let newArr = aNews.map((val,index,arr) => {
	let json = {};
	json.title = `标题:${val.aaa}`;
	json.read = `阅览量:${val.bbb}`;
	return json;
});
console.log(newArr);

执行效果：

3. filter()

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

let aNews = [
	{title: '为排行暴走万步', read: 404512, hot: false},
	{title: '李荣浩庆生杨丞琳', read: 444512, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
	return val.hot==true;
});
console.log(newArr);

执行结果：

4. some()

这个方法类似于查找一个字符串存在不存在，举个例子说明：

let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
	return item=='aaa';
});
console.log(newArr);  // true

5. every()

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

let arr = [1,3,5,7,9];
let newArr = arr.every((val,index,arr)=>{
	return val%2==1;  // 判断是不是奇数
});
console.log(newArr);  // true

6. reduce()

从左往右运算→

7. reduceRight()

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

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

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

例子中的两种写法都可以，结果是一样的，ES5的语法到此为止。

下面来说一下ES6新增的一些东西：

8. for…of…

let arr = ['aaa','bbb','ccc'];
for (let val of arr) {
	console.log(val);	// 输出每一项
	// aaa
	// bbb
	// ccc
}

for (let index of arr.keys()) {
	console.log(index);	// 输出每一项的索引
	// 0
	// 1
	// 2
}

for (let item of arr.entries()) {
	console.log(item);	// 输出三个数组
	// [0, "aaa"]
	// [1, "bbb"]
	// [2, "ccc"]
	console.log(item[0]);	// 0 1 2
	console.log(item[1]);	// aaa bbb ccc
}

for (let [key,val] of arr.entries()) {
	console.log(key,val);	
	// 0 "aaa"
	// 1 "bbb"
	// 2 "ccc"
}

for…of循环你可以大胆放心的用，绝对没有任何隐患，也不用担心把它玩坏(ง •̀_•́)ง (*•̀ㅂ•́)و

关于数组的循环我们都已经了然于心，预知数组新增方法如何，请听下回分解 （＾∀＾）/~~~

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注；
欢迎光临个人主页

等一下( •́ .̫ •̀ )，我还有最后一句话：
这里虽然没有都市的繁华，
也没有山林的鸟语花香，
只有一片如水的宁静，
古人云：
既来之则安之，
既然来到了这里，
就可以静心休憩你的灵魂，
调养你疲惫的心，
再见…