快捷導(dǎo)航

vue中數(shù)組常用的6種循環(huán)方法代碼示例

更新時(shí)間：2024年03月16日 14:24:29 作者：Maidangchen

在vue項(xiàng)目開發(fā)中,我們需要對(duì)數(shù)組進(jìn)行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、for循環(huán)

let data = [{
					name: '張三',
					age: 10
				}, {
					name: '李四',
					age: 20
				}, {
					name: '王五',
					age: 30
				}]
				for (let i = 0; i < data.length; i++) {
					console.log(data[i])
				}

二、map循環(huán)（會(huì)分配內(nèi)存空間存儲(chǔ)新數(shù)組并返回）

let data = [{
					name: '張三'
				}, {
					name: '李四'
				}, {
					name: '王五'
				}]
				data.map((item, index) => {
					console.log(item) //表示的是每一項(xiàng)
					console.log(index) //表示的是數(shù)組的索引
				})

三、forEach

（①不會(huì)分配內(nèi)存空間存儲(chǔ)新數(shù)組并返回②允許callback更改原始數(shù)組的元素）

let data = [{
					name: '張三'
				}, {
					name: '李四'
				}, {
					name: '王五'
				}]
				data.forEach((item, index) => {
					console.log(item) //表示的是每一項(xiàng)
					console.log(index) //表示的是數(shù)組的索引
				})

四、 filter

（過濾掉不滿足條件的元素，把滿足條件的元素返回一個(gè)新的數(shù)組，不會(huì)改變?cè)瓉淼臄?shù)組）

let data = [{
					name: '張三'
				}, {
					name: '李四'
				}, {
					name: '王五'
				}]
				let a = data.filter((item, index) => {
					return item.name == '張三'
				})
				console.log(a)

五、every

（遍歷數(shù)組，當(dāng)每一項(xiàng)都為true時(shí)返回true，否則為false）（遇到false停止執(zhí)行，必須要有return值）

let data = [{
					name: '張三',
					age: 10
				}, {
					name: '李四',
					age: 20
				}, {
					name: '王五',
					age: 30
				}]
				let a = data.every((item, index) => {
					return item.age > 20
				})
				console.log(a)//輸出 false

六、some

（遍歷數(shù)組, 當(dāng)有一項(xiàng)為真（true）時(shí), 就會(huì)停止循環(huán)）

let data = [{
					name: '張三',
					age: 10
				}, {
					name: '李四',
					age: 20
				}, {
					name: '王五',
					age: 30
				}]
				let a = data.some((item, index) => {
					return item.age > 20
				})
				console.log(a)//true

附：vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色

效果圖如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in username" @click="bution(index)" :class="index == colin?'red':''">{{index}}.{{item}}</li>
			</ul>
		</div>
		
		 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	const obj = {
				username:['張三','李四','王五','二麻子'],
				colin:-1,
			}
			const app = new Vue({
				el:'#app',
				data:obj,
				methods:{
					bution:function(e){
						this.colin = e
					}
				}
			})
		 </script>
	</body>
</html>