Vue3基礎篇之常用的循環(huán)示例詳解
更新時間：2024年01月06日 10:53:51 作者：黑日里不滅的light
filter?方法會創(chuàng)建一個新的數(shù)組,其中包含滿足指定條件的所有元素,這個方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過濾元素的情況,這篇文章主要介紹了Vue3基礎[常用的循環(huán)],需要的朋友可以參考下
一、循環(huán)
1. filter
解釋：filter 方法會創(chuàng)建一個新的數(shù)組，其中包含滿足指定條件的所有元素。這個方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過濾元素的情況。例如，可以使用 filter 方法來找出數(shù)組中所有大于特定值的元素，或者找出包含特定關鍵詞的字符串。
復雜寫法：
const list = reactive({ list: [] })
list.list = [
{ id: 1, name: 'jack', is_use: false },
{ id: 2, name: 'jacker', is_use: true }
]
for (let i = 0; i < list.list.length; i++) {
if (list.list[i].is_use) {
console.log(list.list[i].name)
}
}簡單寫法：
const plist = list.list.filter((i) => {
return i.is_use
})復雜例子：
- 出版年份在2010年以后。
- 頁數(shù)在300到600之間，適中長度的書籍。
- 價格低于或等于25美元。
const books = [
{ title: 'Book A', pages: 90, price: 10.99, releaseYear: 2016 },
{ title: 'Book B', pages: 320, price: 18.99, releaseYear: 2011 },
{ title: 'Book C', pages: 250, price: 29.99, releaseYear: 2013 },
{ title: 'Book D', pages: 450, price: 24.99, releaseYear: 2009 },
{ title: 'Book E', pages: 650, price: 35.99, releaseYear: 2001 },
{ title: 'Book F', pages: 370, price: 22.99, releaseYear: 2014 },
{ title: 'Book G', pages: 520, price: 27.99, releaseYear: 2017 }
];
const filteredBooks = books.filter(book => {
// 篩選條件1: 出版年份在2010年以后
const isRecent = book.releaseYear > 2010;
// 篩選條件2: 頁數(shù)在300到600之間
const isModerateLength = book.pages >= 300 && book.pages <= 600;
// 篩選條件3: 價格低于或等于25美元
const isAffordable = book.price <= 25;
// 只有同時滿足所有條件的書籍被返回
return isRecent && isModerateLength && isAffordable;
});
console.log(filteredBooks);2. map
解釋：map 方法是 Array 對象的一個非常強大的函數(shù)式編程工具。它按照原始數(shù)組的順序，對每個元素應用一個函數(shù)，并將結果收集到一個新數(shù)組中。它非常適合于執(zhí)行數(shù)據(jù)轉換和應用操作到數(shù)組里的每一個項目，而不會改變原始的數(shù)組。
例一：將數(shù)組中的每個數(shù)字乘以2
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); console.log(doubled); // [2, 4, 6, 8, 10]
例二：從對象數(shù)組中提取特定的屬性值
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 24 },
{ name: 'Charlie', age: 28 }
];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']例三：對數(shù)組里面的數(shù)組進行操作
const arrays = [[1, 2], [3, 4], [5, 6]]; const flattened = arrays.map(pair => pair[0] + pair[1]); console.log(flattened); // [3, 7, 11]
復雜例子：
- 添加一個新的屬性readable，如果書本的頁數(shù)少于300頁，標記為’Quick read’；如果在300到600頁之間，標記為’Moderate read’；超過600頁的，標記為’Long read’。
- 把作者的名字和姓氏合并成一個fullName屬性。
- 添加一個新的屬性discountPrice，如果書本的發(fā)布年份在5年之前，則價格打9折。
const books = [
{ title: 'Book A', author: { firstName: 'John', lastName: 'Doe' }, pages: 150, price: 19.99, releaseYear: 2020 },
{ title: 'Book B', author: { firstName: 'Jane', lastName: 'Smith' }, pages: 450, price: 24.99, releaseYear: 2018 },
{ title: 'Book C', author: { firstName: 'Emily', lastName: 'Jones' }, pages: 700, price: 29.99, releaseYear: 2015 }
];
const transformedBooks = books.map(book => {
// 復雜邏輯在這里
let readable;
if (book.pages < 300) {
readable = 'Quick read';
} else if (book.pages >= 300 && book.pages <= 600) {
readable = 'Moderate read';
} else {
readable = 'Long read';
}
const fullName = `${book.author.firstName} ${book.author.lastName}`;
const currentYear = new Date().getFullYear();
const discountPrice = currentYear - book.releaseYear > 5 ? book.price * 0.9 : book.price;
// ...用于展開對象的屬性（相當于寫在這里）
return {
...book,
readable,
author: { ...book.author, fullName },
discountPrice: parseFloat(discountPrice.toFixed(2)) // ensures the price is formatted to 2 decimal places
};
});
console.log(transformedBooks);3. for…of…
解釋：打印每一項，常用于打印數(shù)組
const books = [1, 2, 3]
for (const i of books) {
console.log(i)
}
// 1
// 2
// 34. for…in…
解釋：打印每一項的鍵或下標(在數(shù)組里面是下標)，常用于打印對象
const books = { id: 1, pname: 2 }
for (const i in books) {
console.log(`${i}:${books[i]}`)
}
// id: 1
// pname: 25. forEach
解釋：簡化版的for循環(huán)，但是只是適用于數(shù)組
const books = [1, 2]
books.forEach((element) => {
console.log(element)
})
// 1
// 2到此這篇關于Vue3基礎[常用的循環(huán)]的文章就介紹到這了,更多相關Vue3 常用的循環(huán)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue-router使用next()跳轉到指定路徑時會無限循環(huán)問題
- vue循環(huán)中調用接口-promise.all();按順序執(zhí)行異步處理方式
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue?循環(huán)動態(tài)設置ref并獲取$refs方式
- vue如何在for循環(huán)中設置ref并獲取$refs
- vue中v-model如何綁定多循環(huán)表達式實戰(zhàn)案例
- Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
- vue中的循環(huán)遍歷對象、數(shù)組和字符串
- vue實現(xiàn)列表無縫循環(huán)滾動
- vue中forEach循環(huán)的使用講解
相關文章
這篇文章主要為大家詳細介紹了VUE實現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
文章介紹了在Vue3項目中實現(xiàn)錯誤捕獲和郵件報錯上報的方法,首先使用了`errorHandler`全局錯誤捕獲,接著通過Nodemailer發(fā)送郵件實現(xiàn)錯誤上報功能,過程中遇到一些坑,如需本地調試需用node啟動服務,同時總結了兩種方案的,包括直接存在的問題和限制2026-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)百分比占比條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了electron實現(xiàn)靜默打印的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了vue如何解決空格和空行報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Element?Plus，由餓了么大前端團隊開源出品的一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于?Vue?3.0?的組件庫，Element?Plus是基于Vue3面向設計師和開發(fā)者的組件庫，提供了配套設計資源，幫助你的網(wǎng)站快速成型2022-12-12
這篇文章主要為大家詳細介紹了Vue.js創(chuàng)建Calendar日歷效果的過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue-openlayers實現(xiàn)地圖坐標彈框效果
這篇文章主要為大家詳細介紹了vue-openlayers實現(xiàn)地圖坐標彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vue中的響應式布局結合CSS和Vue數(shù)據(jù)系統(tǒng),通過CSS媒體查詢和Vue的響應式組件/邏輯實現(xiàn),推薦優(yōu)先使用CSS Grid/Flexbox處理樣式響應,僅在復雜邏輯時使用Vue,本文介紹Vue中的響應式布局,感興趣的朋友跟隨小編一起看看吧2026-01-01
這篇文章主要介紹了Vue項目組件化工程開發(fā)實踐方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01