在 JavaScript 中，`Array.prototype.filter` 方法用于创建一个新数组，该数组包含通过测试的所有元素
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
}
]
原文地址：https://blog.csdn.net/m0_65152767/article/details/143450775
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！