当前位置：首页 > article >正文

在 JavaScript 中，`Array.prototype.filter` 方法用于创建一个新数组，该数组包含通过测试的所有元素

article 2025/1/11 0:32:37

文章目录

1、概念
- - 在你的代码中的作用
  - 示例
  - 总结
2、实战
3、formattedProducts
4、filteredProducts

1、概念

在 JavaScript 中，Array.prototype.filter 方法用于创建一个新数组，该数组包含通过测试的所有元素。具体来说，filter 方法会遍历数组中的每个元素，并对每个元素执行提供的函数（也称为回调函数）。如果回调函数返回 true，则该元素会被包含在新数组中；如果回调函数返回 false，则该元素不会被包含在新数组中。

在你的代码中的作用

// 过滤 status 为 1 且 editAuth 为 1 的商品
const filteredProducts = formattedProducts.filter(product => product.status === 1 && product.editAuth === 1);

在这行代码中：

formattedProducts：这是一个包含多个商品对象的数组。
filter 方法：遍历 formattedProducts 数组中的每个 product 对象。
回调函数 product => product.status === 1 && product.editAuth === 1：
- 这个回调函数会检查每个 product 对象的 status 属性是否等于 1。
- 同时，它还会检查 product 对象的 editAuth 属性是否等于 1。
- 只有当 product.status === 1 和 product.editAuth === 1 同时为 true 时，回调函数才会返回 true。
- 如果回调函数返回 true，则该 product 对象会被包含在新的数组 filteredProducts 中。
- 如果回调函数返回 false，则该 product 对象不会被包含在新的数组 filteredProducts 中。

示例

假设 formattedProducts 数组如下：

const formattedProducts = [
  { id: 1, name: 'Product A', status: 1, editAuth: 1, image: 'image1.jpg' },
  { id: 2, name: 'Product B', status: 1, editAuth: 0, image: 'image2.jpg' },
  { id: 3, name: 'Product C', status: 0, editAuth: 1, image: 'image3.jpg' },
  { id: 4, name: 'Product D', status: 1, editAuth: 1, image: 'image4.jpg' },
  { id: 5, name: 'Product E', status: 0, editAuth: 0, image: 'image5.jpg' }
];

执行 filter 方法后：

const filteredProducts = formattedProducts.filter(product => product.status === 1 && product.editAuth === 1);

filteredProducts 将会是：

[
  { id: 1, name: 'Product A', status: 1, editAuth: 1, image: 'image1.jpg' },
  { id: 4, name: 'Product D', status: 1, editAuth: 1, image: 'image4.jpg' }
]

总结

filter 方法的作用是根据多个条件（在这个例子中是 product.status === 1 和 product.editAuth === 1）从原始数组中筛选出符合条件的元素，并返回一个新的数组。这样，你就可以确保只有 status 为 1 且 editAuth 为 1 的商品才会被展示在前端。

2、实战

// 发送请求获取数据
    fetchData: function(filterType) {
      getToken().then((token)=>{
            console.log("获取商品数据前需要携带token="+token)
            if (!token) {
              wx.showToast({
                title: '获取 token 失败，请重试',
                icon: 'none'
              });
              return;
            }
            wx.request({
              url: config.baseUrl + config.getAllProductsUrl, // 使用配置文件中的URL
              method: 'GET',
              data:{
                  page:0,
                  size:1000
              },
              header:{
                'token': `${token}`
              },
              success: (res) => {
                console.log("res="+res)
                console.log("后端返回的数据:", res.data); // 添加日志输出
                if (res.statusCode === 200) {
                  const products = res.data.data.content || [];
                  // 确保图片URL格式正确
                  const formattedProducts = products.map(product => ({
                    ...product,
                    image: `${config.imageBaseUrl}${product.image}`
                  }));
                  // 过滤 status 为 1 且 editAuth 为 1 的商品
                  console.log("formattedProducts："+ JSON.stringify(formattedProducts))
                  const filteredProducts = formattedProducts.filter(product => product.status === 1 && product.editAuth === 1);
                  console.log("filteredProducts："+ JSON.stringify(filteredProducts))
                  this.setData({
                    products:filteredProducts,
                  });
                } else {
                  wx.showToast({
                    title: '数据加载失败',
                    icon: 'none'
                  });
                }
              },
              fail: (err) => {
                wx.showToast({
                  title: '请求失败',
                  icon: 'none'
                });
              }
            })
      })
      .catch((err)=>{
        wx.showToast({
          title: err.message,
          icon:'none'
        });
      });
    },

3、formattedProducts

[
    {
        "id": 920,
        "creatorId": 3,
        "sender": "NayaCI",
        "image": "https://www.crossbiog.com/product-image/GLOVEINABOTTLE护手乳60mL_955083.jpg",
        "name": "格拉芙伯特 护手乳 60mL",
        "jancode": "733620209958",
        "code": "P241018122124-8514",
        "unit": "瓶",
        "brandEnglishName": "GLOVES IN A BOTTLE",
        "carton": 96,
        "standardPrice": 98,
        "ranks": 8691940,
        "lastModifiedDate": "2024-10-18 12:22:25",
        "shareFlag": 0,
        "editAuth": 0,
        "readAuth": 1,
        "status": 1
    },
    {
        "id": 859,
        "creatorId": 56,
        "sender": null,
        "image": "https://www.crossbiog.com/product-image//20200518181548_ffcdfd.jpg",
        "name": "AsahiKASEI/旭包鲜 食品包装用微波炉保鲜膜 30cm×20m",
        "jancode": "4901670013320",
        "code": "P240910205016-8594",
        "unit": "盒",
        "brandEnglishName": "AsahiKASEI",
        "carton": 60,
        "standardPrice": 17.6,
        "ranks": 9740,
        "lastModifiedDate": "2024-11-02 14:55:20",
        "shareFlag": 0,
        "editAuth": 1,
        "readAuth": 1,
        "status": 0
    },
    {
        "id": 858,
        "creatorId": 56,
        "sender": null,
        "image": "https://www.crossbiog.com/product-image//20200521154349_0aec21.jpg",
        "name": "AsahiKASEI/旭包鲜 食品包装用微波炉保鲜膜加量装 30cm×50m",
        "jancode": "4901670112559",
        "code": "P240910205014-8119",
        "unit": "支",
        "brandEnglishName": "AsahiKASEI",
        "carton": 30,
        "standardPrice": 38.6,
        "ranks": 9730,
        "lastModifiedDate": "2024-11-02 14:36:55",
        "shareFlag": 0,
        "editAuth": 1,
        "readAuth": 1,
        "status": 1
    },
    {
        "id": 854,
        "creatorId": 56,
        "sender": null,
        "image": "https://www.crossbiog.com/product-image//20200521141646_59e74b.jpg",
        "name": "AsahiKASEI/旭包鲜 食品包装用微波炉保鲜膜 15cm×20m",
        "jancode": "4901670114683",
        "code": "P240910205005-2404",
        "unit": "支",
        "brandEnglishName": "AsahiKASEI",
        "carton": 60,
        "standardPrice": 11.6,
        "ranks": 9720,
        "lastModifiedDate": "2024-11-01 16:57:56",
        "shareFlag": 0,
        "editAuth": 1,
        "readAuth": 1,
        "status": 1
    }
]

4、filteredProducts

[
    {
        "id": 858,
        "creatorId": 56,
        "sender": null,
        "image": "https://www.crossbiog.com/product-image//20200521154349_0aec21.jpg",
        "name": "AsahiKASEI/旭包鲜 食品包装用微波炉保鲜膜加量装 30cm×50m",
        "jancode": "4901670112559",
        "code": "P240910205014-8119",
        "unit": "支",
        "brandEnglishName": "AsahiKASEI",
        "carton": 30,
        "standardPrice": 38.6,
        "ranks": 9730,
        "lastModifiedDate": "2024-11-02 14:36:55",
        "shareFlag": 0,
        "editAuth": 1,
        "readAuth": 1,
        "status": 1
    },
    {
        "id": 854,
        "creatorId": 56,
        "sender": null,
        "image": "https://www.crossbiog.com/product-image//20200521141646_59e74b.jpg",
        "name": "AsahiKASEI/旭包鲜 食品包装用微波炉保鲜膜 15cm×20m",
        "jancode": "4901670114683",
        "code": "P240910205005-2404",
        "unit": "支",
        "brandEnglishName": "AsahiKASEI",
        "carton": 60,
        "standardPrice": 11.6,
        "ranks": 9720,
        "lastModifiedDate": "2024-11-01 16:57:56",
        "shareFlag": 0,
        "editAuth": 1,
        "readAuth": 1,
        "status": 1
    }
]