js reduce 例子

大海里没有水

已于 2022-02-28 22:52:53 修改

阅读量179

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-02-28 22:44:52 首次发布

本文链接：https://blog.csdn.net/Anna_Liqi/article/details/123194607

版权

本文通过三个示例展示了JavaScript中如何处理数组，包括筛选价格超过1万元的商品名称、去除数组重复元素以及过滤重复商品。这些示例涉及到了数组的reduce、map和find等方法，是JavaScript数组操作的重要技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 例子1：获取价格超过1万元商品的名称
      let cart = [
        { name: "iphone", price: 12000 },
        { name: "imac", price: 55000 },
        { name: "ipad", price: 2000 },
      ];
      // 获取超过1万元的商品
      function getNameByPrice(cart, price) {
        return cart
          .reduce(function (arr, cur) {
            if (cur.price > price) {
              arr.push(cur);
            }
            return arr;
          }, [])
          .map(function (item) {
            return item.name;
          });
      }
      console.log(getNameByPrice(cart, 10000)); // ['iphone', 'imac']

      // 例子2：去除重复元素
      let arr = [1, 3, 4, 5, 4, 6, 5, 5, 6];
      let newarr = arr.reduce(function (arr, cur) {
        if (arr.includes(cur) === false) {
          arr.push(cur);
        }
        return arr;
      }, []);
      console.log(newarr);

      // 例子3：去除重复的商品
      let cart2 = [
        { name: "iphone", price: 12000 },
        { name: "iphone", price: 12000 },
        { name: "imac", price: 55000 },
        { name: "ipad", price: 2000 },
        { name: "ipad", price: 2000 },
      ];
      function filterGoods(goods) {
        return goods.reduce(function (arr, cur) {
          let find = arr.find(function (v) {
            return v.name === cur.name;
          });
          if (!find) arr.push(cur);
          return arr;
        }, []);
      }
      console.table(filterGoods(cart2));
    </script>
  </body>
</html>