Question

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

我需要考虑的几件事是，价格全部包含在字符串中，第一个字符为“ $”字符（EX：“ $ 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'并parseInt所有价格。

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

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

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

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; }

Answer 2

您在这里。：）

let 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"
  }
];
console.log("Unsorted", studios);

studios.sort(({
  price: a
}, {
  price: b
}) => {
  //parseFloat will be Nan if it cannot parse the string into a number
  //the only problem here is that any non int string will turn into 0
  a = parseFloat(a.slice(1), 10) || 0;
  b = parseFloat(b.slice(1), 10) || 0;

  return a - b;
});

console.log("Sorted", studios);

Answer 3

将您的值转换为数字。根据您的代码，建议的价格应为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));

Answer 4

您可以使用Array.prototype.sort（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort）编写自定义排序。

const compare = (a, b) => {
  const aPrice = Number(a.price.replace(/[^0-9.-]+/g,""));
  const bPrice = Number(b.price.replace(/[^0-9.-]+/g,""));

  return aPrice - bPrice
};


const sortedStudios = this.props.studios.sort(compare);

Answer 5

您可能希望按价格而不是按价格对对象进行排序：

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"}];

const parsePrice = x => parseFloat(x.replace(/^\$/, '')) || 0
const sortedStudios = studios
  .slice()
  .sort((a, b) => parsePrice(a.price) - parsePrice(b.price))

console.log(sortedStudios)

Answer 6

感谢大家的帮助！这个解决方案对我有用。

priceFilter = () => {
    let ordered = studios.sort((a, b) => (a.price > b.price) ? 1 : -1);
    let lastElement = ordered.pop();
    return ordered.unshift(lastElement);
  }

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

6 个答案: