Backbone.js集合操作 #

一、添加操作 #

1.1 add方法 #

javascript 
var users = new Users();

users.add({ name: '张三' });
users.add({ name: '李四' });

console.log(users.length);

1.2 add选项 #

javascript 
var users = new Users();

users.add({ id: 1, name: '张三' });

users.add({ id: 1, name: '李四' }, {
    merge: true
});

console.log(users.at(0).get('name'));

add选项：

选项 默认值 说明
at null 指定插入位置
merge false 是否合并已存在的模型
silent false 是否静默添加
sort true 是否触发排序
parse false 是否解析数据

1.3 添加到指定位置 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 3, name: '王五' }
]);

users.add({ id: 2, name: '李四' }, { at: 1 });

users.each(function(user) {
    console.log(user.id, user.get('name'));
});

1.4 批量添加 #

javascript 
var users = new Users();

users.add([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
]);

console.log(users.length);

1.5 合并添加 #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 }
]);

users.add({ id: 1, age: 26 }, { merge: true });

var user = users.get(1);
console.log(user.get('name'));
console.log(user.get('age'));

1.6 push和unshift #

javascript 
var users = new Users([
    { id: 1, name: '张三' }
]);

users.push({ id: 2, name: '李四' });
users.unshift({ id: 0, name: '王五' });

console.log(users.at(0).get('name'));
console.log(users.at(2).get('name'));

二、删除操作 #

2.1 remove方法 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var user = users.get(1);
users.remove(user);

console.log(users.length);

2.2 通过ID删除 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

users.remove(1);

console.log(users.length);

2.3 批量删除 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
]);

users.remove([1, 2]);

console.log(users.length);

2.4 remove选项 #

javascript 
var users = new Users([{ id: 1, name: '张三' }]);

users.on('remove', function() {
    console.log('模型已移除');
});

users.remove(1, { silent: true });

2.5 pop和shift #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var last = users.pop();
var first = users.shift();

console.log(last.get('name'));
console.log(first.get('name'));
console.log(users.length);

2.6 reset方法 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

users.reset([
    { id: 3, name: '王五' }
]);

console.log(users.length);
console.log(users.at(0).get('name'));

2.7 清空集合 #

javascript 
var users = new Users([
    { id: 1, name: '张三' }
]);

users.reset();

console.log(users.length);

三、更新操作 #

3.1 set方法 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

users.set([
    { id: 1, name: '张三（已更新）' },
    { id: 3, name: '王五' }
]);

console.log(users.length);
console.log(users.get(1).get('name'));
console.log(users.get(3).get('name'));

3.2 set选项 #

javascript 
users.set(models, {
    add: true,
    remove: true,
    merge: true
});

set选项：

选项 默认值 说明
add true 是否添加新模型
remove true 是否移除不存在的模型
merge true 是否合并已存在的模型
parse false 是否解析数据
silent false 是否静默操作

3.3 只添加不删除 #

javascript 
var users = new Users([
    { id: 1, name: '张三' }
]);

users.set([
    { id: 1, name: '张三（已更新）' },
    { id: 2, name: '李四' }
], { remove: false });

console.log(users.length);

3.4 只更新不添加 #

javascript 
var users = new Users([
    { id: 1, name: '张三' }
]);

users.set([
    { id: 1, name: '张三（已更新）' },
    { id: 2, name: '李四' }
], { add: false });

console.log(users.length);
console.log(users.get(1).get('name'));

四、查询操作 #

4.1 get方法 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var user = users.get(1);
console.log(user.get('name'));

4.2 getByCid #

javascript 
var users = new Users();
var user = users.add({ name: '张三' });

var found = users.get(user.cid);
console.log(found.get('name'));

4.3 at方法 #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var user = users.at(0);
console.log(user.get('name'));

4.4 first和last #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
]);

console.log(users.first().get('name'));
console.log(users.last().get('name'));

4.5 find #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 25 }
]);

var user = users.find(function(user) {
    return user.get('age') === 25;
});

console.log(user.get('name'));

4.6 filter #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 25 }
]);

var youngUsers = users.filter(function(user) {
    return user.get('age') < 30;
});

console.log(youngUsers.length);

4.7 where #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25, role: 'user' },
    { id: 2, name: '李四', age: 30, role: 'admin' },
    { id: 3, name: '王五', age: 25, role: 'user' }
]);

var result = users.where({ age: 25 });
console.log(result.length);

var exact = users.where({ age: 25, role: 'user' });
console.log(exact.length);

4.8 findWhere #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
]);

var user = users.findWhere({ age: 25 });
console.log(user.get('name'));

4.9 contains/includes #

javascript 
var users = new Users([
    { id: 1, name: '张三' }
]);

var user = users.at(0);

console.log(users.contains(user));
console.log(users.includes(user));

4.10 indexOf #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var user = users.get(2);
var index = users.indexOf(user);

console.log(index);

五、遍历操作 #

5.1 each #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

users.each(function(user, index) {
    console.log(index + ': ' + user.get('name'));
});

5.2 map #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

var names = users.map(function(user) {
    return user.get('name');
});

console.log(names);

5.3 reduce #

javascript 
var products = new Products([
    { id: 1, name: '商品A', price: 100 },
    { id: 2, name: '商品B', price: 200 },
    { id: 3, name: '商品C', price: 300 }
]);

var total = products.reduce(function(sum, product) {
    return sum + product.get('price');
}, 0);

console.log(total);

5.4 pluck #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
]);

var names = users.pluck('name');
var ages = users.pluck('age');

console.log(names);
console.log(ages);

5.5 invoke #

javascript 
var User = Backbone.Model.extend({
    getDisplayName: function() {
        return this.get('name') + ' (' + this.get('age') + ')';
    }
});

var Users = Backbone.Collection.extend({
    model: User
});

var users = new Users([
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
]);

var names = users.invoke('getDisplayName');
console.log(names);

六、统计操作 #

6.1 size #

javascript 
var users = new Users([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

console.log(users.size());
console.log(users.length);

6.2 countBy #

javascript 
var users = new Users([
    { id: 1, name: '张三', role: 'user' },
    { id: 2, name: '李四', role: 'admin' },
    { id: 3, name: '王五', role: 'user' }
]);

var counts = users.countBy(function(user) {
    return user.get('role');
});

console.log(counts);

6.3 groupBy #

javascript 
var users = new Users([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 25 }
]);

var grouped = users.groupBy(function(user) {
    return user.get('age');
});

console.log(Object.keys(grouped));
console.log(grouped[25].length);

6.4 partition #

javascript 
var users = new Users([
    { id: 1, name: '张三', active: true },
    { id: 2, name: '李四', active: false },
    { id: 3, name: '王五', active: true }
]);

var partitioned = users.partition(function(user) {
    return user.get('active');
});

console.log('活跃用户:', partitioned[0].length);
console.log('非活跃用户:', partitioned[1].length);

七、判断操作 #

7.1 isEmpty #

javascript 
var users = new Users();

console.log(users.isEmpty());

users.add({ name: '张三' });

console.log(users.isEmpty());

7.2 every #

javascript 
var users = new Users([
    { id: 1, name: '张三', active: true },
    { id: 2, name: '李四', active: true }
]);

var allActive = users.every(function(user) {
    return user.get('active');
});

console.log(allActive);

7.3 some #

javascript 
var users = new Users([
    { id: 1, name: '张三', active: true },
    { id: 2, name: '李四', active: false }
]);

var hasActive = users.some(function(user) {
    return user.get('active');
});

console.log(hasActive);

八、实用示例 #

8.1 批量更新 #

javascript 
var Users = Backbone.Collection.extend({
    model: User,
    url: '/api/users',
    
    batchUpdate: function(updates) {
        var self = this;
        
        updates.forEach(function(update) {
            var model = self.get(update.id);
            if (model) {
                model.set(update);
            }
        });
        
        return $.ajax({
            url: this.url + '/batch',
            method: 'PUT',
            data: JSON.stringify(updates),
            contentType: 'application/json'
        });
    }
});

8.2 批量删除 #

javascript 
var Users = Backbone.Collection.extend({
    model: User,
    url: '/api/users',
    
    batchRemove: function(ids) {
        var self = this;
        
        ids.forEach(function(id) {
            var model = self.get(id);
            if (model) {
                self.remove(model);
            }
        });
        
        return $.ajax({
            url: this.url + '/batch',
            method: 'DELETE',
            data: JSON.stringify({ ids: ids }),
            contentType: 'application/json'
        });
    }
});

8.3 批量创建 #

javascript 
var Users = Backbone.Collection.extend({
    model: User,
    url: '/api/users',
    
    batchCreate: function(modelsData) {
        var self = this;
        
        return $.ajax({
            url: this.url + '/batch',
            method: 'POST',
            data: JSON.stringify(modelsData),
            contentType: 'application/json',
            success: function(response) {
                self.add(response);
            }
        });
    }
});

九、总结 #

9.1 操作方法分类 #

类别 方法
添加 add, push, unshift
删除 remove, pop, shift, reset
更新 set, merge
查询 get, at, find, filter, where
遍历 each, map, reduce, pluck
统计 size, countBy, groupBy
判断 isEmpty, every, some

9.2 最佳实践 #

  1. 使用 set 方法智能更新集合
  2. 使用 reset 批量替换数据
  3. 合理使用事件监听
  4. 利用Underscore方法简化代码
  5. 注意内存管理，及时解绑事件
最后更新：2026-03-28