常见遍历数组的方法

1.for循环

这是最基本的实现方式，改变原数组

var arr=[1,2,3]
for (var i=0;i<arr.length;i++){
console.log(arr[i])
}

export default {
  data() {
    return {
      arr: ["a", "b", "c", "d", "e"],
      arrS: [1, 2, 3, 4, 5, 6],
      arrB: [
        { aa: 1, bb: "b1" },
        { aa: 2, bb: "b2" },
        { aa: undefined, bb: "b3" },
        { aa: 4, bb: "b4" },
      ],
      userInfo: {
        name: "zhangsan",
        age: 20,
        gender: "male",
      },
    };
  },
  created() {
    this.szblForof();
  },
  methods: {
    szblfor() {
      for (var i = 0; i < this.arr.length; i++) {
        console.log("arr[i]", this.arr[i]);
      }
    },}

2.forEach()函数

        arr.forEach()方法允许为数组的每个元素都运行一个函数，forEach()函数接受一个回调函数，参数分别表示当前执行的元素的值，当前值的索引和数组本身。

var arr=[1,2,3,5,6,7]
    arr.forEach(function(item,index,array){
    console.log(index+":"+item)
    }
  )

 szblforEach() {
      this.arr.forEach((item, index, arr) => {
        console.log("item", item);
        // console.log('index',index)
        // console.log('arr',arr)
        if (index == 2) {
          console.log("22222", item);
          arr[index] = 22222;
        }
        console.log("arr输出值", this.arr);//["a", "b", 22222, "d", "e"]
      });
    },

3. map()函数

注意：在map()函数的回调函数中需要通过return将处理后的值进行返回，否则会返回undefined。

var arr=[1,3,6,90,23]
    var result=arr.map(function(item,index,array){
    console.log(index)
    return item*item
 });
    console.log('result:========',result)

  szblmap() {
      const newmap = this.arrS.map((item, index, arr) => {
        console.log("index", index);
        // return {
        //   label:item,
        //   value:index,
        // }保存字典数据常用写法
        return item * item;
        if (index == 2) {
          return false;
        }
      });
      console.log("newmap", newmap);//[1, 4, 9, 16, 25, 36]
    },

//arrS: [1, 2, 3, 4, 5, 6]
const newmap=[];
this.arrS.some((item,index,arr)=>{
    newmap.push(item*item)
    if(index===2){
        return true;//终止some方法的执行
    }
  })；
console.log('newmap',newmap)//[1,4,9]
//some()默认为false,当index为2时，some()方法会返回true,从而终止循环。
//同时可以在循环中使用newmap.push(item*item)来添加修改后的元素到newmap数组中。

 map和forEach的区别

1.map创建一个新数组，原数组不会发生改变。

2.map()里面可以用return, 而forEach()里面的return不起作用，不能用break,会直接报错。

3.forEach()返回值是undefined，不可以链式调用。

4.性能方面，for循环是在js的时候就有了，forEach()和map()是ES5提出的，map()还需要返回一个等长的数组，for()性能最好，其次是forEach(),然后是map()。

return

1.可以是函数有一个返回值

2.可以终止一个函数的执行，函数后面的代码就不会被调用

return和break

1.break主要是用于结束循环的

2.return是结束函数调用

例子：

//optionsCascader: [],
grammarTree() {
      grammarTreeAPI().then((res) => {
        console.log('res---', res)
        let options = [];
        res.data.forEach(item => {
          let option = {
            value: item.name,
            label: item.name,
            children: (item.childList && item.childList.length > 0) ?
              item.childList.map(childItem => ({
                value: childItem.name,
                label: childItem.name,
                children: (childItem.childList && childItem.childList.length > 0) ?
                  childItem.childList.map(subChildItem => ({
                    value: subChildItem.name,
                    label: subChildItem.name
                  })) : undefined
              })) : undefined
          };
          options.push(option);
        });
        this.optionsCascader = options;
        console.log('this.optionsCascader', this.optionsCascader)
      });
    },

 

变量名动态赋值

sz() {
  this.tabData.forEach((item, index) => {
    if (item.gkRvitemResultList) {
      const szArr = item.gkRvitemResultList.map((item, index) => {
        return {
          value: item.itemresult,
          label: item.itemresult,
        };
      });

      // 创建动态变量名
      const variableName = `valueList${index + 3}`;

      // 将 szArr 赋值给动态变量名
      this[variableName] = szArr;

      console.log(`szArr${index + 1}`, szArr); // 打印 szArr
    }
  });
}

4.some()函数和every()函数

相似处：对数组遍历，主判断是否有满足条件的元素，有就返true,无返false。

区别：1. some()某一元素满足返回true,不会对后面的元素进行判断。

           2. every()数组中每个元素都满足才返回true。

function fn(item,index,array){
    return item>6
  }
var result =[1,2,3,4,5,6].some(fn)//false
console.log(result)

function fn(item,index,array){
    return item>6
  }
var result =[1,2,3,4,5,6,7].every(fn)
console.log(result)//false

//arrS: [1, 2, 3, 4, 5, 6] 用法同forEach()
getSome(){
   const resultSome=this.arrs.some((item)=>{
       return item>5
    })
   console.log('resultSome',resultSome)//true
}
getEvery(){
   const resultEvery=this.arrs.every((item)=>{
       return item>5
    })
   console.log('resultEvery',resultEvery)//false
}

5.find()函数

        find()函数用于数组的遍历，当找到第一个满足条件的元素的值时====>返回该元素值

都找不到满足条件的，则返回undefined。方法同forEach()

var arr=[1,3,6,90,23]
const result = arr.find(function(item,index,array){
    return item>6
});
console.log(result)//90

6.filter()函数

        filter()方法可过滤也可遍历数组，用法同forEach()。

var fn=function(x){
    return x%2!==0
}
var arr=[1,2,5,6,78,9,10]
var result=arr.filter(fn)
console.log(result)//[1,5,9]

//vue中
 doubleValue(x) {
      return x % 2 !== 0;
    },

 szblFilter1() {
    var resultF=this.arrS.filter(this.doubleValue)
    console.log('resultF', resultF);
  },

 szblFilter2() {
      var resultF = this.arrS.filter((item, index) => {
        return item % 2 !== 0;
      });
      console.log("resultF", resultF);
    },

7.reduce()函数

 // arrS: [1, 2, 3, 4, 5, 6],
 // arrB: [
 //   { aa: 1, bb: "b1" },
 //   { aa: 2, bb: "b2" },
 //   { aa: undefined, bb: "b3" },
 //   { aa: 4, bb: "b4" },
 // ],
 szblReduce1() {
      const findR = this.arrB.reduce((a, b) => {
        return a.aa + b.aa;
      }, 0);
      console.log("findR", findR);//NaN  若 { aa: 3, bb: "b3" },返回也是NaN
    },
 //改成
 szblReduce2() {
      const findR = this.arrB.reduce((a, b) => {
        return a + b.aa;
      }, 0);
      console.log("findR", findR);///NaN  若 { aa: 3, bb: "b3" },返回10
    },

8.for in && for of(不推荐)

首先两者都可用于遍历

区别：

1.for in 适合遍历对象（通常用for in 来遍历对象的键名）， for of用于遍历数组

const arr=[1,2,3,4,5]
for (let value of arr){
   console.log(value)
}
//1
//2
//3
//4
//5
//或者
 szblForof() {
      for (let value of this.arrB) {
        console.log("value", value);
      }
    },

//遍历对象 通常用for in来遍历对象的键名
const userInfo={
   name:'zhangsan',
   age:20,
   gender:'male'
}
for (let item in userInfo){
   console.log(item) //对象的key:name age gender
   console.log(userInfo[item]) //对象的value:zhangsan 20 male
}