文章目录
- 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, // 使用配置文件中的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}
]
