zoukankan      html  css  js  c++  java
  • JS数组遍历方法

    常用数组遍历方法:

    1、原始for循环

    var a = [1,2,3];
    for(var i=0;i<a.length;i++){
        console.log(a[i]);  //结果依次为1,2,3
    }

    2、数组内置方法Array.prototype.forEach

    var a = [1,2,3];
    a.forEach(function(value,key,arr){
      console.log(value)    // 结果依次为1,2,3
      console.log(key)      // 结尾依次为0,1,2
      console.log(arr)      // 三次结果都为[1,2,3]
    })

    3、数组内置方法Array.prototype.map 

      map和forEach不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,并且最终会返回一个新的被改变过值之后的数组(map如果不用return就和forEach一样了),由于这个特性,map一般用来处理需要修改某一个数组的值。map和forEach在其他的方面都是一样的,也不能return结束循环等特性

    var a = [1,2,3];
    var b = a.map(function(value,key,arr){
        console.log(value)    // 结果依次为1,2,3
        console.log(key)      // 结尾依次为0,1,2
        console.log(arr)      // 三次结果都为[1,2,3]
        return value+1;
    })
    console.log(a); // 结果为[ 1, 2, 3 ]
    console.log(b); // 结果为[ 2, 3, 4 ]

    4、数组内置方法Array.prototype.filter

      filter和map不同,map目的是为了改变值,而filter目的是为了去掉不要的值,在循环的时候如果返回的是false那么就表示本次循环的不添加该值,返回true则相反是表示要添加到新建的数组中

    var a = [1, 2, 3];
    var b = a.filter(function (value, key, arr) {
        console.log(value)    // 结果依次为1,2,3
        console.log(key)      // 结尾依次为0,1,2
        console.log(arr)      // 三次结果都为[1,2,3]
        return value != 3;   //return 为布尔表达式
    })
    console.log(a); // 结果为[ 1, 2, 3 ]
    console.log(b); // 结果为[ 1,2 ]

    5、数组内置方法Array.prototype.some

      存在满足表达式的元素则返回true,不存在满足表达式的元素则返回false

    var a = [1,2,3];
    var b = a.some(function(value,key,arry){
      console.log(value);   // 结果依次为1,2
      console.log(key);     // 结果依次为0,1
      console.log(arry);    // 两次次结果都为[1,2,3]
      return value===2;
    })
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为true

    6、数组内置方法Array.prototype.every

      所有元素都满足表达式返回true,否则返回false

    var a = [1,2,3];
    var b = a.every(function(value,key,arry){
      console.log(value);   // 结果依次为1,2
      console.log(key);     // 结果依次为0,1
      console.log(arry);    // 两次次结果都为[1,2,3]
      return value==2;
    })
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为false

    7、数组内置方法Array.prototype.indexOf

    var a = [1,2,3];
    var b = a.indexOf(2);
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为1

    数组内置方法Array.prototype.lastIndexOf

    var a = [1,2,3,1];
    var b = a.lastIndexOf(1);
    console.log(a);         // 结果为[ 1, 2, 3, 1 ]
    console.log(b);         // 结果为3

    9、循环语句for...in

      for...in遍历数组的时候是遍历数组的下标值,而在遍历对象的时候遍历的是key值,所以猜想,数组在JS中,本质上也是一个以键值对形式存在的对象

    var a = [1,2,3];
    for(var key in a){
      console.log(key); //结果为依次为0,1,2
    }
    
    var obj = {
        a: 'aa',
        b: 'bb',
        c: 'cc'
    };
    for (var key in obj) {
        console.log(key); //结果为依次为a,b,c
        console.log(obj[key]); //结果为依次为aa,bb,cc
    }

    10、ES6循环for...of语句,只能循环数组,不能循环对象

    var a = [1,2,3];
    for(var value of a){
      console.log(value)  // 结果依次为1,2,3
    }

     11、数组内置方法Array.prototype.find

    var ages = [3, 10, 18, 20];
     
    function checkAdult(age) {
        return age >= 18;
    }
     
    function myFunction() {
        console.log(ages.find(checkAdult)); // 结果为18
    }
  • 相关阅读:
    进程间通信(一):竞争条件与相互排斥方案
    (素材源代码) 猫猫学iOS 之UIDynamic重力、弹性碰撞吸附等现象牛逼Demo
    <html>
    模运算的规则
    ubuntu16.04重置root密码
    rancheros在vm主机部署
    基于centos7.6离线部署开k3s
    centos7.6在线yum安装docker-ce
    centos在线安装ffmpeg
    tar.bz2解压异常
  • 原文地址:https://www.cnblogs.com/xbblogs/p/8400813.html
Copyright © 2011-2022 走看看