官网
map定义
map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
实例
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
案例
未修改前
num打印值为
map修改后
想要得到这种循环效果,后台接口传参,这要每一项下面的qty,supplier_product_id,tax_type,tag这四个参数,循环原数组放在新的数组每一个对象里面,本人想半天,想不出来问别人才知道用map循环写法可以,forEach不行,特此写这篇文章加深一下印象！！！
代码
var num = [
{
"_id": "635cc46eabbf12300c5e33d1",
"deleted_at": null,
"id": "635cc46eabbf12300c5e33d0",
"supplier_id": "635a50b8c025aa02245eef53",
"supplier_sku": "sku0000002",
"mhw_reference_sku": "mhw_sku0000002",
"ean_13": "EAN13_0000002",
"supplier_barcode_by_hmw": "hmw_barcode_0000002",
"product_name": "供货商产品0000002",
"category": "bedroom",
"long": "0.6",
"width": "0.6",
"high": "1.2",
"sales_unit": "suit",
"unit_price": 0,
"package_weight": 2,
"packaging_qty": 4000,
"minimum_purchase_qty": 1,
"bulk_unit_price": 2500,
"bulk_qty": 5,
"gst_free": "No",
"warranty": "Yes",
"description": "古典落地灯",
"time": 1667023982,
"updated_at": {
"timestamps": 1667023983,
"datetime": "2022-10-29 14:13:03"
},
"created_at": {
"timestamps": 1667023983,
"datetime": "2022-10-29 14:13:03"
},
"supplier": {
"_id": "635a50b8c025aa02245eef54",
"deleted_at": null,
"id": "635a50b8c025aa02245eef53",
"under_aca_group": "abc",
"supplier_category": "Bathroom",
"company_name": "Company Icn 123",
"company_initial": "002",
"ABN": "ABN000012",
"company_phone_number": "400-600-8820",
"company_website": "www.test.com",
"stock_check_link": "string",
"address_billing_address": "地址地址",
"credit_limit": 50,
"position": "string",
"name": "名称名称",
"email": "[email protected]",
"phone": "12345678910",
"purchase_teams_type": "bathroom",
"purchase_teams_value": 1,
"rebate_notes": "xxxxx",
"payment_method": "card",
"shipping_method": [],
"time": 1666863288,
"updated_at": {
"timestamps": 1666863288,
"datetime": "2022-10-27 17:34:48"
},
"created_at": {
"timestamps": 1666863288,
"datetime": "2022-10-27 17:34:48"
},
"address_pickup_address": [],
"supplier_contact": [],
"supplier_product": [],
"get_address_pickup_address": [],
"get_supplier_contact": [],
"get_supplier_product": []
},
"order_qty": "568",
"tag": "5",
"total": 0
},
{
"_id": "636e0267cf44c66c294e8887",
"deleted_at": null,
"id": "636e0267cf44c66c294e8887",
"supplier_id": null,
"supplier_sku": "sku11223344",
"mhw_reference_sku": "sku44332211",
"ean_13": "EAN13_55667788",
"supplier_barcode_by_hmw": "hmw_barcode_88776655",
"product_name": "产品004",
"category": "Sink",
"long": "1000",
"width": "400",
"high": "6780",
"sales_unit": "Others",
"unit_price": "1200000",
"package_weight": "4000",
"packaging_qty": "30000",
"minimum_purchase_qty": "2",
"bulk_unit_price": "1000000",
"bulk_qty": "5",
"gst_free": "yes",
"warranty": "hello",
"description": "GUNDAM",
"time": 1668153959,
"updated_at": {
"timestamps": 1668153960,
"datetime": "2022-11-11 16:06:00"
},
"created_at": {
"timestamps": 1668153960,
"datetime": "2022-11-11 16:06:00"
},
"supplier": null,
"order_qty": "678",
"tag": "56876"
},
{
"_id": "635cc46eabbf12300c5e33d1",
"deleted_at": null,
"id": "635cc46eabbf12300c5e33d0",
"supplier_id": "635a50b8c025aa02245eef53",
"supplier_sku": "sku0000002",
"mhw_reference_sku": "mhw_sku0000002",
"ean_13": "EAN13_0000002",
"supplier_barcode_by_hmw": "hmw_barcode_0000002",
"product_name": "供货商产品0000002",
"category": "bedroom",
"long": "0.6",
"width": "0.6",
"high": "1.2",
"sales_unit": "suit",
"unit_price": 0,
"package_weight": 2,
"packaging_qty": 4000,
"minimum_purchase_qty": 1,
"bulk_unit_price": 2500,
"bulk_qty": 5,
"gst_free": "No",
"warranty": "Yes",
"description": "古典落地灯",
"time": 1667023982,
"updated_at": {
"timestamps": 1667023983,
"datetime": "2022-10-29 14:13:03"
},
"created_at": {
"timestamps": 1667023983,
"datetime": "2022-10-29 14:13:03"
},
"supplier": {
"_id": "635a50b8c025aa02245eef54",
"deleted_at": null,
"id": "635a50b8c025aa02245eef53",
"under_aca_group": "abc",
"supplier_category": "Bathroom",
"company_name": "Company Icn 123",
"company_initial": "002",
"ABN": "ABN000012",
"company_phone_number": "400-600-8820",
"company_website": "www.test.com",
"stock_check_link": "string",
"address_billing_address": "地址地址",
"credit_limit": 50,
"position": "string",
"name": "名称名称",
"email": "[email protected]",
"phone": "12345678910",
"purchase_teams_type": "bathroom",
"purchase_teams_value": 1,
"rebate_notes": "xxxxx",
"payment_method": "card",
"shipping_method": [],
"time": 1666863288,
"updated_at": {
"timestamps": 1666863288,
"datetime": "2022-10-27 17:34:48"
},
"created_at": {
"timestamps": 1666863288,
"datetime": "2022-10-27 17:34:48"
},
"address_pickup_address": [],
"supplier_contact": [],
"supplier_product": [],
"get_address_pickup_address": [],
"get_supplier_contact": [],
"get_supplier_product": []
},
"order_qty": "789",
"tag": "7987"
}
]
console.log(num,'num');
const product = num.map((item) => ({
supplier_product_id: item.id,
qty: item.order_qty,
tag: item.tag,
tax_type: item.tag,
}));
console.log(product,'product');
forEach定义
案例
未修改前
options打印值为
修改后
掉接口后
也是对象形式，和map一样，接口，forEach没有返回值，值是直接_this.options.push进去的，map有返回值
代码
修改后看.then里面代码
getSupplierCategory() {
const _this = this;
_this.tableBusy = true;
_this.$store.dispatch('supplier/getSupplierCategoryByList', {
}).then(res => {
res.forEach(element => _this.options.push({
text: element.name, value: element.name }))
// res.forEach(element => {
// const arr = { text: element.name, value: element.name }
// console.log(arr, 'arr');
// })
}).finally(() => {
_this.tableBusy = false;
})
},
map和forEach区别
//区别
a.相同点
item:为数组每一项
index:为数组索引
array:为原始数组
b.不同点:
forEach没有返回值return
map有返回值retrun
(1)forEach
const map1 = arr.forEach((item,index,array) => {
console.log(item) // 1,2,3,4,5,6,7
})
(2)map
const map1 = arr.map((item,index,array) => {
return item
})
console.log(map1) // 1,2,3,4,5,6,7
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！