平时工作中,很少静下心来总结基础知识,总觉得自己会用了,有点飘了,直到碰壁之后才懂得基础知识的重要性。大牛告诉我,一次写对,是不是可以不用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)的更多相关文章

  1. JS与PHP数组操作的不同

    JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 ...

  2. codewars--js--the highest and lowest number + JS 字符串和数组相关知识

    本文参考: http://blog.csdn.net/tyrionj/article/details/78653426 http://www.runoob.com/jsref/jsref-obj-st ...

  3. Java数组操作的10大方法

    转载自码农网 译文链接:http://www.codeceo.com/article/10-java-array-method.html 英文原文:Top 10 Methods for Java Ar ...

  4. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  5. 3个js函数 变成数组本身的3个方法

    <!DOCTYPE html> 3个js函数 变成数组本身的3个方法 /** * 稀疏数组 变成不稀疏数组 * @params array arr 稀疏数组 * @return arry ...

  6. js变量作为数组对象的键值方法

    js变量作为数组对象的键值方法,变量键值获取数组值 js也可以像php的数组一样用下标获取数组的值,方法是: var arr = {'key':'abc'}; var key = 'key'; con ...

  7. 字符串截取函数slice, substring, substr

    在日常项目需求中,常常会遇到需要截取字符串操作的工作,而ECMAScript为我们提供了原生的截取字符串的函数,而且提供了三个:slice, substring, substr.我们怎么判断在什么时候 ...

  8. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

  9. (js) 字符串和数组的常用方法

    JS中字符串和数组的常用方法 JS中字符串和数组的常用方法 js中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化 ...

随机推荐

  1. 解释python中的help()和dir()函数

    help函数是一个内置函数,用于查看函数或模块用途的详细说明 import copy print(help(copy.copy)) Help on function copy in module co ...

  2. Linux用户和用户组管理 用户管理相关命令

    用户添加命令 useradd 注意: 新添加的用户如果不设定密码是不能够登录系统的 命令格式: [root@localhost ~]#useradd [选项] 用户名 选项说明: 选项 选项说明 -u ...

  3. RocketMq入坑指南

    报错信息Caused by: org.apache.rocketmq.remoting.exception.RemotingConnectException: connect to <172.1 ...

  4. 跨平台移动开发_PhoneGap API 事件类型

    PhoneGap API Events backbuttondevicereadymenubuttonpauseresumeonlineofflinebatterycriticalbatterylow ...

  5. kubernetes 核心对象

    Pods Pod是Kubernetes的基本操作单元,也是应用运行的载体.整个Kubernetes系统都是围绕着Pod展开的,比如如何部署运行Pod.如何保证Pod的数量.如何访问Pod等.另外,Po ...

  6. hive -e 时转义需要再加一个\

    hive窗口中使用转义字符: select split(concat_ws('|','123','456','789'),'\\|')from dual; 参考 http://jingyan.baid ...

  7. java instrumentation &JVMTI

    Java Instrumentation (参考:http://www.ibm.com/developerworks/cn/java/j-lo-jse61/) 简介: 使用Instrumentatio ...

  8. RHCE学习笔记 管理1 (第六章 第七章)

    第六章 利用linux 文件系统权限文件访问 1.linux文件系统权限 文件的权限分为:  rwx  读/写/执行 ls -l  /home   查看/home下文件 ls -ld /home   ...

  9. freemarker日志实现过程分析

    freemarker有自己的log类,这是一个抽象类,具体的日志打印委托给classpath里面合适的日志jar包来执行,寻找合适日志jar的查找顺序是:Apache Log4J, Apache Av ...

  10. mac下安装py第三方库到python3下

    python3 -m pip install **** 中间可能碰到超时问题 python3 pip --default-timeout=100 install -U **** 设置默认超时时间即可 ...