javascript - 使用 javascript 对数据集进行排序

Question

我正在尝试使用按钮对 PHP 调用的动态数据集进行排序。现在我只是想放一个按钮来按最高的项目排列它们。

在catalog.view.php中

 <div class="pricing-buttons">
    <button type="button" class="highest btn btn-outline- 
 primary">highest price</button> <button type="button" class="lowest 
  btn btn-outline-info">lowest price</button>
  </div>
<section class="container-fluid">
    <div class="row">
       <?php if (isset($items)) { ?>
        <?php foreach ( $items as $item) : ?>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="container-fluid">
                    <article class="cards">
                              <div class="col-12">


 <section class="card-holder" id="<?php echo $item['code']; ?>">


 <section class="card code">

 <ul>

  <h2 class="cat-order-code bottom-drop center" 
 data-code="<?php echo $item['code']; ?>">Code: <?php echo $item['code']; ?></h2>


<h3 class="cat-order-name center"><?php echo $item['name']; ?></h3>


 <img class="cat-order-image thumbnail box-image-width" 
 src="<?php echo IMAGES .  $item['image']; ?>" 
 alt="<?php echo $item['description']; ?>">


  <!-- part I am working on here the data-value ['price'] -->                                                    
 <li class="cat-order-price" data-value="<?php echo $item['price']; ?>">Price:
 <?php echo $price = ($item['price'] == 0 ? 'Make offer' :  '$' . $item['price']);
 ?></li>


 <h4 class="cat-order-sold sale" data-sold="<?php echo $item['sold']; ?>">
 <?php echo $sold = ($item['sold'] == 0 ? 'For Sale' : 'sold'); ?></h4>


 <a class="cat-order-btn btn btn-lg btn-outline-danger btn-width 
 center-block"  href='details.php?id=<?php echo $item['id']?>'>
 <?php echo $item['id']; ?></a>

  </ul>

  </section>

 </section>

 </div>

 </article>

 </div>

 </div>

 <?php endforeach; ?>

 <?php } ?>

 </div>

 </section>

我正在分块工作，因为我对 JAvaScript 和 Es6 还很陌生。到目前为止，在我的 javascript 文件中，我有

 const highest = document.querySelector('.highest');
 const priceValue = 
 Array.from(document.querySelectorAll('[data-value]');
 const price = priceValue;
 price.map(price => price.dataset.value);
 console.log(price);

我的问题是为什么 map 不起作用？我知道我还有很长的路要走才能到达我想要的地方，但我试图理解为什么我的 map 函数返回的值与 Array.from 函数相同？

任何帮助将不胜感激。

Answer 1

您应该将 map 操作的结果分配给一个变量，如下所示

const result = price.map(price => price.dataset.value);
console.log(result);

如果您想对值数组进行排序，您现在可以使用 sort 对其进行排序方法

result.sort();

此外，元素变量与数组同名可能会造成困惑。这将是一个更具可读性的替代方案

const result = price.map(p => p.dataset.value);