zoukankan      html  css  js  c++  java
  • js 数组迭代方法总结

    for

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

    map

    map生成一个新数组,适合的场景是需要操作某些数据,并且返回新的数组,并且map不支持异步

    var new_array = [1, 4, 5].map(
            //传入数组元素,元素索引,原数组本身
            function callback(currentValue, index, arr) {
              let total = currentValue + this.a;
              return total;
            },
            //回调函数的this指向
            {a: 1}
          );
          console.log(new_array);
    

    forEach

    forEach() 为每个数组元素执行一次 callback 函数,不支持异步
    注意:1.除了抛出异常以外,没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环,forEach() 方法不是应当使用的工具
    2.forEach() 不会在迭代之前创建数组的副本,所以如果数组在迭代时被修改了,则其他元素会被跳过。

    var words = ['one', 'two', 'three', 'four'];
    words.forEach(function(word) {
      console.log(word);
      if (word === 'two') {
        words.shift();
      }
    });
    

    entries

    entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对

    const array1 = ['a', 'b', 'c'];
    const iterator1 = array1.entries();
    console.log(iterator1.next().value);
    

    every

    every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值,
    注意:1.every 不会改变原数组
    2.every 遍历的元素范围在第一次调用 callback 之前就已确定,后面添加就无法遍历到
    3.空数组返回true
    4.callback 只会为那些已经被赋值的索引调用

    [12, 5, 8, 130, 44].every(x => x >= 10); // false
      [12, , , , 5, 8, 130, 44].every((x) => {
            console.log(x);// 12 5
            return x >= 10;
          });
    

    some

    some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值
    注意:1.空数组返回false
    2.找到真值就立即返回
    3.callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用,意思就是会跳过空值

    [2, 5, 8, 1, 4].some(x => x > 10);  // false
     [2, 5, 8, 1, , , 4].some((x) => {
            console.log(x); // 2 5 8 1 4
            return x > 10;
          });
    

    filter

    filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
    注意:1.filter 遍历的元素范围在第一次调用 callback 之前就已经确定了
    2.跳过空值

    function isBigEnough(element) {
      return element >= 10;
    }
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    

    find

    find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    注意:1.在第一次调用 callback函数时会确定元素的索引范围,但是如果被callback改变会有影响
    2.find方法不会改变数组

    findIndex

    indIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1
    与find方法类似

    keys

    keys() 方法返回一个包含数组中每个索引键的Array Iterator对象
    注意:1.不会跳过空值

    reduce

    reduce是从左往右
    注意1. 如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

    const array1 = [1, 2, 3, 4];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    
    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));
    

    reduceRight

    reduceRight从右往左

    values

    注意:1.数组迭代器中存储的是原数组的地址,而不是数组元素值
    2.如果数组中元素改变,那么迭代器的值也会改变

    const array1 = ['a', 'b', 'c'];
    const iterator = array1.values();
    
    for (const value of iterator) {
      console.log(value);
    }
    
    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
    

    for...of

    const array1 = ['a', 'b', 'c'];
    
    for (const element of array1) {
      console.log(element);
    }
    

    总结:

    method 改变原数组 返回值 创建元素副本 跳过空值 异步 跳出循环
    for 支持 break,continue
    for of 支持 break,continue
    map 新数组 不支持 不能
    forEach 不支持 不能
    entries Array Iterator 对象 -- -- --
    every 返回 Boolean -- --
    some 返回 Boolean -- --
    filter 新数组 -- --
    find 符合项或是 undefined -- --
    findIndex 索引或是 -1 -- --
    keys Array Iterator 对象 -- --
    reduce 函数累计处理的结果 支持 --
    reduceRight 函数累计处理的结果 支持 --
    values Array Iterator 对象 -- --
  • 相关阅读:
    hi35183e增加exfat文件系统的支持(转)
    UDP 单播、广播和多播(转)
    linux系统中,kill -3查看java进程状态无效的解决方法
    js是用什么语言编写实现的
    云海天教程
    Docker下安装MySQL
    如何延长手机的使用寿命时间
    如何延长空调使用寿命?
    Linux 发送邮件
    Linux jstack命令
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/14793729.html
Copyright © 2011-2022 走看看