jQuery源码分析-03构造jQuery对象-工具函数

当我们使用 jQuery 的时候，通过调用 jQuery() 函数可以创建 jQuery 对象。而这个函数本身又是通过调用 jQuery.fn.init() 函数来实现的。在 jQuery.fn.init() 函数内部，实现了很多工具函数。本篇攻略主要分析这些工具函数。

1. 工具函数概览

在构造 jQuery 对象的过程中，需要用到一系列的工具函数。这些工具函数包括：

1. makeArray：将类数组转换为数组。
2. merge：将两个数组合并成一个数组。
3. grep：对数组进行过滤。
4. map：对数组进行遍历，并返回一个处理后的新数组。
5. slice：提取数组的一部分。
6. indexOf：返回目标数据在数组中的索引值。

这些函数的实现都相对简单，但却是构造 jQuery 对象的关键。

2. 工具函数实现

2.1 makeArray 函数

makeArray 函数可以将类数组转换为数组。可以使用它将 arguments 对象转换为真正的数组。

function makeArray(arr, results) {
    var ret = results || [];

    if (arr != null) {
        if (isArrayLike(Object(arr))) {
            jQuery.merge(ret,
                typeof arr === "string" ?
                [arr] : arr
            );
        } else {
            push.call(ret, arr);
        }
    }

    return ret;
}

上面的代码实现了 makeArray 函数。其中，ret 表示目标数组，arr 是需要转换的类数组，results 用于传递目标数组。

2.2 merge 函数

merge 函数可以将两个数组合并成一个数组。我们经常会使用这个函数来合并多个节点集。

function merge(first, second) {
    var len = +second.length,
        j = 0,
        i = first.length;

    for (; j < len; j++) {
        first[i++] = second[j];
    }

    first.length = i;

    return first;
}

上面的代码实现了 merge 函数。其中，first 表示第一个数组，second 表示第二个数组。

2.3 grep 函数

grep 函数可以对数组进行过滤，返回筛选后的新数组。可以使用它来根据特定条件获取数组中的子集。

function grep(elems, callback, invert) {
    var callbackInverse,
        matches = [],
        i = 0,
        length = elems.length,
        callbackExpect = !invert;

    // 遍历数组
    for (; i < length; i++) {
        callbackInverse = !callback(elems[i], i); // 判断是否匹配成功
        if (callbackInverse !== callbackExpect) {
            matches.push(elems[i]);
        }
    }

    return matches;
}

上面的代码实现了 grep 函数。其中，elems 表示目标数组，callback 表示用来匹配的回调函数，invert 表示返回的结果是否反转。

2.4 map 函数

map 函数可以对数组进行遍历，并返回一个处理后的新数组。我们通常使用它来对数组中的元素进行处理（比如字符串拼接、数据统计等）。

function map(elems, callback, arg) {
    var length, value,
        i = 0,
        ret = [];

    if (isArrayLike(elems)) {
        length = elems.length;
        for (; i < length; i++) {
            value = callback(elems[i], i, arg);
            if (value != null) {
                ret.push(value);
            }
        }
    } else {
        for (i in elems) {
            value = callback(elems[i], i, arg);
            if (value != null) {
                ret.push(value);
            }
        }
    }

    return concat.apply([], ret);
}

上面的代码实现了 map 函数。其中，elems 表示目标数组，callback 表示处理每个元素的回调函数，arg 用于传递参数。

2.5 slice 函数

slice 函数可以提取数组的一部分。我们通常使用它来截取数组中的若干元素。

function slice(elem, start, end) {
    var len = elem.length;

    if (start == null) {
        start = 0;
    }
    if (end == null || end > len) {
        end = len;
    }

    if (start < 0) {
        start += len;
    }
    if (end < 0) {
        end += len;
    }

    var arr = [];

    for (var i = start; i < end; i++) {
        arr.push(elem[i]);
    }

    return arr;
}

上面的代码实现了 slice 函数。其中，elem 表示目标数组，start 和 end 分别表示起始位置和结束位置。

2.6 indexOf 函数

indexOf 函数可以返回目标数据在数组中的索引值。它可以用来判断一个元素是否存在于数组中（如果返回 -1 则表示不存在）。

function inArray(elem, arr, i) {
    return arr == null ? -1 : indexOf.call(arr, elem, i);
}

上面的代码实现了 indexOf 函数。其中，elem 为目标数据，arr 为目标数组，i 可选参数，表示搜索起点。

3. 工具函数示例

下面的示例介绍了如何使用上面的部分工具函数。

3.1 使用 grep 函数

假设我们有一个数组 arr1，里面是一组数字，我们想要获取其中所有偶数构成的数组 arr2。可以使用 grep 函数：

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = $.grep(arr1, function(n, i) {
    return n % 2 === 0;
});
console.log(arr2); // [2, 4, 6, 8, 10]

在上面的代码中，$.grep 表示调用 jQuery 的 grep 函数，其中匿名函数用来判断一个元素是否为偶数，arr2 是执行完 grep 后的结果。

3.2 使用 map 函数

假设我们有一个数组 arr1，里面是一组数字，我们想要计算这些数字的累计和。可以使用 map 函数：

var arr1 = [1, 2, 3, 4, 5];
var total = $.map(arr1, function(n) {
    return n;
}).reduce(function(a, b) {
    return a + b;
});
console.log(total); // 15

在上面的代码中，$.map 表示调用 jQuery 的 map 函数，其中匿名函数用来返回每个元素本身，reduce 函数用来计算所有元素的累计和。