zoukankan      html  css  js  c++  java
  • 小白科普之JavaScript的数组

    一、与其他语言数据的比较

       相同点:有序列表
       不同点:js的数组的每一项可以保存任何类型的数据;数组的大小是可以动态调整的

    二、数组创建的两种方法

    1)  var colors = new Array();//创建一个空数组,new可省略
         var colors = new Array(3);//创建一个包含3项的数组
         var colors = new Array("red","green","blue");//创建一个包含3个字符串的数组
    2)var names = [];
         var names = ["red","green","blue"];//names[2]

    三、数组的length属性

    1)  检测数组的项数
    2)可设置
    var names = ["red","green","blue"];
    names.length = 4;
    alert(names[3]);//undefined
             
    names.length = 2; //截断数字
    alert(names[2]);//undefined
          
    names[names.length]="black";
    alert(names);//red,green,blue,black
             
    names[99]="yellow";
    alert(names.length);//100         

    四、数组方法

    1) 检测数组方法
      Array.isArray()
    2)转换方法
      toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串;
      valueOf():返回的还是数组,返回数值类型的对象类型
      join():接受一个参数,已这个字符来连接数组成一个字符串
    3)栈方法(LIFO)先进后出
      push():接收任意数量的参数,逐个添加到数组的末尾,返回修改后数组的长度
      pop():从数组末尾移除最后一项,返回移除的项
    4)队列方法(FIFO)先进先出
      shift(): 移除数组的第一项,并返回该项
      unshift():在数组最前端添加任意个项,并返回新数组长度
    5)重排序方法
      reverse():反转数组项
      sort():默认按升序排列,调用每个数组项的toString()方法,然后比较得到的字符串,sort()可以接收一个比较参数,返回的还是数组
    6)操作方法
    (1)concat():先创建当前数组的一个副本,接收的参数是一个或多个数组,将这些数组的每一项都添加到结果数组中
      var names = ["red","green","blue"];
      var names1 = names.concat("brown",["black","dede"]);
    (2)slice():
      var names = ["red","green","blue"];
      var names1 = names.slice(1);//green,blue
      var names2 = names.slice(1,2);//green,blue
      删除:slice(0,2)
      插入:slice(2,0,"red","frr");//从位置2开始插入
      替换:slice(2,1,"red","frr")//删除位置2的项,然后再插入两项
    7)位置方法(都是可以接收两个参数,要查找的项和(可选)表示查找起点位置的索引)
      indexOf():从数组的开头向后查,返回要查找的项在数组中的位置
      lastIndexOf():从数组的末尾向前查,返回要查找的项在数组中的位置
    8)迭代方法
      every():对数组的每一项运行给定函数,如果该函数对每一项给返回true,则返回true
      filter():返回由给定函数过滤后的数组
      forEach():只是对数组的每一项运行给定函数,没有返回值
      map():对数组的每一项运行给定函数,返回函数运行结果组成的数组
      some():对数组的每一项运行给定函数,如果该函数对某一项返回true,则返回true
    9)归并方法
      reduce():这里和python的list方法特别像,自己的理解,会根据每一项上调用的函数,迭代数组的每一项,然后返回一个最后的结果
      reduceRight():同reduce(),只是从数组的最后一项开始迭代

    五、数组的判别方法

    5.1 JavaScript的数据类型

      JavaScript共有六种数据类型,分别是:number、string、object、Boolean、null、undefined

    5.2 类型判断方法

      使用typeof可以判断大部分数据类型,使用方法为:

    var a = "abc"; 
    console.log(typeof a); //string
    
    var a = 123;  
    console.log(typeof a); //number
    
    var a = false; 
    console.log(typeof a); //boolean
    
    var a; 
    console.log(typeof a); //false
    
    var a = null; 
    console.log(typeof a); //object
    
    var a = document; 
    console.log(typeof a); //object
    
    var a = []; 
    console.log(typeof a); //object
    
    var a = function(){}; 
    console.log(typeof a) //function   除了可以判断数据类型还可以判断function类型
    View Code

      可以发现object、null、undefined返回的都是object,而函数返回的类型是function。今天就先来看下如何判断给定数据是否是数组类型吧。

    5.3 数组类型判断

    (1)使用instanceof运算符判断

    var arr=[];
    console.log(arr instanceof Array) //返回true  

    (2)使用constructor判断

      constructor属性是返回对创建此对象的函数的引用,举个栗子说明constructor的使用吧:

    function employee(name,job,born) {
        this.name=name;
        this.job=job;
        this.born=born;
    }
    
    var bill=new employee("Bill Gates","Engineer",1985);
    console.log(bill.constructor);
    /* 输出结果:
    function employee(name,job,born) {
        this.name=name;
        this.job=job;
        this.born=born;
    }
    */
    View Code

      so,使用constructor属性判断数组的使用方式就是:

    console.log([].constructor == Array);

    (3)使用constructor判断的增强方式

    function isArray(object){
        return object && typeof object==='object' &&
                Array == object.constructor;
    }
    View Code

      使用这种方式有一点是需要注意的:

      使用instaceof和construcor,被判断的array必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor;会返回false。
      原因:
    a) array属于引用型数据,在传递过程中,仅仅是引用地址的传递。
    b) 每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array所对应的构造函数是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array;切记,不然很难跟踪问题!

    (4)最复杂的判断方式

    function isArray(object){
        return  object && typeof object==='object' &&    
                typeof object.length==='number' &&  
                typeof object.splice==='function' &&    
                 //判断length属性是否是可枚举的 对于数组 将得到false  
                !(object.propertyIsEnumerable('length'));
    }

      有length和splice并不一定是数组,因为可以为对象添加属性,而不能枚举length属性,才是最重要的判断因子。

      

      大家可能对propertyIsEnumerable 方法不太熟悉,该方法是用来判断指定的属性是否可列举:

      object. propertyIsEnumerable(proName)

      如果 proName 存在于 object 中且可以使用一个 for…in 循环穷举出来,那么propertyIsEnumerable属性返回 true。如果 object 不具有所指定的属性或者所指定的属性不是可列举的,那么propertyIsEnumerable 属性返回 false。propertyIsEnumerable 属性不考虑原型链中的对象。

    (5)最简单的判断方式

    function isArray(o) {
        return Object.prototype.toString.call(o) === '[object Array]';
    }
    var arr = [1,2,3];
    console.log(isArray(arr));

    六、面试常考的数组的题型

    //排序算法
    window.onload = function(){
        var array = [0,1,2,44,4,
                    324,5,65,6,6,
                    34,4,5,6,2,
                    43,5,6,62,43,
                    5,1,4,51,56,
                    76,7,7,2,1,
                    45,4,6,7,8];
        //var array = [4,2,5,1,0,3];
        array = sorting.shellSort(array);
        alert(array);
    }
     
    var sorting = {
        //利用sort方法进行排序
        systemSort: function(arr){
            return arr.sort(function(a,b){
                return a-b;
            });
        },
     
        //冒泡排序
        bubbleSort: function(arr){
            var len=arr.length, tmp;
            for(var i=0;i<len-1;i++){
                for(var j=0;j<len-1-i;j++){
                    if(arr[j]>arr[j+1]){
                        tmp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = tmp;
                    }
                }
            }
            return arr;
        },
     
        //快速排序
        quickSort: function(arr){
            var low=0, high=arr.length-1;
            sort(low,high);
            function sort(low, high){
                if(low<high){
                    var mid = (function(low, high){
                        var tmp = arr[low];
                        while(low<high){
                            while(low<high&&arr[high]>=tmp){
                                high--;
                            }
                            arr[low] = arr[high];
                            while(low<high&&arr[low]<=tmp){
                                low++;
                            }
                            arr[high] = arr[low];
                        }
                        arr[low] = tmp;
                        return low;
                    })(low, high);
                    sort(low, mid-1);
                    sort(mid+1,high);
                }
            }
            return arr;
        },
     
        //插入排序
        insertSort: function(arr){
            var len = arr.length;
            for(var i=1;i<len;i++){
                var tmp = arr[i];
                for(var j=i-1;j>=0;j--){
                    if(tmp<arr[j]){
                        arr[j+1] = arr[j];
                    }else{
                        arr[j+1] = tmp;
                        break;
                    }
                }
            }
            return arr;
        },
     
        //希尔排序
        shellSort: function(arr){
            console.log(arr);
            var h = 1;
            while(h<=arr.length/3){
                h = h*3+1;  //O(n^(3/2))by Knuth,1973
            }
            for( ;h>=1;h=Math.floor(h/3)){
                for(var k=0;k<h;k++){
                    for(var i=h+k;i<arr.length;i+=h){
                        for(var j=i;j>=h&&arr[j]<arr[j-h];j-=h){
                            var tmp = arr[j];
                            arr[j] = arr[j-h];
                            arr[j-h] = tmp;
                        }
                    }
                }
            }
            return arr;
        }
    }
  • 相关阅读:
    Python——数据结构——字典
    Python——print()函数
    Python数据结构——序列总结
    elasticsearch全文检索java
    elasticsearch单例模式连接 java
    【转载】信号中断 与 慢系统调用
    设计模式——状态模式(C++实现)
    设计模式——观察者模式(C++实现)
    C++调用C方法
    设计模式——外观模式(C++实现)
  • 原文地址:https://www.cnblogs.com/borage/p/4415295.html
Copyright © 2011-2022 走看看