这里我们先说一下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} "aaa" 1 ["aaa", "bbb" , "ccc"]
// {111} "aaa" 2 ["aaa", "bbb" , "ccc"]
},111);
上线这个例子终属楚的111 就是改变this之后的值，如果没有做任何修改的话当然是window，用箭头函数写的话就是这样的：
let arr = ['aaa','bbb','ccc'];
forEach((val,index,arr)=>{
console.log(this,val,index,arr);
//window "aaa" 0 ["aaa","bbb","ccc"]
//window "aaa" 1 ["aaa","bbb","ccc"]
//window "aaa" 2 ["aaa","bbb","ccc"]
})
你会发现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 ['aaa','bbb','ccc']
// "ccc" 2 ['aaa','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 ['aaa','bbb','ccc']
// "ccc" 2 ['aaa','bbb','ccc']
// [1,1,1]
});
console.log(newArr);
map方法一般用在整理数据结构上，在数据交互的时候，根据需求我们需要改一些前端部分需要的数据样式：
let aNews = [
{
aaa: 'I am a teacher!',bbb: 25
},
{
aaa: 'I am your students!',bbb: 10
}
];
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，name自然会被留下来，为false的就会被过滤掉，看一个例子：
let aNews = [
{
aaa: 'I am a teacher!',bbb: 25,hot:true
},
{
aaa: 'I am your students!',bbb: 10,hot:false
}
];
let newArr = aNews.filter((val,index,arr) => {
return val.hot == true;
});
console.log(newArr);
执行结果:
1528885809(1).jpg
4、some()
这个方法类似于查找一个字符串存在不存在，举个例子说明
let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
return item == 'cca';
});
console.log(newArr);
5、every();
let aNews = [1,2,3,5,7,9];
let newArr = aNews.every((item,index,arr) => {
return item%2 == 1;
});
console.log(newArr);
6、reduce();
从左向右运算
7、reduceRight()
从右向左运算，这两种方法都可以用来求数组的和，阶乘，幂运算；接受4个函数参数，例子：
let arr = [2,3,3];
let newArr = arr.reduce((prev,end,index,arr) => {
return prev-end; //运算的方式
});
console.log(newArr); //-4
let arr = [2,3,3];
let newArr = arr.reduceRight((prev,end,index,arr) => {
return prev-end; //运算的方式
});
console.log(newArr); //-2
ES2017新增的幂运算（**），用法及其优点：
let arr = [2,3,2];
let newArr = arr.reduce((prev,end,index,arr) => {
return Math.pow(prev,end); //运算的方式
//return prev**end
});
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']
}
for(let [ke,va] of arr.entries()){
console.log(ke,va);
// 0 'aaa'
// 1 'bbb'
// 2 'ccc'
}
GitHub个人主页 ：https://github.com/Cyrildog
有些事情，要等到你渐渐清醒了，才明白它是个错误；有些东西，要等到你真正放下了，也许才知道它的沉重。
image
网友评论