Javascript 如何在平面列表中按我想要的方式排序？

我想列出的项目（在卡组件中）的顺序，其中10个内容和10个烹饪配料的值匹配

我的最终目标是按照内容和成分匹配的数量顺序列出卡片组件中的项目

烹调和配料范围分别为1到10

      cookup:
      [
        0:{ name: "second" content1: "1" content2: "2" content3: "3" content4: "6" content5: "7" content6: "5" content7: "empty" content8: "10" content9: "8" content10: "9" }

        1:{name: "third" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "5" content6: "empty" content7: "4" content8: "empty" content9: "6" content10: "empty"}

        2:{name: "four" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "4" content6: "empty" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}

        3:{name: "first" content1: "8" content2: "2" content3: "3" content4: "1" content5: "4" content6: "6" content7: "7" content8: "5" content9: "9" content10: "10"}

        4:{name: "fifth" content1: "empty" content2: "empty" content3: "3" content4: "1" content5: "empty" content6: "2" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}
      ]

成分有这些价值

    ingredients1: 1
    ingredients2: 2
    ingredients3: 3
    ingredients4: 4
    ingredients5: 5
    ingredients6: 6
    ingredients7: 7
    ingredients8: 8
    ingredients9: 9
    ingredients10: 10

我想列出的项目，在最高数量的匹配数量的内容和成分

预期项目值为：

    item: 

    {name: "first" content1: "8" content2: "2" content3: "3" content4: "1" content5: "4" content6: "6" content7: "7" content8: "5" content9: "9" content10: "10" }

    {name: "second" content1: "1" content2: "2" content3: "3" content4: "6" content5: "7" content6: "5" content7: "empty" content8: "10" content9: "8" content10: "9"}

    {name: "third" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "5" content6: "empty" content7: "4" content8: "empty" content9: "6" content10: "empty" }

    {name: "four" content1: "1" content2: "2" content3: "3" content4: "empty" content5: "4" content6: "empty" content7: "empty" content8: "empty" content9: "empty" content10: "empty"}

    {name: "fifth" content1: "empty" content2: "empty" content3: "3" content4: "1" content5: "empty" content6: "2" content7: "empty" content8: "empty" content9: "empty" content10: "empty" }

我如何修复代码来实现这一点

这是我的密码

（Food.js）

const Food=（{route}）=>{
const[lastId，setLastId]=useState（30）；
常数{
根据第1条，
根据第2条，
根据第3条，
根据第4条，
根据第5条，
根据第6条，
根据第7条，
根据第8条，
根据第9条，
根据第10条，
}=route.params；//接收值
const{cookUp，hasMorePosts，loadPostsLoading}=useSelector(
（state）=>state.post，
);
log（'cookup:'，cookup）；
返回(
字符串（item.id）}
renderItem={（{item}）=>(
console.log（'ingredients1:'，ingredients1），
console.log（'ingredients2:'，ingredients2），
console.log（'ingredients3:'，ingredients3），
console.log（'ingredients4:'，ingredients4），
console.log（'Ingredits5:'，Ingredits5），
console.log（'ingredients6:'，ingredients6），
console.log（'Ingredits7:'，Ingredits7），
console.log（'ingredients8:'，ingredients8），
console.log（'ingredients9:'，ingredients9），
console.log（'ingredients10:'，ingredients10），
(
)
)}
/>
);
};
出口违约食品；

（Card.js）

const Card=（{item，ingredients1，ingredients2，ingredients3，
INGREDIENTS 4、INGREDIENTS 5、INGREDIENTS 6、，
INGREDIENTS 7、INGREDIENTS 8、INGREDIENTS 9、INGREDIENTS 10、，
}) => {
控制台日志（“项：”，项）；
返回(
);
};
导出默认卡；

当我使用console.log（cookup）时，cookup类型如下

---

我仍然不能完全确定我是否了解您在寻找什么。但是，根据我目前的理解，您有一个名为

cookout

的数组，其中包含单个对象，这些对象根据对象中包含内容或单词“empty”的值的数量而“更满”或“更空”

您希望列表以最少的“空”开头，最多的“满”结尾进行排序

我创建了一个“空虚”测试仪：

constemptyiness=c=>Object.values（c）.filter（v=>v==“empty”）.length；

它获取一个对象并计算object.values中“空”值的数量

我使用此分数对数组进行排序

cookout

：

const sorted=cookup.sort（（a，b）=>空（a）-空（b））；

const cookup=[
{
内容1:“1”、内容2:“2”、内容3:“3”、内容4:“6”、内容5:“7”，
内容6:“5”、内容7:“空”、内容8:“10”、内容9:“8”、内容10:“9”，
姓名：“第二”
},
{
content1:“1”、content2:“2”、content3:“3”、content4:“空”，
content5:“5”、content6:“空”、content7:“4”、content8:“空”，
内容9：“6”，内容10：“空”，名称：“第三”
},
{
content1:“1”、content2:“2”、content3:“3”、content4:“空”，
content5:“4”、content6:“空”、content7:“空”、content8:“空”，
内容9：“空”，内容10：“空”，名称：“四”
},
{
内容1:“8”、内容2:“2”、内容3:“3”、内容4:“1”、内容5:“4”，
内容6:“6”、内容7:“7”、内容8:“5”、内容9:“9”、内容10:“10”，
姓名：“第一”
},
{
content1:“空”，content2:“空”，content3:“3”，content4:“1”，
content5:“空”，content6:“2”，content7:“空”，content8:“空”，
内容9：“空”，内容10：“空”，名称：“第五”
},
{
content1:“空”，content2:“空”，content3:“空”，content4:“1”，
content5:“空”，content6:“2”，content7:“空”，content8:“空”，
内容9：“空”，内容10：“空”，名称：“第六”
}
];
const emptyiness=c=>Object.values（c）.filter（v=>v==“empty”）.length；
const sorted=cookup.sort（（a，b）=>空（a）-空（b））；
控制台日志（已排序）你是什么意思“我想在卡片组件中按烹饪的内容值和配料值最匹配的顺序列出。”如何匹配？您能否编辑您的问题，将
cookup
和
成分的有效格式对象表示包括在内，并模拟您期望的“订购”内容输出结果会是什么样子？@HenryEcker很抱歉造成混淆，我的意思是我想按内容和成分匹配数最高的顺序列出项目。例如，成分包含值​​从1点到10点。ingredient1:1至ingredient10:10。。在cookup中，名为first的第三个数组包含所有值​​内容从1到10。所以应该先列出来，好的，后续问题。什么类型的烹饪？你有像数组一样的方括号（
[]
），但它有像对象一样的
0:
键？@HenryEcker我刚刚在我的帖子中发布了关于烹饪类型的图片。明白了。我注意到cookup有30个值，但您的示例只有10个可能的内容。您实际的
目录中是否有30个内容选项，而您刚刚提供了一个摘要列表？或者在
cookup
中是否有多个元素具有相同的填充数
    const Food = ({route}) => {
      const [lastId, setLastId] = useState(30);
      const {
        ingredients1,
        ingredients2,
        ingredients3,
        ingredients4,
        ingredients5,
        ingredients6,
        ingredients7,
        ingredients8,
        ingredients9,
        ingredients10,
      } = route.params; // Receiving Value
      const {cookUp, hasMorePosts, loadPostsLoading} = useSelector(
        (state) => state.post,
      );

      console.log('cookup:', cookUp);
      return (
        <>
          <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            renderItem={({item}) => (
              console.log('ingredients1:', ingredients1),
              console.log('ingredients2:', ingredients2),
              console.log('ingredients3:', ingredients3),
              console.log('ingredients4:', ingredients4),
              console.log('ingredients5:', ingredients5),
              console.log('ingredients6:', ingredients6),
              console.log('ingredients7:', ingredients7),
              console.log('ingredients8:', ingredients8),
              console.log('ingredients9:', ingredients9),
              console.log('ingredients10:', ingredients10),
              (
                <ImageContainer>
                  <Card
                    item={item}
                    ingredients1={ingredients1}
                    ingredients2={ingredients2}
                    ingredients3={ingredients3}
                    ingredients4={ingredients4}
                    ingredients5={ingredients5}
                    ingredients6={ingredients6}
                    ingredients7={ingredients7}
                    ingredients8={ingredients8}
                    ingredients9={ingredients9}
                    ingredients10={ingredients10}
                  />
                </ImageContainer>
              )
            )}
          />
        </>
      );
    };

    export default Food;

    const Card = ({item, ingredients1,ingredients2,ingredients3,
      ingredients4,ingredients5,ingredients6,
        ingredients7,ingredients8,ingredients9,ingredients10,
      }) => {

        console.log("item:",item);
        return (
        <>
        
          </>
        );
    };

    export default Card;