在Ionic3中如何按firstName对数组列表进行排序（TS场景）

嘿，这事儿很简单，你只需要在给this.items赋值完成后，利用JavaScript数组的sort()方法搭配一个自定义比较函数，就能轻松实现按firstName字段排序啦。

修改后的完整代码 #

initializeItems(){
 this.items = [
 { avatar: '../../assets/imgs/profile1.jpg', firstName:'Sterlian', lastName:'Victorian', date:new Date().toLocaleDateString(), chat:'Life is beautiful...', component: TetherPage },
 { avatar: '../../assets/imgs/profile2.jpg', firstName:'Alexis', lastName:' Fournier ', date:'Yesterday', chat:'If you are going to use a passage...', component: TetherPage },
 { avatar: '../../assets/imgs/profile3.jpg', firstName:'Alma', lastName:' Henry ', date:'10/1/2019', chat:'There are many variations of pass', component: TetherPage },
 { avatar: '../../assets/imgs/profile4.jpg', firstName:'Clara', lastName:' Damian ', date:'Today', chat:'nice to see you after log time ', component: TetherPage },
 { avatar: '../../assets/imgs/profile5.jpg', firstName:'James', lastName:' Charlie ', date:'Yesterday', chat:'Hi!..Have a nice day', component: TetherPage },
 { avatar: '../../assets/imgs/profile6.jpg', firstName:'Ellen', lastName:' Rhystem ', date:'2/1/2019', chat:'It is long establish fact...', component: TetherPage },
 { avatar: '../../assets/imgs/profile7.jpg', firstName:'Irene', lastName:' Reeceem ', date: new Date().toLocaleDateString(), chat:'I think we can all do with a bit more spark', component: TetherPage },
 { avatar: '../../assets/imgs/profile8.jpg', firstName:'Thomas', lastName:' Joe ', date:'Yesterday', chat:'you’re fired up ready to have the best day ever…', component: TetherPage },
 { avatar: '../../assets/imgs/profile9.jpg', firstName:'Charlie', lastName:' Kyle ', date:'3:45 am', chat:'Create the highest, grandest vision possible for your life, because you become what you believe', component: TetherPage },
 { avatar: '../../assets/imgs/profile10.jpg', firstName:'Jacob', lastName:' Henry ', date: new Date().toLocaleDateString(), chat:'Wherever life plants you, bloom with grace', component: TetherPage },
 { avatar: '../../assets/imgs/profile11.jpg', firstName:'Harry', lastName:' Callum ', date:'1/2/2019', chat:'One at a time. Just let your pile of good things grow', component: TetherPage },
 { avatar: '../../assets/imgs/profile12.jpg', firstName:'Oliver', lastName:' Jake ', date: new Date().toLocaleDateString(), chat:'Little by little, day by day, what is mean for you WILL find its way”', component: TetherPage },
 { avatar: '../../assets/imgs/profile13.jpg', firstName:'Jack', lastName:' Connor ', date:'Yesterday', chat:'Learn from yesterday, live for today, hope for tomorrow', component: TetherPage },
 { avatar: '../../assets/imgs/profile14.jpg', firstName:'Julia', lastName:' Margaret ', date: new Date().toLocaleDateString(), chat:'Take time to do what makes your soul happy', component: TetherPage },
 { avatar: '../../assets/imgs/profile15.jpg', firstName:'Jack', lastName:' Tracy ', date:'Today', chat:'Be so happy that when others look at you, they become happy too', component: TetherPage }
 ];

 // 核心排序逻辑：按firstName升序排列
 this.items.sort((a, b) => {
   // 转成小写+去空格，避免大小写/前后空格干扰排序结果
   const firstNameA = a.firstName.trim().toLowerCase();
   const firstNameB = b.firstName.trim().toLowerCase();
   
   if (firstNameA < firstNameB) {
     return -1; // a排在b前面
   }
   if (firstNameA > firstNameB) {
     return 1; // b排在a前面
   }
   return 0; // 名字相同时保持原顺序
 });

 this.modifiedData = JSON.parse(JSON.stringify(this.items));
}

关键细节说明 #

• 兼容特殊情况：代码里加了trim()和toLowerCase()，一是清理名字前后可能存在的冗余空格，二是避免大小写差异导致排序错误（比如"Alexis"和"alexis"不会被当成不同的字符串）。
• 原地排序特性：sort()方法会直接修改原数组，所以不需要重新给this.items赋值，调用后数组就已经是排好序的状态了。
• 快速切换倒序：如果想要按firstName降序排列，只需要把比较函数里的返回值反过来就行：

  this.items.sort((a, b) => {
    const firstNameA = a.firstName.trim().toLowerCase();
    const firstNameB = b.firstName.trim().toLowerCase();
    if (firstNameA > firstNameB) {
      return -1;
    }
    if (firstNameA < firstNameB) {
      return 1;
    }
    return 0;
  });
  

内容的提问来源于stack exchange，提问作者Amey