vue中数组常用的六种循环方法

vue中数组常用的六种循环方法

简单记录一下,常用的六种数组循环的方法,分别是for(),map(),forEach(),filter (),every(),some()

一、for循环

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

二、map循环(会分配内存空间存储新数组并返回)

let data = [{
					name: '张三'
				}, {
					name: '李四'
				}, {
					name: '王五'
				}]
				data.map((item, index) => {
					console.log(item) //表示的是每一项
					console.log(index) //表示的是数组的索引
				})

三、forEach(①不会分配内存空间存储新数组并返回②允许callback更改原始数组的元素)

let data = [{
					name: '张三'
				}, {
					name: '李四'
				}, {
					name: '王五'
				}]
				data.forEach((item, index) => {
					console.log(item) //表示的是每一项
					console.log(index) //表示的是数组的索引
				})

四、 filter (过滤掉不满足条件的元素,把满足条件的元素返回一个新的数组,不会改变原来的数组)

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

五、every(遍历数组,当每一项都为true时返回true,否则为false)(遇到false停止执行,必须要有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(遍历数组, 当有一项为真(true)时, 就会停止循环)

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

转载请说明出处内容投诉
CSS教程_站长资源网 » vue中数组常用的六种循环方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买