javascript - 按价格对对象数组进行排序(从最低到最高)

Question

下面是我在 React.js 中制作网络应用程序时正在处理的一些数据，现在我正在尝试按价格从低到高对对象数组进行排序，以便在单击按钮时该数组已排序并从最低到最高显示在 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));
    })
  }

Answer 1

将您的值转换为数字。根据您的代码，您的建议价格应为 0，因此如果价格不以美元符号开头，我们将使用该价格 '$'

const 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"
  }
 ]

priceFilter = (vals) => {
  return vals.sort((a,b) => {
    const aPrice = a.price[0] === '$' ? parseFloat(a.price.slice(1,-1)) : 0;
    const bPrice = b.price[0] === '$' ? parseFloat(b.price.slice(1,-1)) : 0;
    return aPrice - bPrice;
  });
}

console.log(priceFilter(studios));