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

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

  • 相关阅读:
    STL 算法 std::min
    SAP UI5 初学者教程之五:视图控制器初探 试读版
    SAP UI5 的初始化过程
    Angular 应用里的摇树优化
    Angular 应用里的 vendor.js 是用来干什么的?
    SAP UI5 初学者教程之四:XML 视图初探试读版
    SAP UI5 初学者教程之三:开始接触第一个 SAP UI5 控件 试读版
    SAP UI5 初学者教程之二:SAP UI5 的引导过程(Bootstrap) 试读版
    SAP UI5 初学者教程之一:Hello World 试读版
    SAP UI5 初学者教程的学习目录
  • 原文地址:https://www.cnblogs.com/pomelott/p/6569065.html
Copyright © 2011-2022 走看看