vue.js map 函數是一個內置的高階函數,用于創建一個新數組,其中每個元素都是原始數組中的每個元素轉換后的結果。其語法為 map(callbackfn),其中 callbackfn 接收數組中的每個元素作為第一個參數,可選地接收索引作為第二個參數,并返回一個值。map 函數不會改變原始數組。
Vue.js 中 map 函數
map 函數在 Vue.js 中是一個內置的高階函數,用于創建一個新數組,該數組中的每個元素都是根據原始數組中的每個元素轉換后的結果。
語法:
map(callbackFn)
登錄后復制
參數:
callbackFn: 一個函數,接收數組中的每個元素作為第一個參數,可選地接收索引作為第二個參數。
返回值:
一個新數組,其中每個元素都是原始數組中相應元素的轉換結果。
用法:
map 函數可以與數組方法一起使用,如下所示:
const numbers = [1, 2, 3, 4, 5]; // 將每個元素乘以 2 const doubledNumbers = numbers.map(number => number * 2); // 輸出:[2, 4, 6, 8, 10] console.log(doubledNumbers);
登錄后復制
實例:
map 函數可以用于:
轉換數組中的元素類型
創建新的數組,只包含原始數組中滿足特定條件的元素
提取數組中嵌套對象或數組的特定屬性或值
示例用法:
// 創建一個新數組,只包含名字為 "John" 的用戶 const users = [{ name: "John", age: 30 }, { name: "Jane", age: 25 }]; const johnUsers = users.map(user => user.name === "John" ? user : null); // 提取每個產品的價格 const products = [{ name: "Product 1", price: 10 }, { name: "Product 2", price: 15 }]; const prices = products.map(product => product.price);
登錄后復制
注意事項:
map 函數不會改變原始數組。
callbackFn 必須返回一個值。如果未返回任何值,則新數組中的相應元素將為 undefined。