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.因为是字符串操作,字符串属于数据类型(后续会写文章介绍数据类型以及堆栈的释义)中,基本类型的一种,所以,无论我们怎么对原来的字符串操作,都不会改变原来的字符串,还能返回新的字符串。

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()对原数组就没有任何操作了。

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

猜你喜欢

转载自www.cnblogs.com/whq920729/p/10659774.html
今日推荐