柳州本地做网站的公司网站开发 ide

1、概念

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

在你的代码中的作用

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

在这行代码中：

1. formattedProducts：这是一个包含多个商品对象的数组。
2. filter 方法：遍历 formattedProducts 数组中的每个 product 对象。
3. 回调函数 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, // 使用配置文件中的URLmethod: '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}
]