公式ウェブサイト
マップ定義
map() メソッドは、元の配列の要素ごとに提供された関数を 1 回呼び出すことによって返される値で構成される新しい配列を作成します。
例
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 print 値は
マップ修正後
このようなループ効果を得るには、バックグラウンド インターフェイスを介してパラメータを渡す必要があります.これには、各アイテムの下に qty、supplier_product_id、tax_type、および tag の 4 つのパラメータが必要です.元の配列がループされ、各オブジェクトに配置されます新しい配列. 私はそれについて長い間考えています. 出てきて他の人に尋ねない限り、使用する 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 の定義
ケース
変更前
オプションの印刷値は
修正後
インターフェイスを切断した後
也是对象形式，和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
やっと
記事が良いと思われる場合は、注意を払い、フォローしてブックマークすることを忘れないでください. 間違っている場合は修正してください. 転載する必要がある場合は、ソースを示してください, ありがとう! ! !