将数组对象根据自定义排列

项目场景:

提示:这里简述项目相关背景:

在项目中,有时候会需要将数组对象的排列顺序按照自己想要的顺序排列,这个时候如果后端忙,那么前端直接可以用sort排序


描述

提示:这里描述项目中遇到的问题:

这是原数组对象的排序

但是现在需要小黄,小黑,小绿,小白的顺序如下图

这时候就可以使用sort排序


解决方案:

提示:这里填写该问题的具体解决方案:

javascript 复制代码
data() {
    return {
      arrObj:[
            {name:"小白",age:18},
            {name:"小黑",age:20},
            {name:"小黄",age:22},
            {name:"小绿",age:24}
        ],
        reslutArr:[],
    }
  },


methods: {
    pxhs(){
        //想要的顺序
        const resArr=["小黄","小黑","小绿","小白"]
        //使用 sort 方法
        this.arrObj.sort((a,b)=>{
            const indexA=resArr.indexOf(a.name)
            const indexB=resArr.indexOf(b.name)
            return indexA-indexB
        })
        this.reslutArr = this.arrObj
    }
  }
相关推荐
懂点Tech5 小时前
ctfshow misc28:GIF 高度修改解题与脚本实现
开发语言·windows·python
微尘hjx5 小时前
【ByteTrack 04】多轨迹算法ByteTrack改进点
算法·yolo·目标检测·目标跟踪·bytetrack·ultralytics·车跟踪
云和数据.ChenGuang5 小时前
Python 重写(Override)深度解析:从 MRO 到 super() 的完整机制
java·开发语言·人工智能·python·langchain·1024程序员节
摇滚侠6 小时前
《On Java 中文版 基础卷》阅读笔记 实现隐藏 12
java·数据库·笔记
美狐美颜SDK开放平台6 小时前
视频美颜SDK试用DEMO阶段应该测试什么?直播APP接入实操指南
开发语言·人工智能·深度学习·音视频·美颜sdk·直播美颜sdk·第三方美颜sdk
dtq04246 小时前
C++小案例 - 日志实战
开发语言·c++
星夜离尘567 小时前
MATLAB ADC 码流触顶诊断:命中数、缺口分段与削顶不可辨识性
开发语言·matlab
码匠许师傅7 小时前
【C++三方组件】Qt 概览:桌面 C++ 的事实标准与许可证三轨
开发语言·c++·qt
码匠许师傅8 小时前
【C++三方组件】POCO:跨平台系统编程全家桶
开发语言·c++
silvamux_8 小时前
10款模型写种草笔记:可发布性、返工来源与成本数据缺口复盘
java·数据库·笔记