深入浅出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，支持转载但要下标注，同时恭候：我的博客 Resume
等一下( •́ .̫ •̀ )，我还有最后一句话：
这里虽然没有都市的繁华，
也没有山林的鸟语花香，
只有一片如水的宁静，
古人云：
既来之则安之，
既然来到了这里，
就可以静心休憩你的灵魂，
调养你疲惫的心，
再见...
