Vue3基礎(chǔ)篇之常用的循環(huán)示例詳解
一、循環(huán)
1. filter
解釋:filter 方法會(huì)創(chuàng)建一個(gè)新的數(shù)組,其中包含滿足指定條件的所有元素。這個(gè)方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過(guò)濾元素的情況。例如,可以使用 filter 方法來(lái)找出數(shù)組中所有大于特定值的元素,或者找出包含特定關(guān)鍵詞的字符串。
復(fù)雜寫法:
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) } }
簡(jiǎn)單寫法:
const plist = list.list.filter((i) => { return i.is_use })
復(fù)雜例子:
- 出版年份在2010年以后。
- 頁(yè)數(shù)在300到600之間,適中長(zhǎng)度的書籍。
- 價(jià)格低于或等于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: 頁(yè)數(shù)在300到600之間 const isModerateLength = book.pages >= 300 && book.pages <= 600; // 篩選條件3: 價(jià)格低于或等于25美元 const isAffordable = book.price <= 25; // 只有同時(shí)滿足所有條件的書籍被返回 return isRecent && isModerateLength && isAffordable; }); console.log(filteredBooks);
2. map
解釋:map 方法是 Array 對(duì)象的一個(gè)非常強(qiáng)大的函數(shù)式編程工具。它按照原始數(shù)組的順序,對(duì)每個(gè)元素應(yīng)用一個(gè)函數(shù),并將結(jié)果收集到一個(gè)新數(shù)組中。它非常適合于執(zhí)行數(shù)據(jù)轉(zhuǎn)換和應(yīng)用操作到數(shù)組里的每一個(gè)項(xiàng)目,而不會(huì)改變?cè)嫉臄?shù)組。
例一:將數(shù)組中的每個(gè)數(shù)字乘以2
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); console.log(doubled); // [2, 4, 6, 8, 10]
例二:從對(duì)象數(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']
例三:對(duì)數(shù)組里面的數(shù)組進(jìn)行操作
const arrays = [[1, 2], [3, 4], [5, 6]]; const flattened = arrays.map(pair => pair[0] + pair[1]); console.log(flattened); // [3, 7, 11]
復(fù)雜例子:
- 添加一個(gè)新的屬性readable,如果書本的頁(yè)數(shù)少于300頁(yè),標(biāo)記為’Quick read’;如果在300到600頁(yè)之間,標(biāo)記為’Moderate read’;超過(guò)600頁(yè)的,標(biāo)記為’Long read’。
- 把作者的名字和姓氏合并成一個(gè)fullName屬性。
- 添加一個(gè)新的屬性discountPrice,如果書本的發(fā)布年份在5年之前,則價(jià)格打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 => { // 復(fù)雜邏輯在這里 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; // ...用于展開(kāi)對(duì)象的屬性(相當(dāng)于寫在這里) 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…
解釋:打印每一項(xiàng),常用于打印數(shù)組
const books = [1, 2, 3] for (const i of books) { console.log(i) } // 1 // 2 // 3
4. for…in…
解釋:打印每一項(xiàng)的鍵或下標(biāo)(在數(shù)組里面是下標(biāo)),常用于打印對(duì)象
const books = { id: 1, pname: 2 } for (const i in books) { console.log(`${i}:${books[i]}`) } // id: 1 // pname: 2
5. forEach
解釋:簡(jiǎn)化版的for循環(huán),但是只是適用于數(shù)組
const books = [1, 2] books.forEach((element) => { console.log(element) }) // 1 // 2
到此這篇關(guān)于Vue3基礎(chǔ)[常用的循環(huán)]的文章就介紹到這了,更多相關(guān)Vue3 常用的循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
- vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
- Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
- vue中的循環(huán)遍歷對(duì)象、數(shù)組和字符串
- vue實(shí)現(xiàn)列表無(wú)縫循環(huán)滾動(dòng)
- vue中forEach循環(huán)的使用講解
相關(guān)文章
Vue多頁(yè)面配置打包性能優(yōu)化方式(解決加載包太大加載慢問(wèn)題)
這篇文章主要介紹了Vue多頁(yè)面配置打包性能優(yōu)化方式(解決加載包太大加載慢問(wèn)題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果,右側(cè)顯示對(duì)應(yīng)內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Vue或者React項(xiàng)目配置@路徑別名及智能提示方案
這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue中關(guān)于v-for循環(huán)key值問(wèn)題的研究
這篇文章主要介紹了vue中關(guān)于v-for循環(huán)key值問(wèn)題的研究,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的,但是根據(jù)業(yè)務(wù)的不同,好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的,即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新,再次回到登錄也,驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn),感興趣的朋友一起看看吧2022-08-08Vite+Vue3使用MockJS的實(shí)現(xiàn)示例
寫一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡(jiǎn)單的數(shù)據(jù),來(lái)滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-01-01