js的各种循环遍历

1、for 循环
2、arr.forEach()
3、arr.map() 循环
4、arr.filter()
5、arr.some()
6、arr.every()
7、arr.reduce()
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>循环</title>
</head>
<script>
	let arr = ['apple', 'orange', 'banana'];

	console.log('for循环')
	// i++ 的 for 循环
	for(var i=0; i<arr.length; i++){
		console.log(arr[i])
	}
	console.log('')



	// forEach
	console.log('forEach循环')
	arr.forEach(function(val, index, arr){
		console.log(this, val, index, arr)
	}, 123)
	// arr.forEach((val, index, arr) => {	// 使用箭头函数，此时 this 指向 window
	// 	console.log(this, val, index, arr)
	// }, 123)
	console.log('')



	// map 做数据交互“映射”，正常情况下，需要配合return，返回值是一个新的数组，若没有 return，相当于 forEach
	// 注：平时只要用 map 基本都需要 return，否则直接用 forEach 就行。
	console.log('map循环')
	let arr2 = [
		{title: 'aaa', read: 100, hot: true},
		{title: 'aaa', read: 100, hot: true},
		{title: 'aaa', read: 100, hot: false},
		{title: 'aaa', read: 100, hot: true},
	]
	arr2.map(function (item, index, arr) {	
		console.log(item, index, arr)
	})
	console.log('')
	// 可用来：重新整理数据结构
	let newArr2 = arr2.map((item, index, arr) => {
		let json = {};
		json.t = `${item.title}`;
		json.r = item.read+100;
		json.h = item.hot == true && 'yes';
		return json;
	})
	console.log(newArr2)
	console.log('')



	// filter 过滤，过滤一些不合格的数据，如果返回 true 就留下来
	console.log('filter遍历')
	let newArr3 = arr2.filter((item, index, arr)=>{
		return item.hot == true
	})
	console.log(newArr3)
	console.log('')



	// some 类似查找，数组里面某一个元素符合条件，就返回 true
	console.log('some遍历')
	let newArr4 = arr.some((val, index, arr)=>{
		return val == 'apple'
	})
	console.log(newArr4)
	// 作用：判断数组中是否有某个值
	function findInArray(arr, item){
		return arr.some((val, index, arr)=>{
			return val == item;
		})
	}
	console.log(findInArray(arr, 'apple'))
	console.log('')



	// every 数组里面所有的元素都要符合条件才返回 true 
	console.log('every遍历')
	let arr5 = [1,3,5,7];
	var newArr5 = arr5.every((val, index, arr)=>{
		return val%2 == 1;
	})
	console.log(newArr5)
	console.log('')



	// reduce 作用：求数组的和，或积
	console.log('reduce遍历')
	let arr6 = [2,2,3];
	let result6 = arr6.reduce((prev, cur, index, arr)=>{
		// return prev+cur;
		// return Math.pow(prev,cur);	// 次方
		return prev**cur;	// 次方
	})
	console.log(result6)
	console.log('')



	// reduceRight 作用：与 reduce 相同，但从右向左。


</script>
<body>
	
</body>
</html>
js的各种循环遍历

猜你喜欢
