1.普通for循环
let arr = [5,47,7,21,83,8,11,9,26,1];
for(let i=0;i<arr.length;i++){
let item = arr[i];
console.log(item)
}
2.for of 循环
let arr = [5,47,7,21,83,8,11,9,26,1];
for(let item of arr){
// item是遍历项目
console.log(item);
}
3. forEach 方法
参数：
- item 遍历项内容
- index 遍历项索引值
注意事项： - forEach 里不能使用break和continue，可以试用return，但是return类似continue，并不能中断循环
- forEach 属于异步，即使使用了await 也不会变成同步
//模拟异步请求接口
function fakeRequest(n) {
return new Promise((resolve, reject) => {
let arr = ["荔枝", "苹果", "猕猴桃", "芒果", "西瓜", "水蜜桃",'樱桃','车厘子','西红柿','黄高','豆角','草莓','葡萄'];
setTimeout(() => {
let result = [];
for(let i=0;i<n;i++){
let item = arr[Math.floor(Math.random() * arr.length)];
result.push({
key: n+i, label: item
})
}
resolve(result) ;
}, 200);
});
}
//模拟请求接口
function getData(){
let arr = [1,2,3,4]
let result = [];
arr.forEach(async n=>{
let temp = await fakeRequest(n);
console.log(temp)//最后才打印这个
result.push(temp)
})
console.log(result)//后打印这个
return result;
}
console.log(getData())//先打印这个
4.every 方法
every用于检测数组所有元素是否都符合指定条件
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
- 参数：
- item 遍历项内容
- index 遍历项索引值
- arr 原数组
//可用于验证输入框必选项都有值的情况下，提交按钮才可用，否则就禁用 案例
let obj = {
name:'1',
age:'',
code:'',
phone:'',
}
//判断obj对象中每一项都有值
let result = Object.values(obj).every(item=>{
return item;
})
console.log(result)
5.some 方法
some用于检测数组是否有元素符合指定条件
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
- 参数
- item 遍历项内容
- index 遍历项索引值
- arr 原数组
let arr = [5,47,7,21,83,8,11,9,26,1];
let re = arr.some((item,index,arr)=>{
return item>10;
})
console.log(re); //true
6.filter 方法
- iem 循环的改项
- index 索引值
- selftArr 数组本身
filter将符合条件的所有元素组成一个新数组返回 - 不会对空数组进行检测
- 不会改变原始数组
//数组去重
let temp = ['g','a','b','m','c','e','a','d','f','g','c','m','d'];
let filterArr = temp.filter((item,index,selftArr)=>{
return selftArr.indexOf(item) === index;
})
console.log(filterArr)
7.map 方法
map 对数组每一项进行处理，并且返回处理之后的数据组成的数组
- 按照原始数组元素顺序依次处理元素
- 不会对空数组进行检测
- 不会改变原始数组
- 参数
- item 遍历项内容
- index 遍历项索引值
- arr 原数组
//模拟异步请求接口
function fakeRequest(n) {
return new Promise((resolve, reject) => {
let arr = ["荔枝", "苹果", "猕猴桃", "芒果", "西瓜", "水蜜桃",'樱桃','车厘子','西红柿','黄高','豆角','草莓','葡萄'];
setTimeout(() => {
let result = [];
for(let i=0;i<n;i++){
let item = arr[Math.floor(Math.random() * arr.length)];
result.push({
key: n+i, label: item
})
}
resolve(result) ;
}, 200);
});
}
//模拟请求接口
function getData(){
let arr = [1,2,3,4]
return arr.map(async n=>{
return await fakeRequest(n);
})
}
//为了获取一个数组 使用all
Promise.all(getData()).then(res=>{
console.log(res)
})
8.reduce 多用于数学运算
第二个参数是初始值，类似于我们计算和的时候 初始化 let sum = 0,计算积的时候 初始化 let result = 1
- prevResult 上一轮的计算结果，如果没有初始化值，默认数组的第一项
- currentItem 循环的改项
- index 索引值
- selftArr 数组本身
let arr = [1,2,3,4];
//计算和
arr.reduce((prevResult,currentItem,index,selfArr)=>{
return prevResult + currentItem;
},0)
//计算积
arr.reduce((prevResult,currentItem,index,selfArr)=>{
return prevResult * currentItem;
},1)
//计算最大值
arr.reduce((prevResult,currentItem,index,selfArr)=>{
return Math.max(prevResult,currentItem);
},0)
综合小案例
全选
// html
<div class="box">
<input type="checkbox" v-model="isAll" @change="toggleAll"/>
<ul>
<li v-for="item in arr" :key="item.key">
<input type="checkbox" v-model="item.checked" @change="handleChange(item)"/>
<span>{{item.label}}</span>
<span>{{item.price}}</span>
</li>
</ul>
<div>总价：{{total}}</div>
</div>
//js
import {ref,reactive,computed} from 'vue'
let isAll = ref(false);
let total = ref(0);
let arr = ref([
{key:1,label:'苹果',checked:false,price:3100},
{key:2,label:'vivo',checked:true,price:2100},
{key:3,label:'oppo',checked:false,price:2899},
{key:4,label:'华为',checked:false,price:3770},
{key:5,label:'三星',checked:true,price:7830},
{key:6,label:'诺基亚',checked:false,price:230},
{key:7,label:'摩托罗拉',checked:false,price:150},
{key:8,label:'小米',checked:false,price:4380},
{key:9,label:'一加',checked:false,price:3907},
])
getSum();
//切换某一项
function handleChange(item){
let checkedArr = arr.value.map(item=>item.checked);
isAll.value = checkedArr.every(item=>item);
getSum();
}
//切换全选
function toggleAll(){
arr.value.forEach(e => {
e.checked=isAll.value;
});
getSum();
}
//算总价
function getSum(){
total.value = arr.value.reduce((prevResult,currentItem)=>{
let value = currentItem.checked ? currentItem.price : 0;
return prevResult + value;
},0)
}
