wkiwi的博客

谈谈js数组循环方法

发布时间:2年前热度: 855 ℃评论数:

在前端代码中总能见到forEach、some、map、filter、reduce、every、some、find等字段,这些字段具体是什么含义,怎么使用,又有什么区别呢?

JS中常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代


1.for[ES1]

  • JavaScript 中的 for 循环,它用途广泛,但是当我们要遍历数组时也很麻烦。

  • 如果我们不想从第一个数组元素开始循环时它仍然很有用,用其他的循环机制很难做到这一点。

  • JavaScript 中的 for 循环很古老,它在 ECMAScript 1 中就已经存在了。for 循环记录 arr 每个元素的索引和值:

  • const arr = ['a', 'b', 'c'];
    arr.prop = 'property value';
    
    for (let index=0; index < arr.length; index++) {
      const elem = arr[index];
      console.log(index, elem);
    }
    
    // Output:
    // 0, 'a'
    // 1, 'b'
    // 2, 'c'

  • 2.for-in[ES1]
  • 不是循环遍历数组的好方法,它访问的是属性键,而不是值,作为属性键,数组元素的索引是字符串,而不是数字。

  • 它访问的是所有可枚举的属性键(自己的和继承的),而不仅仅是 Array 元素的那些。

  • for-in 访问继承属性的实际用途是:遍历对象的所有可枚举属性。


  • for-in 循环与 for 循环一样古老,同样在 ECMAScript 1中就存在了。下面的代码用 for-in 循环输出 arr 的 key:

    • const arr = ['a', 'b', 'c'];
      arr.prop = 'property value';
      
      for (const key in arr) {
        console.log(key);
      }
      
      // Output:
      // '0'
      // '1'
      // '2'
      // 'prop'


    3.forEach() [ES5]

    forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.forEach()也可以循环对象。

    let array = [1,2,3,4];
    array.forEach((item, index, array) => {
      console.log(item);
    });
    

    //output

    //1

    //2

    //3 //4



    4.for-of[ES6] 

    for-of 在循环遍历数组时非常有效:

    用来遍历数组元素。

    • 可以使用 await。

    • const arr = ['chocolate', 'vanilla', 'strawberry'];
      
      for (const [index, elem] of arr.entries()) {
        console.log(index, elem);
      }
      // Output:
      // 0, 'chocolate'
      // 1, 'vanilla'
      // 2, 'strawberry'

    • for-of 不仅可以遍历数组,还可以遍历可迭代对象,例如遍历 Map:

    • const myMap = new Map()
        .set(false, 'no')
        .set(true, 'yes')
      ;
      for (const [key, value] of myMap) {
        console.log(key, value);
      }
      
      // Output:
      // false, 'no'
      // true, 'yes'


    5.map()[ES6] 

    map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容

    let array = [1, 2, 3, 4];
    let temp = array.map((item, index, array) => {
      return item * 10;
    });
    console.log(temp);  //  [10, 20, 30, 40];
    console.log(array);  // [1, 2, 3, 4]



    6.filter()[ES6] 

    filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组

    let array = [1, 2, 3, 4];
    let temp = array.filter((item, index, array) => {
      return item >  3;
    });
    console.log(temp);  // [4]
    console.log(array);  // [1, 2, 3, 4]


    7.reduce()[ES6] 

    x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素

    y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素

    //reduce 循环(购物车案例)
    
    const arr = [
          { id: 2, name: "你", state: true, price: 30, count: 2 },
          { id: 2, name: "我", state: true, price: 10, count: 4 },
          { id: 2, name: "他", state: false, price: 32, count: 6 },
        ];
        // arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{ },初始值)
    
         const result = arr
          .filter((item) => item.state) //过滤
          .reduce((amt, item) => { //累加计算
            return (amt += item.price * item.count);
          }, 0);
        console.log(result);//100


    8.every()[ES6] 

    every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
    every() 方法使用指定函数检测数组中的所有元素:
    如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
    如果所有元素都满足条件,则返回 true。

    let array = [1, 2, 3, 4];
    let bo = array.every((item, index, array) => {
      return item > 2;
    });
    console.log(bo);    // false;


    9.some()[ES6] 

    some() 方法用于检测数组中的有些元素是否满足指定条件(函数提供)。
    some() 方法会依次执行数组的每个元素:
    如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
    如果没有满足条件的元素,则返回false。

    let array = [1, 2, 3, 4];
    let temp = array.some((item, index, array) => {
      return item > 5;
    });
    console.log(temp);  // false


    10.find()[ES6] 

    find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

    var ages = [3, 10, 18, 20];
     
    function checkAdult(age) {
        return age >= 18;
    }
    console.log(ages.find(checkAdult))  //18


    some、every返回true、false。
    map、filter返回一个新数组。
    reduce让数组的前后两项进行某种计算,返回最终操作的结果。
    find 返回符合条件的第一个数组元素
    forEach 无返回值

    js循环,forEach,some,map,filter,reduce,every,some,find

    手机扫码访问