这里会有前后端的处理。
起源是后端将两组数据合到了一起，然后用一个字段去区分。
但是到了前端展示的时候还是不同的两个属性。然后将这两个数据分开来。
数据例：
// 将数据处理分开为老师组和学生组
const user = [
{name: "lilei", type: "student", age: 20, tel: 110},
{name: "hanmeimei", type: "student", age: 18, tel: 119},
{name: "tom", type: "student", age: 5, tel: 111},
{name: "jerry", type: "student", age: 4, tel: 112},
{name: "UncleWang", type: "teacher", age: 35, tel: 120},
{name: "sam", type: "teacher", age: 40, tel: 666}
];
前端处理
方法1： for循环，创建两个新数组接收
console.log("for 循环")
let user1 = user;
let stu1 = [];
let tea1 = [];
for (let i = 0 ; i < user1.length; i ++) {
if (user1[i].type === "student") {
stu1.push(user1[i]);
} else {
tea1.push(user1[i]);
}
}
console.log(stu1);
console.log(tea1);
结果如下，分开了正确
方法二：用filter方法
console.log("filter")
let stu2 = [];
let tea2 = [];
stu2 = user1.filter(i => i.type === "student");
tea2 = user1.filter(i => i.type !== "student");
console.log(stu2);
console.log(tea2);
结果如下，正确
但是这个就会进行了两个循环处理，肯定性能会差。
方法三
前面都是创建了2个新数组来接收，如果这两个数组本来就存在不想在创建新数组的话那就需要在原数组上进行处理了
console.log("改变原数组");
let stu3 = [];
for (let i = 0; i < user1.length ; i ++ ) {
if(user1[i].type === "student") {
stu3.push(user1[i]);
user1.splice(i, 1);
}
}
console.log(user1);
console.log(stu3);
结果
可以看出结果是不对的，因为我们的index在增长的时候，实际上我们remove了一些数据，但是index是没有更新的，这就是在循环操作数组的时候不要改变数组的长度。这种是会出问题的。当然我们可以改进下如下：
console.log("改变原数组2");
let stu4 = [];
for (let i = user1.length - 1 ; i >= 0 ; i --) {
if(user1[i].type === "student") {
stu4.push(user1[i]);
user1.splice(i, 1);
}
}
console.log(user1);
console.log(stu4);
输入结果
正确
后端处理
后端数据库出来的数据是list，我们可以利用上面改进的来进行处理如下
List<User> teachers = User.find.findList();
List<User> students = new ArrayList<User>();
for (int i = teachers.size() - 1 ; i >= 0 ; i -- ) {
if ( teachers.get(i).getType().equals("student")) {
students.add( teachers.remove(i));
}
}
循环内部有remove之类的操作能改变list的size的尽量不要使用。这里可以使用迭代器Iterator
List<User> teachers = User.find.findList();
List<>User students = new ArrayList<User>();
Iterator<User> iterator = teachers.iterator();
while (iterator.hasNext())
{
User user = iterator.next();
if (user.getType().equals("student")) {
students.add(user);
iterator.remove();
}
}
迭代器是指向list的，所以迭代器的操作list对象也会发生对应的变化。
网友评论