时间戳

首页 > 解决方案 > 按价格排序对象数组（从最低到最高）

javascript - 按价格排序对象数组（从最低到最高）

问题描述

下面是我在 React.js 中制作 web 应用程序时正在使用的一些数据，现在我正在尝试按价格从最低到最高对对象数组进行排序，以便在单击按钮时数组是排序并从最低到最高显示在DOM上。

我必须考虑的几件事是价格都包含为字符串，其中第一个字符为“$”字符（例如：“$18”），数组价格中的第二个对象是“建议捐赠”。

studios: [
  {
    name: "Whole Yoga",
    price: "$17.00"
  },
  {
    name: "Rino Yoga Social",
    price: "Suggested Donation"
  },
  {
    name: "Samadhi Yoga",
    price: "$20.00"
  },
  {
    name: "Corepower Yoga",
    price: "$25.00"
  },
  {
    name: "The River Yoga",
    price: "$20.00"
  },
  {
    name: "Endorphin Yoga",
    price: "$10.00"
  },
  {
    name: "Kindness Yoga",
    price: "$20.00"
  },
  {
    name: "Yoga High",
    price: "$15.00"
  },
  {
    name: "Freyja Project",
    price: "$22.00"
  },
  {
    name: "Kula Yoga",
    price: "$17.00"
  }
 ]

到目前为止，我使用了一个 while 循环来删除字符串开头的 '$' 字符，然后使用 .replace() 方法将“Suggested Donation”替换为 '00.00' 并解析所有价格。

我现在遇到的问题是新的排序价格数组与原始数据无关（没有链接它们）所以我只是返回一个我无法做任何事情的排序价格数组。有人对我应该如何处理有任何想法吗？

priceFilter = () => {
    let newArr = []

    return this.props.studios.filter( studio => { 
      let price = studio.price;
      while(price.charAt(0) === '$') {
       price = price.substr(1);
      }
      price = price.replace('Suggested Donation', '00.00')
      let parsedPrice = parseInt(price);
      newArr.push(parsedPrice)
      return newArr.sort((a,b) => (a - b));
    })
  }

标签： javascriptreactjshigher-order-functions

解决方案

您可以使用一个函数来获取排序值，然后将 delta 作为排序方法的 redsult。

const getValue = ({ price }) => +price.slice(1) || 0;

var studios = [{ name: "Whole Yoga", price: "$17.00" }, { name: "Rino Yoga Social", price: "Suggested Donation" }, { name: "Samadhi Yoga", price: "$20.00" }, { name: "Corepower Yoga", price: "$25.00" }, { name: "The River Yoga", price: "$20.00" }, { name: "Endorphin Yoga", price: "$10.00" }, { name: "Kindness Yoga", price: "$20.00" }, { name: "Yoga High", price: "$15.00" }, { name: "Freyja Project", price: "$22.00" }, { name: "Kula Yoga", price: "$17.00" }];

studios.sort((a, b) => getValue(a) - getValue(b));

console.log(studios);
.as-console-wrapper { max-height: 100% !important; top: 0; }

推荐阅读