js所有循环数组的方式

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)
}