ES5数组五个迭代方法

本文链接： https://blog.csdn.net/weixin_45674894/article/details/102608769

ES5迭代方法

ES5主要新增了5个迭代方法

forEach()

var arr = [11, 22, 33, 44];

//形参可以传三个(有需要则传,不需要则不传)
//v: 数组中每一项
//i: 数组中每一项的下标
//arr1: 数组本身
arr.forEach(function (v, i, arr1) {
	// 遍历数组每一项,输出4个结果
    console.log(v); //11, 22, 33, 44
    console.log(i); //0, 1, 2, 3
    console.log(arr1);//[11, 22, 33, 44] 输出四遍数组本身
})

//通过箭头函数输出数组中每个元素的2倍值
arr.forEach(v => console.log(v * 2));//22 44 66 88

小结:
1.代码简洁,配合箭头函数食用更佳
2.不会产生额外的全局变量(例如:for循环遍历会产生额外变量i)

map()

//map方法会返回一个新数组， 新数组中存放的是每个元素被回调函数处理结果 

var arr = [11, 22, 33, 44];

//形参可以传三个(有需要则传,不需要则不传)
//v: 数组中每一项
//i: 数组中每一项的下标
//arr1: 数组本身
arr.map(function (v, i, arr1) {
    // 遍历数组每一项,输出4个结果
    console.log(v); //11, 22, 33, 44
    console.log(i); //0, 1, 2, 3
    console.log(arr1);//[11, 22, 33, 44] 输出四遍数组本身
})

//通过map()将数组中每个元素的2倍值,用变量接收返回的新数组
var arr2 = arr.map(function (v) {
    return v * 2;
});
console.log(arr2);//[22, 44, 66, 88]

//箭头函数写法
var arr3 = arr.map(v => v * 2);
console.log(arr2);//[22, 44, 66, 88]

小结:
1.和forEach()用法大致相同,唯一区别在于map()有返回值,可以用return接收新数组
2.map() 适用于收集处理结果情况

filter()

//filter 会返回一个新数组， 数组中存放是满足条件元素

var arr = [11, 22, 33, 44];

//形参可以传三个(有需要则传,不需要则不传)
//v: 数组中每一项
//i: 数组中每一项的下标
//arr1: 数组本身
arr.filter(function (v, i, arr1) {
    // 遍历数组每一项,输出4个结果
    console.log(v); //11, 22, 33, 44
    console.log(i); //0, 1, 2, 3
    console.log(arr1);//[11, 22, 33, 44] 输出四遍数组本身
})

//通过filter()将数组中>11的值过滤出来,用变量接收返回的新数组
var arr2 = arr.filter(function (v) {
    return v > 11;
})
console.log(arr2);//[22, 33, 44]

//箭头函数写法
var arr3 = arr.filter(v => v > 11)
console.log(arr3);//[22, 33, 44]

小结:
filter()会将满足条件的值过滤出来,放入新数组

some()和every()

// some();  判断数组中是否有元素满足条件
// every(); 判断是否数组中每一个元素都满足条件

// some(function (v, i, arr1) {});
// every(function (v, i, arr1) {});  

var arr = [11, 22, 33, 44];

// 判断数组中是否有>22的值
var res1 = arr.some(function (v) {
    return v > 22;
});
console.log(res1);//true

//箭头函数写法
var res2 = arr.some(v => v > 22);
console.log(res2);//true


// 判断数组中每一项值是否都>22
var res3 = arr.every(function (v) {
    return v > 22;
});
console.log(res3);//false

//箭头函数写法
var res4 = arr.every(v => v > 22);
console.log(res4);//false

小结:
some() 判断的是是否有满足的项,返回值为布尔类型
every() 判断的是,每一项是否都满足条件,返回值为布尔类型

以上就ES6中数组常用的一些方法
戳这里了解更多ES3、ES5、ES6数组方法

ES5数组五个迭代方法

ES5迭代方法

猜你喜欢