zoukankan      html  css  js  c++  java
  • javascript数组详解(js数组深度解析)【forEach(),every(),map(),filter(),reduce()】

    Array 对象是一个复合类型,用于在单个的变量中存储多个值,每个值类型可以不同。

    创建数组对象的方法:

    new Array();
    new Array(size);
    new Array(element0, element1, ..., elementn);
    1.  当索引值为负数时,会将其看作是对象的一个属性,若为非负的数字字符串,则会隐式转换为数字索引:
          var a= new Array();
          a[-1.23]=true;
          a[1]="pomelo";
          a["100"]="tt";
          console.log(a);   ///  [1: "pomelo", 100: "tt", -1.23: true]
          console.log(a.length)   /// 101  稀疏数组的长度为最大下标+1

    其实数组对象的索引其实就是对象属性名的一种特殊形式,当试图查询任何不存在的对象属性名时,不会报错,而会显示undefined:

    console.log(a["hello"]);   //undefined

    2.  length属性可以用于置空数组或从前向后截取数组:

        var array1=[1,2,3,4,5];
        array1.length=3;   ///[1,2,3]
        array1.length=0;   ///[]
        array1.length=5;   ///[] 长度为5的空数组
        console.log(array1)

    可以使用Object.defineProperty(对象,属性名,{设置})方法设置可读可写:

        Object.defineProperty(array1,"length",{writable:false});
        array1.length=10;
        console.log(array1.length);    ///5

    3.数组元素的添加和删除:

    末尾:添加元素push(),删除元素pop();

    首部:添加元素unshift(),删除元素shift();

        var array2=[1,2,3,4,5];
        array2.unshift(6);   ///[6,1,2,3,4,5]
        array2.shift();   //[1,2,3,4,5]
        console.log(array2);

    4.数组的遍历优化与筛选

    当数组容量很大时,length不应在每次循环中都查询;

    当需要过滤数组中的无效数据时,用continue跳出本次循环;

    var array3=[null,1,0,undefined];
    for(var i= 0,len=array3.length;i<len;i++){
    if(!array3[i]) continue;
    console.log(array3[i]); //1
    }

    或者利用ES5自带的foreach()方法:

        var array4=[1,2,3,4];
        var sum=0;
        array4.forEach(function(i){
            sum+=i;
        });
        console.log(sum);   ///10

    5.js不支持多维数组,但可以通过数组的数组来实现:

        var array5=new Array(10);
        for(var i=0;i<array5.length;i++){
            array5[i]=new Array(10);
        }
        for(var i=0;i<array5.length;i++){
            for(var j=0;j<array5[i].length;j++){
                array5[i][j]=i*j;
            }
        }
        console.log(array5[5][6]);   //30

    6.数组方法

    6.1   join()  将数组转化为字符串并连接在一起

        var array6=[1,2,3];
        console.log(array6.join("-"));  // 1*2*3
        console.log(array6.join(""));  // 123
        console.log(array6.join());  // 1,2,3
        console.log(typeof array6.join());  // String

    6.2   reverse() 在原数组本身基础上将元素顺序颠倒

    var array7=[1,2,3];
    console.log(array7.reverse()) //[3,2,1]

    6.3  sort() 数组排序

          var array8=["apple","cherry","cherry"];
          console.log(array8.sort());    //["apple", "cherry", "cherry"]
          array8.push(undefined);
          console.log(array8.sort());   //undefined会被放到最后 ["apple", "cherry", "cherry", undefined]

    若想改变排序规则,需要传入一个比较函数:

        var array9=[33,4,11,222];                                                 
        console.log(array9.sort());   //11,222,33,4   默认以第一个数字比较                  
        console.log(array9.sort(function(a,b){             //从小到大排列               
            return a-b;                                                           
        }))                                                                                                                                               

    字符排序默认区分大小小,以首字母ASCII编码为根据,从小到达排序:

        var array10=["ant","Boy","cat","Dog"];                                   
        console.log(array10.sort());      //["Boy", "Dog", "ant", "cat"]         
        console.log(                                                             
                array10.sort(function(s,t){                                      
                var a= s.toLowerCase();                                          
                    var b= t.toLowerCase();                                      
                    if(a<b) return -1;                                           
                    if(a>b) return 1;                                            
                    return 0;                                                    
                })                                                               
        );         //   ["ant", "Boy", "cat", "Dog"]                             

    6.4 concat() 数组连接

         var array11=[1,2,3];                                                                
        console.log(array11.concat(4,5));     //[1,2,3,4,5]                                  
        console.log(array11.concat([4,5]));    //[1,2,3,4,5]                                 
        console.log(array11.concat("4",[5,[6,[7,8]]]))       //[1, 2, 3, "4", 5, Array[2]]   

    6.5  slice(第一个位置,第二个位置)  

    返回从第一个位置(包括)到第二个位置的子数组;

    如果只制定一个参数,则返回从指定位置到数组结尾的所有元素组成的子数组;

    若参数出现负数,则标识从后往前数的位置下标;

        var array12=[1,2,3,4,5];                          
        console.log(array12.slice(0,3));   //[1,2,3]      
        console.log(array12.slice(3));    //[4,5]         
        console.log(array12.slice(-1));   //[5]           
        console.log(array12.slice(1,-1));   //[2,3,4]     

    6.6  splice(插入或删除的起始位置,删除元素的个数) 在数组中插入、删除或替换元素的通用方法:

        var array13=[1,2,3,4,5,6,7,8];                               
        //删除                                                         
        console.log(array13.splice(4));     //[5,6,7,8]              
        console.log(array13);         //[1,2,3,4]                    
        console.log(array13.splice(1,2));  //[2,3]                   
        console.log(array13); //   [1,4]                             
        //插入                                                         
        array13.splice(1,0,"pomelo");                                
        console.log(array13);      //[1, "pomelo", 4]                
        //替换                                                         
        var array14=[1,2,3,4,5];                                     
        array14.splice(2,1,"pomelo");   //[1, 2, "pomelo", 4, 5]     
        console.log(array14)                                         

    6.7  map() 将调用此函数的数组的每个元素传递给指定函数:

        var array15=[1,2,3];                          
        var array16=array15.map(function(i){          
            return i*i;                               
        });                                           
        console.log(array16)    //[1,4,9]             

    6.8   filter() 返回调用此函数的数组的一个子集,传递的参数为返回布尔值的一个函数,该函数过滤并留下返回true的数组元素。

        var array17=[1,2,3,4,5];
        console.log(
                array17.filter(function(i){
                    return i<3
                })
        );    //[1,2]

    6.9  forEach()   用于遍历数组

        var array18=[1,2,3];
        var sum=0;
        array18.forEach(function(i){
            sum+=i*i;
        });
        console.log(sum);   //14

    6.10 every(),some() 这两个函数用于对数组进行逻辑判定,返回true或false

          var array19=[1,2,3,4,5];
         console.log(array19.some(function(i){
             return i>3;
         }));                               ///true
        console.log(array19.every(function(i){
            return i>3;     
        }));                                 ///false

    6.11  reduce(化简操作的函数,传递给函数的初始值)和reduceRight(化简操作的函数,传递给函数的初始值) 化简函数

        var array20=[1,2,3,4,5];
        var sum= array20.reduce(function(x,y){return x+y},0);//  15   函数求和
        var mult=array20.reduce(function(x,y){return x*y}); //120  求积
        var max=array20.reduce(function(x,y){return x>y?x:y}); //5  最大值

    reduceRight()与reduce()一样,只是按照数组索引从大到小的顺序

        var array21=[2,3,2];
        var result=array21.reduceRight(function(x,y){return Math.pow(y,x)});
        console.log(result);      //512   求2^(3^2)

    6.12 indexOf()和lastIndexOf()正向和反向搜索是否存在指定值,若存在返回索引下标,不存在则返回-1;

        var array21=[1,2,3,"pomelo",2,4,6];
        console.log(array21.indexOf(3));   //2
        console.log(array21.indexOf(5));    //-1
        console.log(array21.lastIndexOf(2));    //4

     喜欢请点击右下角推荐,如有疑问可以留言,转载请标明出处。

  • 相关阅读:
    Visual Studio 2010使用Visual Assist X的方法
    SQL Server 2000 评估版 升级到 SQL Server 2000 零售版
    双网卡多网络单主机同时访问
    开发即过程!立此纪念一个IT新名词的诞生
    delphi dxBarManager1 目录遍历 转为RzCheckTree2树
    5320 软件集合
    delphi tree 从一个表复制到另一个表
    DELPHI 排课系统课表
    长沙金思维 出现在GOOGLE的 金思维 相关搜索里啦!!
    如何在DBGrid的每一行前加一个单选框?
  • 原文地址:https://www.cnblogs.com/pomelott/p/6569065.html
Copyright © 2011-2022 走看看