ES6数组循环

171 阅读4分钟

先说说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 = [
    {a: '张三', b: 433522},
    {a: '李四', b: 441533},
];
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: '最后10秒的精彩', read: 15655, hot: false},
    {title: '赵本山自爆', read: 58644, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
    return val.hot==true;
});
console.log(newArr);

控制台输出:

2021-11-15_185510.png

4.some()

这个方法类似于查找一个字符串存在不存在:

let aNews = ['apple','banana','orange'];
let newArr = aNews.some((item,index,arr) => {
    return item=='apple';
});
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

下面这两种方法可以用来求数组的和、阶乘、幂运算;接受4个函数参数。举例如下:

6.reduce()

从左往右运算:

let arr = [1,2,3,4,5,6,7,8,9,10];
let newArr = arr.reduce((prev,curr,index,arr)=>{
    return prev*curr;   // 运算的方式
});
console.log(newArr);  // 3628800

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=["apple","banana","orange","tomato"]
console.log("遍历值")
for(let val of arr){
	console.log(val);//遍历值
        //apple
        //banana
        //orange
        //tomato
}
			
console.log("遍历索引")
for(let index of arr.keys()){
	console.log(index);//arr.keys()遍历索引
        //0
        //1
        //2
        //3
}
			
console.log("遍历索引和值")
for(let item of arr.entries()){
	console.log(item);
        //[0, "apple"]
        //[1, "banana"]
        //[2, "orange"]
        //[3, "tomato"]
        console.log(item[0]);    //0 1 2 3
        console.log(item[1]);    //apple banana orange tomato 
}
			
console.log("遍历索引和值")
for(let [index,val] of arr.entries()){//遍历索引和值
	console.log(index,val);
        //0 "apple"
        //1 "banana"
        //2 "orange"
        //3 "tomato"
}