javascript的splice、slice、split的比较

男娘i 2022-07-17 00:21 187阅读 0赞

## 今天比较一下[JavaScript Array 对象][JavaScript Array]的三个方法：splice、slice、split：    ##

## 1、splice定义和用法 ##

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

**注释：**该方法会改变原始数组。

### 语法 ###

arrayObject.splice(index,howmany,item1,.....,itemX)

<table style=""> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; text-align:left; width:155px; background-color:rgb(213,213,213)"> 参数</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; text-align:left; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> index</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> howmany</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> item1, ..., itemX</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 可选。向数组添加的新项目。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

### 说明 ###

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

## 提示和注释 ##

**注释：**请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

## 实例 ##

### 例子 1 ###

在本例中，我们将创建一个新数组，并向其添加一个元素：

输出：

George,John,Thomas,James,Adrew,Martin
    George,John,William,Thomas,James,Adrew,Martin

## 2、slice定义和用法 ##

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

### 语法 ###

arrayObject.slice(start,end)

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); white-space:nowrap; vertical-align:baseline; text-align:left; background-color:rgb(213,213,213)"> 参数</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; text-align:left; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> start</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> end</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

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

### 说明 ###

请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

## 提示和注释 ##

**注释：**您可使用负值从数组的尾部选取元素。

**注释：**如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

## 实例 ##

### 例子 1 ###

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

George,John,Thomas
    John,Thomas
    George,John,Thomas

### 例子 2 ###

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

George,John,Thomas,James,Adrew,Martin
    Thomas,James
    George,John,Thomas,James,Adrew,Martin

## 3、split()定义和用法 ##

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

### 语法 ###

stringObject.split(separator,howmany)

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; text-align:left; background-color:rgb(213,213,213)"> 参数</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; text-align:left; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> separator</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> howmany</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

一个字符串数组。该数组是通过在 *separator* 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括*separator* 自身。

但是，如果 *separator* 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

## 提示和注释 ##

**注释：**如果把空字符串 ("") 用作 *separator*，那么 stringObject 中的每个字符之间都会被分割。

**注释：**String.split() 执行的操作与 [Array.join][] 执行的操作是相反的。

## 实例 ##

### 例子 1 ###

在本例中，我们将按照不同的方式来分割字符串：

输出：

How,are,you,doing,today?
    H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
    How,are,you

### 例子 2 ###