JavaScript 中数组与字符串常用方法与区别

前言

JavaScript 中为数组和字符串提供了很多方法，有时候有些方法极容易混淆。比如截取数组或者字符串的方法有 splice 和 slice及 split。今天给大家分享一下数组和字符串的常用方法。

一、数组

数组方法包括获取第一个元素及最后一个元素，删除第一个元素及最后一个元素，截取数组及合并数组等等。
1. 添加或删除数组元素
unshift 表示向头部添加元素，
push 表示向尾部添加元素，
shift 表示删除头部元素，
pop 表示删除尾部元素。

var arr=[1,2,3];
arr.unshift(0)//1 向元素头部添加一个元素，改变数组。
arr.shift()//0    删除并返回第一个元素，改变数组。
arr.push(4)//4  向尾部添加一个元素。改变数组。
arr.pop()//4   删除并返回最后一个元素，改变数组。

2. 数组排序
（1）sort
作用：将数组元素按编码排序。
示例：array.sort()。
参数：可选。规定排序顺序，必须是函数。
是否改变原数组：是。

var arr=[1,5,22,3];
var arr1 = arr.sort();
console.log(arr1)//[1, 22, 3, 5];
console.log(arr)//[1, 22, 3, 5];

说明：以上排序不是按照数值大小排序，而是按照数字编码进行排序，如果要想实现数字大小排序，需要手写排序方法。

function sortNumber(a,b){return a - b};
console.log(arr.sort(sortNumber)); //[1,3,5,22]

（2）reverse
作用：反转数组元素。
示例：array.reverse()。
参数：无参数。
是否改变原数组：是。

var arr=[1,5,22,3];
var arr1= arr.reverse();
console.log(arr1)//[3, 22, 5, 1]
console.log(arr)//[3, 22, 5, 1]

3. 数组合并
作用：将多个数组合并为一个数组。
示例：array.concat(array1,array2,array3…)。
参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
是否改变原数组：否。

var arr=[1,5,22,3],arr1=[2];
var arr1 = arr.concat(arr1);
console.log(arr1)//[1,5,22,3,2]
console.log(arr)//[1,5,22,3]

4. 数组截取
（1）slice
作用：slice 返回数组中的部分元素组成的数组。
示例：array.slice (start,end)。
参数：第一个参数为开始截取的索引值，第二个参数结束元素的索引值。
是否改变原数组：否。

var arr=[1,5,22,3];
var arr1=arr.slice(1,3)
console.log(arr1)//[5,22]
console.log(arr)//[1,5,22,3]

说明：如果第一个参数为负数则从数组尾部开始倒数，比如-1，就是数组最后一个元素，-2就是数组倒数第二个元素。第二个参数为负数，也是从数组尾部开始算起。

（2）splice
作用：splice 用于删除或添加数组中的元素。
示例：array.splice(index,howmany,item1,…,itemX)。
参数：第一个参数为开始删除的索引值，第二个参数为删除元素个数，后面的参数为将要添加到新数组的元素。
是否改变原数组：是。

var arr=[1,5,22,3];
var arr1 = arr.splice (1,3);
console.log(arr1)//[5,22,3];
console.log(arr)//[1];改变了原数组

5. 元素在数组中首次出现的位置
（1）indexOf
作用：元素在数组中首次出现的位置，从数组开头向后查找。
示例：array.indexOf(item)。
参数：参数为数组元素。

var arr=[1,5,22,3];
arr.indexOf(5)//1

（2）lastIndexOf
作用：元素在数组中首次出现的位置，从数组末尾开始向前查找。
示例：array.lastIndexOf (item)。
参数：参数为数组元素。

var arr=[1,5,22,3];
arr.lastIndexOf(5)//2

6. 数组转字符串
作用：将数组转换为字符串。
示例：array.join()。
参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr=[1,5,22,3];
arr.join()//“1,5,22,3”

二、字符串

1. 字符串截取
（1）slice
作用：返回字符串的片段。
示例：array.slice (start,end)。
参数：第一个参数为开始截取的索引值，第二个参数结束元素的索引值。

var a = "hello";
var b = a.slice(1,2);
console.log(b)//e

说明：如果第一个参数为负数则从数组尾部开始倒数，比如-1，就是数组最后一个元素，-2就是数组倒数第二个元素。第二个参数为负数，也是从数组尾部开始算起。
（2）substring
作用：返回位于String对象中指定位置的子字符串。
示例：array.substring(start,end)。
参数：第一个参数为开始截取的索引值，第二个参数结束元素的索引值;如果第二个参数大于第一个参数，支持反向截取(也就是可以将起始值和结束值颠倒过来)。

var a = "hello";
var b = a.substring(1,2);
var c = a.substring(2,1);//反向截取
console.log(b)//e
console.log(c)//e

（3）substr
作用：返回从 start 下标开始的指定数目的字符。
示例：array.substr(start,num)。
参数：第一个参数为开始截取的索引值，第二个参数为返回元素的个数。

var a = "hello";
var b = a.substr(1,2);
console.log(b)//el

2. 字符串合并
作用：将多个字符串合并为一个数组。
示例：string.concat(str1,str2,str3…)。
参数：必需。该参数可以是一个字符串，也可以是任意多个。

var a = "hello",b = "world",c = "!";
var d = a.concat(b,c) 
console.log(d)//hello world ! 功能和 “+” 拼接没啥两样 

3. 子字符串在字符串中首次出现的位置
（1）indexOf
作用：元素在字符串中首次出现的位置，从字符串头部开始向后查找。
示例：string.indexOf(str)。
参数：参数为子字符串。

var a = "hello";
console.log(a.indexOf('e'))//1 

（2）lastIndexOf**
作用：元素在字符串中首次出现的位置，从字符串末尾开始向前查找。
示例：string.lastIndexOf (str)。
参数：参数为子字符串。

var a = "hello";
console.log(a.lastIndexOf('e'))//1 

（3）split
作用：字符串分割成字符串数组。
示例：string.split(str,howmany)。
参数：第一个参数必需，字符串或正则表达式，从该参数指定的地方分割。第二个参数可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

var a = "hello:world";
var b = a.split(':');
console.log(b)//['hello','world']

三、总结

1. 数组和字符串共同的方法有slice、concat、indexOf、lastIndexOf。
2. 数组转字符串方法为 join，字符串转数组方法为 split。
3. 数组方法中会改变原数组的方法有：sort 、reverse、splice 。
4. 数组方法中 slice 与 splice 的区别是：第一，第二个参数取值不同。前者是数组尾部的索引值，后者是要截取的元素个数。第二，是原数组返回的结果不同，前者不会改变原数组，后者原数组中只剩下未被删除的元素。
5. 字符串方法中 slice、substring、substr 的区别是：第一， slice 既可用于字符串，也可以用于数组。第二，slice 与 substring 的第二个参数是要获取的尾部元素索引值。 而 substr 的第二个参数是要获取的元素个数。第三，substring 支持反向截取，比如 substring(5,2)表示截取2~5之间的字符串，而 slice 不支持。