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>