数组的循环
一、forEach（）
- 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
- 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index, arr) {
console.log(item, index, arr);
// item:遍历的数组内容,index:第对应的数组索引，arr:数组本身。
});
二、map（）
- 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
- 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function (item) {
return item * item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
三、filter（）
- “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
- 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.filter(function (x, index) {
return x % 2 == 0 || index >= 2;
});
console.log(arr2); // [2,3,4,5]
四、reduce（）与reduceRight()
- x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
- y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素
- 最后一个数组本身
// reduce（）
let array = [1, 2, 3, 4, 5];
let arrayNew = array.reduce((x, y) => {
console.log("x===>" + x);
console.log("y===>" + y);
console.log("x+y===>", Number(x) + Number(y));
return x + y;
});
console.log("arrayNew", arrayNew); // 15
console.log(array); // [1, 2, 3, 4, 5]
// reduceRight() 只是执行数组顺序为倒序
五、every（）
- 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true否是为false
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function (x) {
return x < 8;
});
console.log(arr2); //true
var arr3 = arr.every(function (x) {
return x < 3;
});
console.log(arr3); // false
六、some（）
- 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true,否则为false
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x > 6;
});
console.log(arr3); // false
七、find（）与findIndex（）
- 该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。
- 在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。findIndex返回-1
// find()
let arr = [1, 2, 3, 4, 5];
let res = arr.find(function (val, index, arr) {
return val > 3;
});
console.log(res); //4
// findIndex
let arr = [1, 2, 3, 4, 5];
let res = arr.findIndex(function (val, index, arr) {
return val > 3;
});
console.log(res); //3
八、 for in
- for…in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSON
var arr = [
{
id: 1, name: "程序员" },
{
id: 2, name: "掉头发" },
{
id: 3, name: "你不信" },
{
id: 4, name: "薅一下" },
];
var arrNew = [];
for (var key in arr) {
console.log(key);
console.log(arr[key]);
arrNew.push(arr[key].id);
}
console.log(arrNew);
九、 for of
- for…of循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSON
var arr = [
{
name: "程序员" },
{
name: "掉头发" },
{
name: "你不信" },
{
name: "薅一下" },
];
// key()是对键名的遍历；
// value()是对键值的遍历；
// entries()是对键值对的遍历；
for (let item of arr) {
console.log(item);
}
// 输出数组索引
for (let item of arr.keys()) {
console.log(item);
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
console.table(item + ":" + val);
}
十、 for
原生实现方式
var arr = [
{
name: "程序员" },
{
name: "掉头发" },
{
name: "你不信" },
{
name: "薅一下" },
];
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
console.log(element )
}
总结
方法1~7为ES6新语法 IE9及以上才支持。不过可以通过babel转义支持IE低版本。以上均不改变原数组。
转载：https://blog.csdn.net/weixin_45176415/article/details/116790381
查看评论