js实现 $.each
$.each 的实现方法
在 JavaScript 中，$.each 是 jQuery 中的一个常用方法，用于遍历数组或对象。以下是几种实现方式：
原生 JavaScript 实现
使用原生 JavaScript 可以实现类似 $.each 的功能。以下是一个简单的实现：
function each(collection, callback) {
if (Array.isArray(collection)) {
for (let i = 0; i < collection.length; i++) {
callback.call(collection[i], i, collection[i]);
}
} else {
for (let key in collection) {
if (collection.hasOwnProperty(key)) {
callback.call(collection[key], key, collection[key]);
}
}
}
}使用 Array.prototype.forEach
对于数组，可以直接使用 Array.prototype.forEach 方法：
[1, 2, 3].forEach(function(item, index) {
console.log(index, item);
});使用 Object.keys 和 forEach
对于对象，可以结合 Object.keys 和 forEach 实现遍历：
const obj = { a: 1, b: 2 };
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});使用 ES6 的 for...of 和 for...in
ES6 提供了更简洁的语法来遍历数组和对象：
// 数组
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 对象
const obj = { a: 1, b: 2 };
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}注意事项
- 如果是数组，确保使用
Array.isArray检查类型。 - 如果是对象，使用
hasOwnProperty避免遍历原型链上的属性。 - 回调函数的参数顺序通常是
(index, value)或(key, value)。
以上方法可以根据实际需求选择使用。
