先说说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方法一般会用在整理数据结构上,在数据交互的时候,根据需求我们需要改一些前端部分需要的数据形式:
let aNews = [
];
let newArr = aNews.map((val,index,arr) => {
let json = {};
json.name = `名字:${val.a}`;
json.count = `排行榜:${val.b}`;
return json;
});
console.log(newArr);
3.filter()
用来过滤一些不合格的元素,如果回调函数返回的是true,那么自然会被留下来,为false的就会被过滤掉
let aNews = [
{title: '索尼大法', read: 15655, hot: false},
{title: '们怕是门店费', read: 58644, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
return val.hot==true;
});
console.log(newArr);
控制台输出:
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…
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"
}
本文也是结合网上示例,总结格式,方便自己以后查看,如有错误请多多指正!