在開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到需要從數(shù)組中獲取特定的數(shù)據(jù)的情況，而Vue為我們提供了一種輕松實(shí)現(xiàn)的方式。接下來(lái)我們將介紹如何使用Vue來(lái)取出數(shù)組中特定的id。

let arr = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id:3, name: 'orange'}]
let idArr = arr.map(item =>item.id)
console.log(idArr)

上述代碼是一個(gè)包含三個(gè)對(duì)象的數(shù)組，每個(gè)對(duì)象有id和name兩個(gè)屬性。那么我們需要從數(shù)組中取出id，就可以通過(guò)map方法來(lái)實(shí)現(xiàn)。在這里，我們定義了一個(gè)變量idArr，它是通過(guò)map遍歷數(shù)組中每一個(gè)對(duì)象并返回id組成的新數(shù)組。執(zhí)行上述代碼后，會(huì)輸出[1, 2, 3]。

let arr = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id:3, name: 'orange'}]
let id = arr.find(item =>item.name === 'banana').id
console.log(id)

上述代碼也是一個(gè)包含三個(gè)對(duì)象的數(shù)組。我們使用find方法從數(shù)組中找到name屬性為"banana"的對(duì)象，并輸出該對(duì)象的id。執(zhí)行上述代碼后，會(huì)輸出2。

let arr = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id:3, name: 'orange'}]
let id = arr.filter(item =>item.name === 'banana')[0].id
console.log(id)

上述代碼與上一個(gè)實(shí)現(xiàn)方式相似，只是使用了filter方法來(lái)查找名字為"banana"的對(duì)象并返回一個(gè)新數(shù)組。因?yàn)閒ilter返回一個(gè)數(shù)組，所以需要通過(guò)[0]來(lái)得到第一個(gè)元素即可訪問(wèn)該對(duì)象的id屬性。執(zhí)行上述代碼后，會(huì)輸出2。

let arr = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id:3, name: 'orange'}]
let id = arr.reduce((pre, cur) =>{
return cur.name === 'banana' ? cur.id : pre
}, null)
console.log(id)

上述代碼中，我們使用reduce方法從數(shù)組中取出id。reduce方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是回調(diào)函數(shù)，第二個(gè)參數(shù)（可選）是初始值。回調(diào)函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是累加器，第二個(gè)參數(shù)是當(dāng)前元素。在上述代碼中，我們?cè)O(shè)定初始值為null，因?yàn)樵谡也坏侥繕?biāo)元素時(shí)需要返回一個(gè)默認(rèn)值。接著，我們通過(guò)判斷當(dāng)前元素的name屬性是否為"banana"，來(lái)返回對(duì)應(yīng)的id或默認(rèn)值。執(zhí)行上述代碼后，會(huì)輸出2。

綜上所述，我們介紹了四種不同的方法來(lái)取出數(shù)組中的id，每種方法都有適用的場(chǎng)景。您可以根據(jù)實(shí)際需求和代碼特點(diǎn)選擇不同的實(shí)現(xiàn)方式。