js实现 $.each

实现 jQuery 的 $.each 方法

在原生 JavaScript 中，可以通过以下方式实现类似 jQuery 的 $.each 方法。该方法用于遍历数组或对象，并对每个元素执行回调函数。

实现代码

function each(collection, callback) {
    if (Array.isArray(collection) || isArrayLike(collection)) {
        for (let i = 0; i < collection.length; i++) {
            callback.call(collection[i], i, collection[i]);
        }
    } else if (typeof collection === 'object') {
        for (let key in collection) {
            if (collection.hasOwnProperty(key)) {
                callback.call(collection[key], key, collection[key]);
            }
        }
    }
}

// 辅助函数：检查是否为类数组对象（如 arguments、NodeList 等）
function isArrayLike(obj) {
    return obj != null && typeof obj === 'object' && 'length' in obj && !isNaN(obj.length);
}

使用方法

// 遍历数组
each([1, 2, 3], function(index, value) {
    console.log(index, value);
});

// 遍历对象
each({ a: 1, b: 2 }, function(key, value) {
    console.log(key, value);
});

功能说明

• 数组或类数组对象：回调函数的参数为 (index, value)，类似于 Array.prototype.forEach。
• 普通对象：回调函数的参数为 (key, value)，遍历对象的可枚举属性。
• 上下文绑定：回调函数中的 this 指向当前遍历的元素（与 jQuery 行为一致）。

注意事项

• 该方法不会处理稀疏数组（如 [1, , 3]）中的空位。
• 使用 hasOwnProperty 确保只遍历对象自身的属性，而非原型链上的属性。