第一次做网站怎么样下手,软件开发培训班排名前十名,服装公司电商网站建设规划,在线观看视频的免费网站文章目录 1、概念在你的代码中的作用示例总结 2、实战3、formattedProducts4、filteredProducts 1、概念
在 JavaScript 中#xff0c;Array.prototype.filter 方法用于创建一个新数组#xff0c;该数组包含通过测试的所有元素。具体来说#xff0c;filter 方法会遍历数组中… 文章目录 1、概念在你的代码中的作用示例总结 2、实战3、formattedProducts4、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(获取商品数据前需要携带tokentoken)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(resres)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}
]
