• JavaScript数组笔记


    Array是js中另一个常用引用类型,这里需要注意的是,Js数组与其它语言的数组有一个很大的不同之处,就是js同一个数组的每一项可以保存不同任何数据类型,也就是说,某个js数组的第一个数据是数值类型,第二个数据可以用来保存字符串类型的数据。Array类型是js的原生引用类型之一。

    创建数组##

    创建数组,有两种基本方式:构造函数和数组字面量表示法。接下来依次介绍用这两种方法创建数组

    方法一:使用new操作符跟Array构造函数,new操作符可以省略
    请看例1:

    var colors=new Array();
    

    Array构造函数可接收参数,这个时候分为两种形式
    1.接收到的是一个数值,请看例2:

    var colors=new Array(3);//这个时候会创建一个长度为三的数组
    

    2.接收到的是字符串,请看例3:

    var colors1=new Array("pink","red","blue");
    //创建了一个包含三个字符串的数组,数组长度为3
    var colors2=new Array("pink");
    //创建了一个包含一个字符串的数组,数组长度为1
    

    使用数组字面量表示法,数组字面量表示法由一对方括号包含数组项,每一项以逗号隔开
    请看例4:

    var colors=["red","pink","blue"];//创建一个包含三个字符串的数组
    var num=[1,2,3];
    var ary=[ ];//创建一个空数组
    

    读取和修改数组##

    每次创建一个数组的实例,都有一个属性length,length的值返回数组项的个数,并且length的值是可以改变的,要获得一个数组的长度,即获得数组里有多少项数据,可以通过如下语法:数组名.length( )
    例如:

    colors.length( );//根据例4的数组colors,应返回3
    ary.length( );//0
    

    1读取数组里的某一项
    可以使用数组名后面跟一个方括号,方括号里是数字索引,这里我们使用例4的数组
    colors,读取数组里面的第一项:

    colors[0];//red
    

    2修改数组里的某一项
    接着例4创建的数组colors,修改数组里面的第一项,请看例5

    	colors[0]="black";//数组里的第一项原本是red,此时被修改为“black”
    

    3增加数组的长度
    前面已经说过,js数组的length属性值可以改变,我们可以通过设置length属性的值来,增加数组的长度,比如想要增加上面例4中colors数组的长度到4,可以使用如下方法:

    colors.length=4;
    //数组原本的length值为3,现在将其设置为4
    alert(colors[4])//undefined,因为这里只是在数组的最后面添加了一项,但是并未给该项赋值,所以返回undefined
    

    4删除数组中的项,以上面的例4来说

    colors.length=2;
    //数组原本的length值为3,现在将其设置为2
    alert(colors[2]);
    //undefined,因为通过上面的一行代码,将数组的长度设置为2,在弹出第三项就会返回undefined
    

    数组高级操作##

    检测数组###

    对于一个网页或者一个全局作用域来说,可以使用instanceof操作符:

    if(value instanceof Array){
    	//对于数组的操作
    }
    

    其问题在于,instanceof假设只有一个作用域,但是当网页中包含多个框架的时候,就会存在两个或以
    上不同的全局环境,从而存在两个以上不同版本的Array构造函数,如果从一个框架向另一个框架传入
    一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的函数,这个时候可以
    使用:
    Array.isArray()
    方法,这个方法用来确定某个对象到底是不是数组,而不管它是在哪个全局作用域中:

    if(Array.isArray(value)){
    //对于数组的操作
    }
    

    转换方法###

    所有的对象都有toString()、toLocaleString()、和value()方法。
    调用toString()方法会返回有数组中每一项的字符串拼接而成的一个一逗号分隔的字符串,因为对数
    组调用toString()方法的时候,会首先对数组的每一项调用toString()方法,返回该项的字符串表示
    ,然后用逗号连接每一项,得到最终的结果。
    调用toLocaleString()方法,与toString()方法一样样会返回有数组中每一项的字符串拼接而成的
    一个一逗号分隔的字符串,但是调用toLocaleString()方法时是调用数组每一项的toLocaleString(
    )方法。
    调用value(),返回的还是数组。

    栈方法###

    栈是一种后进先出的数据结构。而栈中项的插入(也叫推入)移除()也叫弹出,只发生栈的顶部。
    JavaScript为数组提供了push()方法和pop()方法,可以让开发者实现类似栈的操作。
    push()方法可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度;
    pop()方法从数组末尾移除最后一项,减少数组length值,然后返回移除的项
    请看下面的例子:

    var colors=new Array();						
    //creat array
    var count=colors.push("red","green");		
    //推入两项
    alert(count);								
    //2
    count=colors.push("black");					
    //推入第三项
    alert(count);								
    //3
    
    var item=colors.pop();						
    //调用pop方法
    alert(item);								
    //"black"
    alert(colors.length);						
    //2
    

    队列方法###

    队列是一种先进先出的数据结构,js提供了shift()方法,该方法能够移除数组中的第一项,并返回
    该项,同时将数组的长度减1。结合使用push()方法和shift()方法,可以对js数组实现类似队列的
    操作。

    var colors=new Array();						
    //creat array
    var count=colors.push("red","green");		
    //推入两项
    alert(count);								
    //2
    count=colors.push("black");					
    //推入第三项
    alert(count);								
    //3
    var item=colors.shift();					
    //取得数组第一项
    alert(item);								
    //"black"
    alert(colors.length);						
    //2
    

    操作方法###

    js提供的操作数组的方法有:concat(),slice(),splice()

    (1)concat()方法####

    该方法可以基于当前数组创建一个新的数组。具体来说,这个方法会创建一个
    当前数组的副本,然后将他接受到的参数添加到这个副本的末尾,最后返回新构建的数组。而在没有给
    concat()方法传入参数时,它只会复制当前数组并返回副本。如果传递的参数是一个或多个数组,则该方法会将这些数组中的项一一添加到结果数组中去。如果传递的不是数组,这些值就会被简单的添加到结果数组的末尾。
    请看下面的例子:

    var colors=["red","green","blue"];
    var colors2=colors.concat("yellow",["black","brown"]);
    alert(colors);
    //red,green,blue
    alert(colors2);
    //red,green,blue,yellow,black,brown
    

    (2)slice()方法####

    该方法能够基于当前数组中的一个或多个项创建一个新的数组,该方法可以接受一个或两个参数,这两个参数分别代表要返回的新数组在当前数组中的起始和结束位置。如果起始位置大于结束位置,则返回空数组。
    请看下面的例子:

    var colors=["red","green","blue","yellow","black","brown"];
    var colors2=colors.slice(1);
    var colors3=colors.slice(1,4);
    var colors4=colors.slice(-2,-3);
    alert(colors);
    //red,green,blue,yellow,black,brown
    //该方法不会改变原数组
    alert(colors2);
    //green,blue,yellow,black,brown
    //传递一个参数,会返回从该参数位置的下一项开始到数组结束的所有项
    alert(colors3);
    //green,blue,yellow
    //传递两个参数,返回从第一个参数位置的下一项到第二个参数项之间的所有项
    alert(colors4);
    //black
    //参数中包含负数,把每一个负数加上数组的长度,在确定相应的位置
    

    (3)splice()方法####

    该方法算是数组最强大的方法了,传入不同的参数数量,向数组中插入项、删除项和替换项。,并返回被删除的项。注意该方法会改变原始数组
    删除
    splice()方法可以删除任意数量的项。只需指定两个参数:第一个参数是第一项的位置,第二高位参数是要删除的项的个数。
    请看下面的代码

    var colors=["red","green","blue"];
    var removed=colors.splice(0,1);
    alert(colors);
    //green,blue;删除之后剩余的项
    alert(removed);
    //red;被删除的项
    

    插入
    splice()方法可以向指定的位置插入任意数量的项,只需指定三个参数:起始位置、0(要删除的项的个数)和要插入的项。请看下面的代码

    var colors=["red","green","blue"];
    var removed=colors.splice(1,0,"yellow","orange");
    alert(colors);
    //red,green,blue,yellow,orange;返回原始数组加插入的项
    alert(removed);
    //空数组;没有被删除的项
    

    替换
    splice()方法可以项指定位置插入任意数量的项,并同时删除任意数量的项,只需指定三个参数:起始位置、要删除的项和要插入的任意数量的项。注意该方法会从起始项的下一项开始删除,删除的数量为第二个参数所指定的数字,并在被删除项的原来的位置插入新的项,插入的项为第三个参数所指定。
    请看下面的代码:

    var colors=["red","green","blue"];
    var removed=colors.splice(1,1,"red","purple");
    alert(colors);
    //red,red,purple,blue;
    alert(removed);
    //green;被删除的项
    

    重排序方法###

    js为数组提供了两个方法可以用来重排序:reverse()和sort()方法。
    reverse()方法会反转数组项的位置。如以下代码所示

    var values=[1,2,3,4,5];
    values.reverse();
    alert(values);			//5,4,3,2,1
    

    sort()方法按升序排列数组,sort()方法会调用每个数组项的toString()方法,然后比较得到的字符串,确定如何排序。如一下代码所示

    var values=[0,1,5,10,15];
    values.sort();
    alert(values);			//0,1,10,15,5
    

    位置方法###

    js为数组提供了两个位置方法:index0f()和lastindexOf()方法。这两个方法都接受两个参数:要查找的项和表示查找起点位置的索引。期中index0f()方法从数组的开头(位置0)开始查找,lastindexOf()方法则从数组的末尾开始查找。这两个方法都返回要查找的项在数组中的位置,在没有找到的情况下返回-1,需要注意的是,在比较第一个参数,也就是要查找的项和数组中的项的时候,使用全等操作符,也就是说,要求要查找的项与数组中的项必须严格相等才会返回位置。
    请看下面的代码:

    var numbers=[1,2,3,4,5,4,3,2,1];
    alert(indexOf(4));//3
    alert(lastIndexOf(4));//5
    //如果只传入一个参数,那传入的参数就是要查找的项,从数组的第一项开始查找
    

    迭代方法###

    js为数组提供了五个迭代方法:every(),filter(),forEach(),map(),some()。这五个方法都接受两个参数:要在每一项上运行的函数和运行在该函数的作用域的对象(可选)-影响this的值。传入这些方法的函数,每个函数都接受三个参数:数组项的值、该项在数组中的位置和数组本身。

    every()####

    对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true。

    filter()####

    对数组中的每一项运行给定的函数,如果有返回true的项,则把这些项写成新的数组,并返回。

    forEach()####

    对数组中的每一项运行给定函数。没有返回值

    map()####

    对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

    some()####

    对数组中的每一项运行给定函数,如果该函数对数组任意一项返回true,则返回true。

    请看下面的一个例子:

    var nums=[1,2,3,4,5,4,3,2,1];
    var ls=nums.filter(function(item,index,array){
    return(item>2);
    });
    alert(ls);//3,4,5,4,3

    归并方法###

    js为数组提供了两个归并方法:reduce()和reduceRight()方法,这两个方法都会迭代数组中的每一项,然后构建一个最终的返回值。期中reduce()方法从数组的第一项开始,逐个遍历到数组末尾。reduceRight()方法则从数组的最后一项开始,向前遍历到第一项。这两个方法接受两个参数:在每一项上调用的函数和作为归并基础的初始值(可选)。传给reduce()和reduceRight()方法的函数接受4个参数:前一个值,当前值项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项之上,因此第一个参数是数组的第一项,第二噶参数就是数组的第二项。

  • 相关阅读:
    css 控制溢出文本显示省略号效果
    限制input 文本框复制粘贴
    charCodeAt()方法
    背景全透明 background: transparent
    jQuery 双击事件(dblclick)时,不触发单击事件(click)
    html textarea(文本域)自动换行
    input 文本框无法输入 有光标
    双击鼠标滚动屏幕的代码
    ABP 日志审计 返回值开启 循环引用序列化异常 Self referencing loop detected
    浏览器相关知识点一(前端面试准备)
  • 原文地址:https://www.cnblogs.com/xinxinjs/p/4720370.html
Copyright © 2020-2023  润新知