js 数组、字符串常用函数总结

我不是女神ヾ 2022-10-30 00:32 445阅读 0赞

### 文章目录 ###

*   *  数组、字符串常用函数
     *   *  1.数组常用函数
         *   *  splice函数（改变原始数组）
             *  slice函数（不改变原始数组，创建新数组）
             *  join函数
             *  concat函数
             *  indexOf函数
             *  includes函数
         *  2.字符串常用函数
         *   *  split 函数
             *  substr函数
             *  replace函数
         *  3.数组和字符串相似方法
         *   *   *  总结：

## 数组、字符串常用函数 ##

一个函数，我们需要了解他的**作用、语法、参数、返回值**。

### 1.数组常用函数 ###

*  splice函数
 *  slice函数
 *  join函数
 *  concat函数
 *  indexOf函数
 *  includes函数

#### splice函数（改变原始数组） ####

\*\*作用：\*\*增加或删除数组元素。

**语法：**

array.splice(index,deleteCount,addItem1,addItem2...)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>index</em></td> 
   <td align="left"><strong>必需</strong>。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。</td> 
  </tr> 
  <tr> 
   <td align="left">deleteCount</td> 
   <td align="left">可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。</td> 
  </tr> 
  <tr> 
   <td align="left">addItem1…</td> 
   <td align="left">可选。要添加到数组的新元素</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">Type</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Array</td> 
   <td align="left">如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。如果没有删除元素，则返回空数组。</td> 
  </tr> 
 </tbody> 
</table>

**例子：**

//例子1
    // arr的初始值：[1,2,3,4,5]
    var b = arr.splice(1,2)
    // arr: [1,4,5]
    // b: [2,3]
    
    //例子2
    // arr的初始值：[1,2,3,4,5]
    var c = arr.splice(1,0,777,888)
    // arr: [1,777,888,2,3,4,5]
    // c:[]

#### slice函数（不改变原始数组，创建新数组） ####

\*\*作用：\*\*从已有数组返回选定的部分元素。

**语法：**

array.slice(start, end)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>start</em></td> 
   <td align="left">可选。规定复制开始位置的下标。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（<strong>包含最后一个元素</strong>）。</td> 
  </tr> 
  <tr> 
   <td align="left"><em>end</em></td> 
   <td align="left">可选。规定复制结束位置的下标（<strong>获取元素不包括此位置</strong>）。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（<strong>不包含最后一个元素，也就是只有倒数第二个元素</strong>）。</td> 
  </tr> 
 </tbody> 
</table>

如果slice参数为空，则对数组进行**浅复制**生成一个新数组。

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">Type</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Array</td> 
   <td align="left">返回一个<strong>浅复制</strong>了原数组中的元素的一个新数组，包含从 start 到 end （<strong>不包括end元素</strong>）的 arrayObject 中的元素。</td> 
  </tr> 
 </tbody> 
</table>

\*\*浅复制：\*\*是指当对象的被复制时，只是复制了对象的引用，指向的依然是同一个对象。下面的例子2说明了slice为什么是浅复制。

**例子：**

例子1：

var array = ["one", "two", "three","four", "five"];
    console.log(array.slice()); // ["one", "two", "three","four", "five"]
    console.log(array.slice(2,3)); // ["three"]

例子2：

*  如果该元素是个对象引用 ，`slice` 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。改变原数组array的值，array2也随之改变。

var array = [{ color:"yellow"}, 2, 3];
    var array2 = array.slice(0,1);
    console.log(array2); // [{color:"yellow"}]
    array[0]["color"] = "blue";
    console.log(array2); // [{color:"bule"}]

#### join函数 ####

\*\*作用：\*\*将数组的所有元素连接成一个字符串。

**语法：**

arr.join(separator)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>separator</em></td> 
   <td align="left">可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">String</td> 
   <td align="left">返回一个字符串。该字符串是在arr的每两个元素之间插入 separator 字符串而生成的。</td> 
  </tr> 
 </tbody> 
</table>

**例子：**

var arr = [1, 2, 3, 4, 5];
    var b = arr.join('!');//1!2!3!4!5

#### concat函数 ####

**作用：连接两个或多个数组/字符串**。`数组、字符串均可使用该方法`

**语法：**

arr.concat(arr1,arr2...)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">arr1,arr2…</td> 
   <td align="left"><strong>必需</strong>。该参数可以是具体的值，也可以是数组对象。可以是任意多个。</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">Type</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Array 对象</td> 
   <td align="left">返回一个新的数组，按顺序连接。</td> 
  </tr> 
 </tbody> 
</table>

**例子：**

var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var kai = ["Robin"];
    var children = hege.concat(stale,kai);
    //Cecilie,Lone,Emil,Tobias,Linus,Robin

#### indexOf函数 ####

\*\*作用：\*\*在数组中返回指定元素第一次出现的索引值。不存在则返回-1。

**语法：**

arr.indexOf(item,start)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>item</em></td> 
   <td align="left"><strong>必需</strong>。查找的元素。</td> 
  </tr> 
  <tr> 
   <td align="left"><em>start</em></td> 
   <td align="left">可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Number</td> 
   <td align="left">元素在数组第一次出现的位置，如果没有搜索到则返回 -1。</td> 
  </tr> 
 </tbody> 
</table>

**例子**

var arr = [1, 2, 3, 2, 1];
    var b = arr.indexOf(2);//1
    var c = arr.indexOf(2, 2);//3

**indexOf使用严格相等（即使用 === 去匹配数组中的元素）。**

var arr = [1, 2, 3, "2", 1];
    var b = arr.indexOf(2);
    console.log(b);//1
    var c = arr.indexOf(2, 2);
    console.log(c);//-1

#### includes函数 ####

\*\*作用：\*\*判断一个数组是否包含一个指定的值。如果是，返回true，否则返回false。

**语法：**

arr.includes(item,start);

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">item</td> 
   <td align="left"><strong>必需</strong>。需要查找的元素值。</td> 
  </tr> 
  <tr> 
   <td align="left">start</td> 
   <td align="left">可选。从该索引处开始查找。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。</td> 
  </tr> 
 </tbody> 
</table>

\*\*返回值：\*\*布尔值。如果找到指定值返回 true，否则返回 false。

**例子：**

var array = [-0, 1, 2];
    console.log(array.includes(+0)); // true
    console.log(array.includes(1)); // true
    console.log(array.includes(2,-4)); // true

\*\*JavaScript一直以来都不区分 -0 和 +0 \*\*

\*\*Q:\*\*indexOf和includes都能用于判断是否有某元素，arr.indexOf(x)>-1不就等于arr.includes(x)吗？includes存在的意义？两者的区别？

\*\*A:\*\*includes能够发现NaN，而indexOf不能。

var array = [NaN];
    console.log(array.includes(NaN)); // true
    console.log(arra.indexOf(NaN)>-1); // false

### 2.字符串常用函数 ###

*  split函数
 *  substr函数
 *  replace函数

#### split 函数 ####

\*\*作用：\*\*将字符串分割成数组，不改变原始字符串

**语法：**

string.split(separator,limit)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>separator</em></td> 
   <td align="left">可选。字符串或正则表达式，从该参数指定的地方分割 string Object。</td> 
  </tr> 
  <tr> 
   <td align="left"><em>limit</em></td> 
   <td align="left">可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Array</td> 
   <td align="left">一个字符串数组。返回的数组中的字串不包括 separator 自身。</td> 
  </tr> 
 </tbody> 
</table>

**例子：**

var str = "How are you doing today?";
    var a = str.split();
    console.log(a);//["How are you doing today?"]
    
    var b = str.split('');//分割每个字符，包括空格
    console.log(b);
    //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
    
    var c = str.split(' ');
    console.log(c);
    //["How", "are", "you", "doing", "today?"]
    
    var d = str.split(' ', 3);
    console.log(d);
    //["How", "are", "you"]

#### substr函数 ####

\*\*作用：\*\*返回字符串指定位置开始的指定数量的字符。

**语法：**

string.substr(start,length)

**参数值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>start</em></td> 
   <td align="left"><strong>必需</strong>。子串的起始下标，必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。</td> 
  </tr> 
  <tr> 
   <td align="left"><em>length</em></td> 
   <td align="left">可选。子串中长度，必须是数值。如果省略了该参数，那么返回从 string的开始位置到结尾的字串。</td> 
  </tr> 
 </tbody> 
</table>

\*\*返回值：\*\*子字符串。

**例子：**

var str = "Hello world!";
    var n = str.substr(2, 3)
    console.log(n);//llo

#### replace函数 ####

\*\*作用：\*\*在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

**语法：**

string.replace(searchvalue,newvalue)

**参数：**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>searchvalue</em></td> 
   <td align="left"><strong>必须</strong>。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式</td> 
  </tr> 
  <tr> 
   <td align="left"><em>newvalue</em></td> 
   <td align="left">必需。一个字符串值。规定了替换文本或生成替换文本的函数。</td> 
  </tr> 
 </tbody> 
</table>

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">String</td> 
   <td align="left">一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。</td> 
  </tr> 
 </tbody> 
</table>

**例子：**

//执行一个全局替换:
    var str="Mr Blue has a blue house and a blue car";
    var n=str.replace(/blue/g,"red");
    //Mr Blue has a red house and a red car

### 3.数组和字符串相似方法 ###

数组和字符串有很多相似的方法，比如数组和字符串都有以下方法：

*  slice
 *  concat
 *  indexOf
 *  includes

##### 总结： #####

**1.字符串的设置查找起点的参数不支持负数，而数组支持。**

**2.字符串在传入参数不是字符串会进行类型转换为字符串，数组不会进行类型转换**

`下面看一遍，以后就可以不看`

**字符串的indexOf和数组中的indexOf的比较**

*  字符串中的indexOf中的第二个参数不支持负数而数组的indexOf支持

let str = "abcd";
    let arr = ["a","b","c","d"];
    console.log(str.indexOf("a", -1)); //0
    console.log(arr.indexOf("a", -1)); //-1