JavaScript 数组

2021-05-06 10:55:09 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=11

目录:

1、什么是数组

数组对象的作用是:使用单独的变量名来存储一系列的值。

在javascript中没有二维数组的概念,只有一维。但是可以“动态传值”模拟出二维或多维数组。

2、如何创建数组

    1、常规方式  new Array()  myCars[0]="BMW";

    2、简洁方式 myCars=new Array("BMW","Volvo");

    3、字面 myCars=["BMW","Volvo"];

3、访问和修改数组

    访问:var name=myCars[0];

    修改:myCars[0]="Benz";

4、数组方法和属性 length 长度属性\indexOf()方法\join方法\push方法\unshift()\shift()\pop()\slice()\splice()


内容:

1、什么是数组

数组对象的作用是:使用单独的变量名来存储一系列的值。

在javascript中没有二维数组的概念,只有一维。但是可以“动态传值”模拟出二维或多维数组。

一维数组:

<script>
    var arr= [1,2,3];
    document.write(arr[2]);//3
</script>

二维数组:

<script>
    var arr= [[1,2,3],[4,5,6]];
    document.write(arr[0][2]);//3
</script>

更多二维或者多维护数组的定义参见:点击查看

2、如何创建数组

    1、常规方式

<script>
    var myCars=new Array();
    myCars[0]="BMW";      
    myCars[1]="Volvo"; 
    document.write(myCars[0]+"+"+myCars[1]);
</script>

    2、简洁方式

<script>
    var myCars=new Array("BMW","Volvo");
    document.write(myCars[0]+"+"+myCars[1]);
</script>

    3、字面

<script>
    var myCars=["BMW","Volvo"];
    document.write(myCars[0]+"+"+myCars[1]);
</script>


3、访问和修改数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。 

以下实例可以访问myCars数组的第一个值: 

var name=myCars[0]; 

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel"; 

[0] 是数组的第一个元素。[1] 是数组的第二个元素。下标从0开始得。

<script>
    var myCars=["BMW","Volvo"];
    document.write(myCars[0]+"+"+myCars[1]);
    myCars[0]="Benz";//把宝马换成奔驰
    document.write("<br/>"+myCars[0]+"+"+myCars[1]);
</script>

4、数组方法和属性

  • length 长度属性

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.length;
    document.write("元素个数:"+x);
</script>
  • indexOf()方法 找到就返回对应的下标位置,若没找到就返回-1

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.indexOf("BMW");
    document.write("BMW所在的位置是:"+x);
</script>
  • join方法

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.join("|");
    document.write(x);//BMW|Volvo
</script>
  • push方法

    该方法用于向数组末尾添加一个或者多个元素,并返回新的长度。

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.push("Rolls-Royce");
    document.write(myCars);//数据结构 :BMW,Volvo,Rolls-Royce
</script>
  • unshift()

该方法用于向数组的开头添加一个或者多个元素,并返回新的长度。

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.unshift("Rolls-Royce");
    document.write(myCars);//数据结构 :Rolls-Royce,BMW,Volvo
    document.write("<br/>"+x);//3
</script>
  • shift()

该方法用于删除数组的第一个元素,并返回被删除的元素。

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.shift();
    document.write(x);//BMW
    
    //Volvo 因为删除了bmw,所以只剩下Volvo
    document.write("<br/>"+myCars);//Volvo
    
</script>
  • pop()

该方法用于删除数组的最后一个元素,并返回被删除的元素。

<script>
    var myCars=["BMW","Volvo"];
    var x=myCars.pop();
    document.write(x);//Volvo
</script>
  • slice()

slice()定义:从已有的数组中返回你选择的某段数组元素
slice()语法:arrayObject.slice(start,end)
注: 

①:start表示从何处开始选取,end表示从何处开始结束选取,表示一个选取的范围
②:start可以为负数,此时它规定从数组尾部开始算起的位置。也就是-1 ,指最后一个元素,-2 指倒数第二个元素,以此类推
③:end如果没有被指定参数,数组会包含从 start 到最后一个数组元素的所有元素
④:slice()方法不会修改数组本身,而是返回所选取范围的数组元素。如果想删除数组中的某一个元素,需要使用splice()


<script>
    var myCars=["a","b","c","d","e","f","g"];
    var x=myCars.slice(0,3);
    document.write(x);//a,b,c
    document.write("<br/>");
    var y=myCars.slice(3,6);
    document.write(y);//d,e,f
    document.write("<br/>");
    document.write(myCars);//a,b,c,d,e,f,g
</script>
  • splice()

splice()定义:从数组中添加或删除元素,然后返回被删除的数组元素。
 splice()语法:

arrayObject.splice(index,howmany,item1,.....,itemX)
注:
①:index表示从什么位置开始添加或删除数组元素
②:howmany表示删除的元素数量,如果为0,则表示不删除数组元素
③:item1,.....,itemX表示新增的数组元素
④:splice()方法会改变原始数组

<script>
    //splice 从第0个元素开始截取,截取3个,然后增加元素aa
    var myCars=["a","b","c","d","e","f","g"];
    var x=myCars.splice(0,3,"aa","bb");
    document.write(x);//a,b,c
    document.write("<br/>");
    document.write(myCars);//aa,bb,d,e,f,g
</script>