zoukankan      html  css  js  c++  java
  • js 数组循环和迭代

    (之前一直没怎么注意数组循环,今天做一道题时,用到forEach循环发现它并没有按照我想象的样子执行,总结一下数组循环)

    一.第一种方法就是for()循环

        for( var index = 0; index < array.length; i ++){} 

      这种方法很常见,各个语言都有,这里就不再赘述

    二.es5新增加的迭代方法(every,filter,forEach,map,some)

      这些方法都接收两个参数,1)在每一项上可运行的函数(传入的函数接受三个参数:a. 数组项的值;b. 该项在数组中的位置; c. 数组本身);2)(可选)运行该函数的作用域——影响this的值。

      语法:以forEach为例,其他类似

    array.forEach(callback [, thisArg])
    /**
    *callback为要执行的回调函数,thisArg为绑定的this若未传参,
    *callback 的 this 值在非严格模式下将是全局对象,严格模式下为 undefined
    */
    var  nums = [3, 2, 3, 4]
    nums.forEach(function(value, index, array){
       //执行某些操作
    })
    /**
    *其中匿名函数为每一项要执行的函数;thisArg省略
    * 匿名函数中 value为每一项的值,如3,2,3,4
    * index为每一项的位置即索引,如0,1,2,3
    *array为数组本身,如nums
    *
    *thisArg省略
    */

    1) every()方法:

      测试数组中所有元素是否都通过指定函数的测试,若有一项返回false即返回false;

      every方法为元素的每个元素执行一次callback函数(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外),直到找到一个使callback返回false(可转化为false的值),跳出迭代并返回false。否则(所有元素均返回true)返回true。

      every方法遍历到的元素为第一次调用callback那一个的值,之后添加的值不会被访问到。

    function isBigEnough(elemen) {
      return (element >= 10);
    }
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    // passed is false
    passed = [12, 54, 18, 130, 44].every(isBigEnough);
    // passed is true
    var a = [1, 2, 3,, 4].every (function(value){
    console.log(value)
       return value       
    })//1,2,3,4
    console.log(a)//true
    a = [1, 2, 3, undefined,4].every (function(value){
    console.log(value)
       return value       
    })//1,2,3,undefind
    console.log(a)//false

    2)filter()方法:

      使用指定的函数测试所有的元素,创建并返回一个包含所有通过测试的元素的新数组

      filter为数组中的每个元素调用一次callback(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外),并利用所有callback返回true或等价于true的元素创建一个新数组,未通过callback测试的元素会被跳过,不会包含在新数组里。

    var a = [1, 2, 3, 7,4].filter(function(value){
       return value > 4      
    })
    console.log(a)//[7]

    3)forEach()方法:

      forEach按升序为数组中含有相知的每一项执行一次callback函数(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外)

      forEach遍历的范围在第一次调用 callback 前就会确定。调用forEach后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback  的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ,之后的元素将被跳过 。总是返回undefined,不能链式调用。

      没有办法中止或者跳出 forEach 循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代

    function logArrayElements(element, index, array) {
        console.log("a[" + index + "] = " + element);
    }
    
    // 注意索引2被跳过了,因为在数组的这个位置没有项
    [2, 5, ,9].forEach(logArrayElements);
    
    // a[0] = 2
    // a[1] = 5
    // a[3] = 9
    
    [2, 5,"" ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] = 
    // a[3] = 9
    
    [2, 5, undefined ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] = undefined
    // a[3] = 9
    
    
    let xxx;
    // undefined
    
    [2, 5, xxx ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] = undefined
    // a[3] = 9

      

      如果数组在迭代时被修改了,则其他元素会被跳过。

    下面的例子输出"one", "two", "four"。当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置,"three"会被跳过。 forEach()不会在迭代之前创建数组的副本。

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

    4) map()方法:

      为数组每一项(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外)执行一个指定函数,返回一个新数组,每个元素都是回调函数的结果

      使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。

    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    /* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

    5)some()方法:

      测试数组中某些元素是否通过指定函数的测试,若有一项返回true即返回true

      some为数组中的每一个元素执行一次 callback函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值),停止迭代并返回true;否则(所有元素均为false),返回false。

    var a = [1, 2, 3, 7,4].some (function(value){
       return value > 8       
    })
    console.log(a)//false
    a = [1, 2, 3, 9,4].some (function(value){
       return value > 8       
    })
    console.log(a)//true
  • 相关阅读:
    常用软件
    树和二叉树的一些基本术语
    二分查找(Binary Search)
    GPIO模拟IIC接口信号质量分析
    PAT (Basic Level) Practise:1021. 个位数统计
    PAT (Basic Level) Practise:1017. A除以B
    PAT (Basic Level) Practise:1027. 打印沙漏
    文件操作:输出文件二进制数据
    阈值与平滑处理
    图像基本操作
  • 原文地址:https://www.cnblogs.com/ranjianxi/p/6543101.html
Copyright © 2011-2022 走看看