JavaScript Array数组操作详解

柔情只为你懂 2022-05-28 09:48 237阅读 0赞

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

1.创建一个Array(三种方式)

//第一种
    var car = new Array();
    mycars[0] = "Saab";
    mycars[1] = "Volvo";
    mycars[2] = "BMW";
    //第二种
    var Car=new Array("Saab","Volvo","BMW");
    //第三种
    var Car=["Saab","Volvo","BMW"];

2.访问数组

//访问Car数组的第一个值：
    var name=myCars[0];
    //修改数组的第一个元素:
    Car[0]="Opel";

3. 在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
    myArray[1]=myFunction;
    myArray[2]=myCars;

4.删除元素

通过splice(a,b);删除

通过delete删除

delete删除掉数组中的元素后，会把该下标出的值置为undefined,**数组的长度不会变**[·][Link 1]

var arr = ['a','b','c','d'];
    delete arr[1];
    arr;  
    //["a", undefined × 1, "c", "d"] 中间出现两个逗号，数组长度不变，有一项为undefined

## Array 对象属性 ##

## Array 对象方法 ##

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);width:180px;">方法</th> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">描述</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_concat_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">concat()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">连接两个或更多的数组，并返回结果。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_join.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">join()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_pop.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">pop()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">删除并返回数组的最后一个元素</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_push.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">push()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">向数组的末尾添加一个或更多元素，并返回新的长度。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_reverse.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">reverse()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">颠倒数组中元素的顺序。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_shift.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">shift()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">删除并返回数组的第一个元素</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_slice_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">slice()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">从某个已有的数组返回选定的元素</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_sort.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">sort()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">对数组的元素进行排序</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_splice.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">splice()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">删除元素，并向数组添加新元素。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_tosource_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">toSource()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">返回该对象的源代码。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_toString_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">toString()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">把数组转换为字符串，并返回结果。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_toLocaleString_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">toLocaleString()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">把数组转换为本地数组，并返回结果。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_unshift.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">unshift()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">向数组的开头添加一个或更多元素，并返回新的长度。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_valueof_array.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">valueOf()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">返回数组对象的原始值</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://caibaojian.com/js-splice-element.html