数组的基本操作

傷城~ 2022-05-26 07:11 358阅读 0赞

#  #

# 一、改变原数组的方法 #

Ecmascript中的所有版本能改变原数组的方法，就这7个！

push，pop，unshift，shift，reverse，splice，sort。

--------------------

**push()**

**在数组后添加一个多个值**

例如：

此时输出

\[1,3,2,5\]

--------------------

pop()

**把数组最后一位值删除并返回 , 不需要传参，传参也没有用**

语法：

此时输出

**\[1,3,2\]**

**pop会把删除的数据返回出去**

所以可以变量接收值

此时输出 arr2 的值为 5

--------------------

unshift()

**在数组前添加一个值。（参数可以多个）**

例如：

此时输出 arr 的值为

\[1,3,2,5,6,8,9\]

此方法类似  push()  ，只是添加值的方向不同

--------------------

shift()

**把数组第一位值删除并返回 , 不需要传参，传参也没有用**

例如：

console.log(arr);

console.log(arr2);</script>

此时输出

arr 为 \[3,2,5\]

arr2为 1

--------------------

**reverse()**

**颠倒数组中元素的顺序.**

输出 arr 为

\[5,2,3,1\]

--------------------

splice()

**从数组中添加/删除项目，然后返回被删除的项目。**

**语法：**

**arr.splice(从下标为n的地方开始删除，删除 x 位，在删除的地方添加新数据)**

被删除的值可以用来接收，接收的是数组

从第二位开始，删除2位，在删除的地方添加66，88

输出

\[1,3,66,88\]

--------------------

sort()  -- 可以自定义数组的顺序，一个没啥用但是容易面试到的方法

用于对数组的元素进行排序。

例如：

控制台测试：

![QQ浏览器截图\_20180313141105\_CB3C8B1BA0594e518B9FE3973469070E.jpg][QQ_20180313141105_CB3C8B1BA0594e518B9FE3973469070E.jpg]

默认使用ASK码进行排序的。

也可以在sort()的小括号里传入方法（可以使用函数引用，或者直接使用匿名函数），需要注意的是：

1.传入的方法必须要有两个形参。

2.看返回值，

当返回值为负数时，那么值的位置不变。

当返回值为正数时，那么前面的值和后面的值位置互换。

当返回值为0的时候，位置不变

例如：

按数字排序的方法

当  a < b  返回的肯定是负数，前后位置不变

当  a > b  返回的肯定是正数，前后位置互换

当  a = b  返回的是0，前后位置不变。

这样就形成了一个数字的从小到大的升序。

控制台测试：

![QQ浏览器截图\_20180313145955\_76425461B02C444d8C112BE0A984954F.jpg][QQ_20180313145955_76425461B02C444d8C112BE0A984954F.jpg]

如果要降序的话把a - b 改为 b - a 即可。

--------------------

关于  sort  的试题

要求把一个有序数组乱序。

var o = [1,2,3,4,5,6,7,];

答：使用 `Math.random()`  。因为  `Math.random()`  产生一个 0 -1 的随机数。所以

返回值随机正负。

--------------------

按照字节长度降序排列数组：

--------------------

# 二、不改变原数组的方法 #

以上说的方法都会改变原数组，

接下来的方法不会改变原数组，而是在原数组的基础上生成新数组。

concat()

**concat() 方法用于连接两个或多个数组。**

**该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。**

**语法：**

arrayObject.concat(arrayX,arrayX,......,arrayX)

**例如：**

输出 arr3 为

\[1,3,2,5\]

--------------------

toString()

**把数组里的值变成字符串返回出来**

例如：

输出 arr2 为一个字符串

"1,3,2,5"

--------------------

slice()

语法

**slice() 方法可从已有的数组中返回选定的元素。**

**slice(从下标为 n 的地方开始获取，获取到下标为 x 的地方结束)** \-->第 x 位不会被获取

arrayObject.slice(start,end)

<table style="color:rgb(103,106,108);font-family:'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;border-spacing:0px;">     
 <thead> 
  <tr> 
   <th style="padding:0px;">参数</th> 
   <th style="padding:0px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:0px;">start</td> 
   <td style="padding:0px;">必需。<span style="color:#ff6666;">规定从何处开始选取</span>。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。</td> 
  </tr> 
  <tr> 
   <td style="padding:0px;">end</td> 
   <td style="padding:0px;"><span style="color:#ff6666;">可选。规定从何处结束选取。</span>该参数是数组片断结束处的数组下标。<span style="color:#ff6666;">如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素</span>。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

返回一个新的数组，包含从 start 到 end （不包括 end 元素）

例如：

此时输出 arr2 的值为一个数组

\[3,2\]

如果 slice() 不写参数的话，则会获取整个数组。

--------------------

join()

join() 方法用于把数组中的**所有元素放入一个字符串。**

**元素是通过指定的分隔符进行分隔的，返回的也是字符串。**

### 语法 ###

arr.join(separator)

例如：

输出 arr2 为

"1-3-2-5"

--------------------

split()

split() 方法用于把一个字符串按指定符号分割成字符串数组。

### 语法 ###

arr.split(separator,howmany)

<table style="color:rgb(103,106,108);font-family:'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;border-spacing:0px;">     
 <thead> 
  <tr> 
   <th style="padding:0px;">参数</th> 
   <th style="padding:0px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:0px;">separator</td> 
   <td style="padding:0px;">必需。字符串或正则表达式，从该参数指定的地方分割 。</td> 
  </tr> 
  <tr> 
   <td style="padding:0px;">howmany</td> 
   <td style="padding:0px;">可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。</td> 
  </tr> 
 </tbody> 
</table>

例如：

此时输出 arr2 为一个数组

\["1", "3", "2", "5"\]

[QQ_20180313141105_CB3C8B1BA0594e518B9FE3973469070E.jpg]: http://blog.mobaii.com/Public/Uploads/2018-03-13/5aa76b819a9f8.jpg
[QQ_20180313145955_76425461B02C444d8C112BE0A984954F.jpg]: http://blog.mobaii.com/Public/Uploads/2018-03-13/5aa776f8ab86e.jpg