js几个易混淆方法速学

//  Array.prototype.filter()
// filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
// array filter 对于索引值下为undefined 或者不存在的值过滤的时候会直接跳过。
var arr = [
    { id: 15 },
    { id: -1 },
    { id: 0 },
    { id: 3 },
    { id: 12.2 },
    {},
    { id: null },
    { id: NaN },
    { id: "undefined" },
];

var invalidEntries = 0;

function isNumber(obj) {
    return obj !== undefined && typeof obj === "number" && !isNaN(obj);
}

function filterByID(item) {
    if (isNumber(item.id) && item.id !== 0) {
        return true;
    }
    invalidEntries++;
    return false;
}

var arrByID = arr.filter(filterByID);

console.log("Filtered Array\n", arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("Number of Invalid Entries = ", invalidEntries);
// Number of Invalid Entries = 5

// 会将满足条件的数组元素返回给新数组
var array0 = [1, 2, 3, undefined];
var array00 = array0.filter((item) => {
    return item;
});
console.log(array00); // [ 1, 2, 3 ]
var array000 = array0.filter((item) => {
    return item > 1;
}); // [ 2, 3 ]
console.log(array000);

// Array.prototype.map()
// map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
// 会将运算结果返回给新数组
var array1 = [1, 2, 3, undefined];
var array11 = array1.map((item) => {
    return item;
});
console.log(array11); // [ 1, 2, 3, undefined ]
var array111 = array1.map((item) => {
    return item > 1;
});
console.log(array111); // [ false, true, true, false ]

// Array.prototype.reduce()
// reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
// 第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。
const array6 = [1, 2, 3, 4];

// 5 + 1 + 2 + 3 + 4
const initialValue = 5;
const sumWithInitial = array6.reduce(
    (previousValue, currentValue) => previousValue + currentValue,
    initialValue
);

console.log(sumWithInitial); // 15

const array2 = [1, 2, 3, 4];

// 5 + 1 + 2 + 3 + 4
const initialValue2 = 5;
const sumWithInitial2 = array6.reduce(
    (previousValue, currentValue, currentIndex, array) => {
        console.log("currentValue", currentValue); // 分别是1,2,3,4
        console.log("currentIndex", currentIndex); // 分别是 0,1,2,3
        console.log("array", array); // 用于遍历的数组，[ 1, 2, 3, 4 ]
        return previousValue + currentValue;
    },
    initialValue2
);

console.log(sumWithInitial2); // 15

// Array.prototype.every()
// every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
// 只要有一个数不满足，则返回false
// 若收到一个空数组，此方法在任何情况下都会返回 true。
const isBelowThreshold = (currentValue) => currentValue < 40;
const array3 = [1, 30, 39, 29, 10, 13];
console.log(array3.every(isBelowThreshold)); // true
const array4 = [1, 42, 39, 29, 10, 13];
console.log(array4.every(isBelowThreshold)); // false

// Array.prototype.some()
// some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
// some 只要有一个值满足条件，就返回 true
const array5 = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array5.some(even)); // true