前言

刚好最近的工作都是前端直接从数据集拿数据然后直接转换成前端所需的格式，所以常常会出现对数据的遍历处理等等，比如数组的forEach、for in、map等。本文将从方法作用到运用场景作一个具体的总结。

数组

数组（Array）是一种类列表对象，它的原型（prototype）中提供了遍历和修改元素的相关操作。以下方法用Array.prototype.方法名()描述。

Array.prototype.filter()

• 描述：筛选方法，传入一个筛选方法，遍历返回每一项满足传入条件的新数组。
• 参数：callBackFn函数（三个参数 元素值，元素的索引，原数组）。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c", 11, 22, 66];

const filterArray = arr.filter(( item, index, array)=> {
    // callBack 代码
    return index === 1 || typeof item === 'number'; // 遍历数组，返回序号为 1 或者 项为数字的新数组
});

console.log(filterArray);  // ["b", 11, 22, 66]

• 场景：用于筛选出满足条件的所有数据；例如从所有的员工收入条件中，筛选出所有收入条件 大于等于 8000 的所有员工。

Array.prototype.map()

• 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
• 参数：callBackFn函数（三个参数 元素值，元素的索引，原数组）。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", 11, 22, 66, false];

const mapArray = arr.map(( item, index, array)=> {
    // callBack 代码
    const type = typeof item;
    if(type === 'string') {
        return item + index;
    }else if(type === 'number') {
        return item + 1;
    }else {
        return 'not number'
    }
});

console.log(mapArray);  // ["a0", "b1", 12, 23, 67, "not number"]

• 场景：用于规范化数组的每一项，将数组的每一项通过改造函数改造后传出。

Array.prototype.forEach()

• 对数组的每个元素执行一次给定的函数，没有返回值。
• 参数：callBackFn函数（三个参数 元素值，元素的索引，原数组）。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", 11, 22];

const reformArray = [];
arr.forEach(( item, index, array)=> {
    // callBack 代码
    reformArray.push(item)
});

console.log(reformArray);  // ["a", "b", 11, 22]

• 场景：一般常用于对数组的元素进行处理时（例如：增加元素，元素值改变），可以使用这个函数。

Array.prototype.entries()

• 描述：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c"];
const iterator = arr.entries();
// undefined

for (let e of iterator) {
    console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

• 场景：entries() 方法不能直接遍历出数组的每一项，但是可以使用 for of 等方法遍历该对象。

Array.prototype.keys()

• 描述：返回一个包含数组中每个索引键的 Array Iterator 对象。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c"];
const keys = arr.keys();

console.log([..keys]); // [0, 1, 2]

• 场景：需要使用数组的索引，可以将数组的索引转换为数组对象。

Array.prototype.values()

• 描述：返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c"];
const values = arr.values();
for(let item of values) {
    console.log(item); // "a", "b", "c"
}

• 场景：需要使用数组的每一项，有多种替代方法。

Array.prototype.every()

• 描述：测试一个数组内的所有元素是否都能通过某个指定函数的测试。返回一个布尔值。
• 参数：callBackFn函数（三个参数 元素值，元素的索引，原数组）。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c"];

const ifAdopt = arr.every(( item, index, array)=> {
    // callBack 代码
    return item === "a" || "b" || "c"; // 遍历数组每一项都满足此表达式就返回true
});

console.log(ifAdopt);  // true

PS：空数组始终返回 true

• 场景：检测某个集合中的每一项数据，是否都满足某一条件；比如某个班的年龄或身高都在最低标准值以上；某个企业每个月收入都高于某值等。

Array.prototype.some()

• 描述：测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
• 参数：callBackFn函数（三个参数 元素值，元素的索引，原数组）。
• 是否改变原数组：不改变原数组。
• 示例：

const arr = ["a", "b", "c"];

const ifAdopt = arr.some(( item, index, array)=> {
    // callBack 代码
    return item === "a"; // 只要有一项满足等于a 就停止向下遍历，直接返回true
});

console.log(ifAdopt);  // true

PS：空数组始终返回 false

• 场景：检测某个集合中的每一项数据，是否至少有一项满足一个条件；某个企业每个月收入至少有一个高于某值等。

Array.prototype.reduce()

• 描述：对数组中的每个元素按序执行一个提供的 reduce 函数，每一次运行 reduce 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
• 参数：
  • callBackFn函数（四个参数 上次调用函数的返回值，当前元素值，当前元素的索引，原数组）;
  • initialValue（如果传入则从第一个元素开始遍历，不传入从第二个元素开始遍历）
• 是否改变原数组：不改变原数组。
• 示例：

const arr = [1, 2, 3];
const initialValue = 0;
const reduceV= arr.reduce(( preV, nowV, index, array)=> {
    // callBack 代码
    return preV + nowV; // 以前执行函数的返回值 + 当前值
}, initialValue);

console.log(reduceV);  // true

• 场景：使用于累加，或者需要拿到每次执行某函数的值