谈谈JS中的splice与slice
对于不熟悉JS数组和字符串操作的前端来说,这两个函数在开发中简直是没有用,可能有时候想起来用了也只是很粗浅的用一下,并且还总是忘记用法,每次用的时候还得自己去搜索,头疼。第一是为了强化自己的记忆,第二是因为今天在项目中遇到一个问题使用splice能轻松的解决在这记录一下,所以写下了这边博客。
splice:JS数组函数
用法:从一个数组
中删除指定的元素,会
改变原数组,返回被删除的数组元素
,需要传参如下
arr.splice(index, length, replace)
// 解释一下以上的参数作用
// 1. index:开始删除元素的下标
// 2. length:需要删除元素的个数
// 3. replace:替换被删除的元素(可选)
const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.splice(1, 1, "*");
console.log(arr); //[1, "*", 3, 4, 5, 6] //删除了下标为1的数组元素2,替换为*
console.log(newArr); //[2] 返回被删除的元素
// splice不仅可以删除元素还可以在数组的任意位置添加元素
const newArrAdd = arr.splice(1, 0, 9); //在下标为1的地方添加一个数组元素9,其他数组元素向后依次移动位置
// 数组最后的结果为[1, 9, 2, 3, 4, 5, 6]
// 利用splice也可实现数组元素交换位置,如元素2和5交换位置下标分别是(1和4)
arr[4] = arr.splice(1, 1, arr[4])[0];
由以上代码可见splice会改变原数组并且返回被删除的元素
slice:JS数组函数
用法:从一个数组
中截取指定的元素,不会
改变原数组,返回被截取的数组元素组成的新数组
,需要传参如下
slice(start, end)
// 解释一下以上的参数作用
// 1. start开始的下标,可以为复数, -1则为数组中的最后一个元素 -2 则为倒数第二个元素
// 2. end(可选) 结束的下标 不选时默认为数组的长度-1
// 3. 截取的数组元素包括下标start不包括下标end
// 3. 返回值为截取的数组元素组成的新数组 不会改变原有的数组