js字符串和数组操作，容易混淆的方法总结（slice、substring、substr、splice）

平时工作中，很少静下心来总结基础知识，总觉得自己会用了，有点飘了，直到碰壁之后才懂得基础知识的重要性。大牛告诉我，一次写对，是不是可以不用F12去调试了？是不是省了时间？简直是面红耳赤，无地自容。在这里记下来，以后不能再模棱两可！

因为这几个方法长的差不多，记起来也是相当费劲，今天特意花了点时间，理清楚每个方法的具体用法，这是小白的理解，请看到这篇文章的大牛多多支持！

1、首先说，字符串和数组都有slice(start， end)方法，英文翻译是“切片”的意思，我是这么记的：去医院做生理切片的时候，医生从你身上取某个组织，做成切片，对你的身体几乎没有影响，切片最后给出结论，到底人有没有生病。我们可以类比一下，这里的“切片”，对原数据来讲也可以忽略不计，所以slice不影响原数据，最后也会给出一个“结论”，有没有返回新的字数据。我不管，我先上代码了：

字符串的：
var str1 = 'abcde'

var str2 = str1.slice(1,3)

console.log(str1, str2)

//abcde bc

数组的：
var arr1 = ['a', 'b', 'c', 'd', 'e']

var arr2 = arr1.slice(1, 3)

console.log(arr1, arr2)

// ["a", "b", "c", "d", "e"] (2) ["b", "c"]

可以看出，经过slice操作，str1和arr1没有改变，str2和arr2都有了新的返回。start和end参数这里先知道是起始和结束索引就行了，后面和其他几个方法一起理解，会更容易记忆。

2、字符串特有的操作substring（start, end）和substr(start, count)

记了很多次了，三天后必忘……看来要发挥重复记忆的本领了，当然我知道这么记肯定还是会忘，认真下来，看看这俩单词，都有“str”三个字母，substring更是带劲，明显的给出“string”字符串的英文，这样就好记忆了，这两个方法只用于操作字符串，继续上代码：

var str1 = 'abcde'

var str2 = str1.substring(1, 3)

var str3 = str1.substr(1, 3)

console.log(str1, str2) // abcde bc

console.log(str1, str3) // abcde bcd

上面代码，substring不做解释了，和slice一样，注意substr第二个参数是要截取字符的个数，从start位置开始，截取count个。
.如果start和第二个参数传入负数，该会是什么表现？

var str1 = 'abcde'

var str2 = str1.slice(-1, -3)

var str3 = str1.substring(-1, -3)

var str4 = str1.substr(-1, -3)

console.log('str1 = ' + str1 + ', ', 'str2 = ' + str2 + ', ', 'str3 = ' + str3 + ', ', 'str4 = ' +  str4)

// str1 = abcde,  str2 = ,  str3 = ,  str4 =

看到结果了吧？str2、str3、str4 都是''（空字符串），为什么会这样？因为当传入负值的时候，三种方法处理机制不一样，解释一下：
slice()单词比较短，没那么强的控制力，给它什么就处理什么，给个负值，那就用字符串长度加上该负值；
substring()单词很完整，也很长，控制了很强，你给它负值，它不为所动，统统转成0；
substr() 也是个变异的家伙，第一个参数如果是负值，它也处理，用字符串长度加上该负值，但是第二个参数标识截取长度的，长度有负值吗？没有，所以转成0；

对应上述描述，上面的代码对应修改为：

var str1 = 'abcde'

var str2 = str1.slice(5 - 1, 3 - 3)

var str3 = str1.substring(0, 0)

var str4 = str1.substr(5 - 1, 0)

console.log('str1 = ' + str1 + ', ', 'str2 = ' + str2 + ', ', 'str3 = ' + str3 + ', ', 'str4 = ' +  str4)

// str1 = abcde,  str2 = ,  str3 = ,  str4 =

是不是和上次修改前的返回结果一致？好，那就说明我们这种记忆方法可以！

先总结一下字符串的操作：
a.slice和substring都是完整的单词，这两个是一对，第二个参数都是结束序列号，放在一起记忆，substr外观上不是一个完整的单词（str缺少‘ing’），比较特殊，它的第二个参数是个数count；

b.因为是字符串操作，字符串属于数据类型（后续会写文章介绍数据类型以及堆栈的释义https://www.cnblogs.com/whq920729/p/10662489.html）中，基本类型的一种，所以，无论我们怎么对原来的字符串操作，都不会改变原来的字符串，还能返回新的字符串。

c.如果两个参数都传入负数，slice都会用字符串长度加上该负数，substring()控制力很强，都转成0，substr(),第一个参数同slice的处理，第二个参数是长度，所以直接转成0。

再来看数组的处理，看完了上面三个方法，还剩下一个splice(start，count, items)，那就给数组吧，当然它的英文翻译是裁剪胶片、磁带、视频等，处理视频可以删除某一段，也可以替换某一段，所以这里自然就记住了，splice()操作数组的时候，也有剪切和替换（items有值的时候执行替换功能）的功能。继续搬代码：

var arr1 = ['a', 'b', 'c', 'd', 'e']

var arr2 = arr1.splice(1, 3)

console.log(arr1, arr2)

// ["a",  "e"]   ["b", "c","d"]

var arr1 = ['a', 'b', 'c', 'd', 'e']

var arr3 = arr1.splice(1, 3, 'f')

console.log(arr1, arr3)

// ["a", "f", "e"]  ["b", "c", "d"]

　结果显然易见：改变了原数组，并返回了新数组。第一个参数标识处理的起点序列号，第二个参数标识要处理的个数，第三个参数标识要不要替换。
这里传入负数会是什么结果呢？

var arr1 = ['a', 'b', 'c', 'd', 'e']

var arr3 = arr1.splice(-3, -1, 'f')

console.log(arr1, arr3)

//  ["a", "b", "f", "c", "d", "e"] []

　　是不是等同于：

var arr1 = ['a', 'b', 'c', 'd', 'e']

var arr3 = arr1.splice(2, 0, 'f')

console.log(arr1, arr3)

// ["a", "b", "f", "c", "d", "e"] []

无论第一个参数转成0还是转成数组长度加上该负数，只要第二个长度参数是0了，那么splice()对原数组就没有任何操作了。

就说这么多，希望能帮记不住这几个方法的同学，这只是一种记忆方法，如果有更好的记忆方法，请赐教！

巴特西

js字符串和数组操作，容易混淆的方法总结（slice、substring、substr、splice）

最新文章

热门文章