Table of contents
official website
map definition
The map() method creates a new array consisting of the values returned by calling the provided function once for each element in the original array.
example
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]
the case
Before modification
The num print value is
After the map is modified
If you want to get this kind of loop effect, you need to pass parameters through the background interface. This requires the four parameters of qty, supplier_product_id, tax_type, and tag under each item. The original array is looped and placed in each object of the new array. I think about it for a long time. Only when you don’t come out and ask others will you know that using map loop can be used, but forEach can’t, so I write this article to deepen my impression! ! !
the code
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 definition
the case
Before modification
options print value is
after modification
After disconnecting the interface
也是对象形式，和map一样，接口，forEach没有返回值，值是直接_this.options.push进去的，map有返回值
the code
Look at the code in .then after modification
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;
})
},
The difference between map and 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
At last
If you think the article is good, remember to pay attention, follow and bookmark it. Please correct me if I am wrong. If you need to reprint, please indicate the source, thank you! ! !