JavaScript中,slice,splice和split三个函数的使用方法的总结

知识点总结

1. slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括 end)。原始数组不会被改变。

语法: array.slice(begin,end),第一个参数 begin 表示开始截取的索引(包含),第二个参数 end 表示结束截取的索引(不包含 end)

比如,有这样一个数组:

var array = [1, 2, 3, 4, 5, 6]
var arr1 = array.slice(0, 3) // 输出[1,2,3]
var arr2 = array.slice(3) //如果 end 被省略,则 slice 会一直提取到原数组末尾,输出[4,5,6]。
var arr3 = array.slice(-1) //如果只传入一个参数,且是负数时,length会与参数相加,然后再截取,输出[6]
var arr4 = array.slice(2, -3) //如果当传入两个参数一正一负时,length也会先于负数相加后,再截取,输出[3]
var arr5 = array.slice(-8) //如果只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组,输出[1,2,3,4,5,6]
var array = arr.slice(8) //如果传入一个参数,大于length时,将返回一个空数组,输出[]

slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

如果向两个数组任一中添加了新元素,则另一个不会受到影响。

2. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法: array.splice(start,deleteCount,item…),参数 start 是从数组 array 中移除元素的开始位置。参数 deleteCount 是要移除的数组元素的个数,必须是整数,如果 deleteCount 是 0 或者负数,则不移除元素。如果有额外的参数,那么 item 会插入到被移除元素的位置上。

下面举例说明 spliced 的用法,同样先设置一个数组

var a = [1, 2, 3, 4, 5, 6]
var b = a.splice(1, 2, 'f', 'g') //这里表示从数组索引1开始移除元素,移除2个元素,在移除的位置分别插入'f' 和'g',输出 a=[1,'f','g',4,5,6],b=[2,3]

我们知道 delete 和 splice 都可以删除数组中的元素,但是它们是有区别的,例如有一个数组,这时我们想删除数组中的 b 元素 :

var arr = ['a', 'b', 'c', 'd']
delete arr[2] // 用 delete 删除,输出 [ 'a', <1 empty item>, 'c', 'd' ],
arr.splice() // 用 splice 删除,输出 [ 'a', 'c', 'd' ]

可见,用 delete 删除的时候,其他元素的键值是不变的,被删除的位置会用 <1 empty item> 表示

3. split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

语法: string.split(separator,limit),split 方法把这个 string 分割成片段来创建一个字符串数组。可选参数 limit 可以限制被分割的片段数量。separator 参数可以是一个字符串或一个正则表达式,下面我们从一些简单例子中去理解 split 的用法

var str = 'The quick brown fox jumps over the lazy dog.'
var words = str.split(' ')
console.log(words[3]) // 输出: fox
var chars = str.split('')
console.log(chars[8]) // 输出: k
var strCopy = str.split()
console.log(strCopy) // 输出: Array ['The quick brown fox jumps over the lazy dog.']
// 再比如:
var a = '0123456'
var b = a.split('', 3) // 输出: b=[ '0', '1', '2' ]

想了解更多关于 split 的用法,可以查看 MDN 官方文档,请点此链接^_^

明天又是充满希望的一天,继续加油 O(∩_∩)O

喵


   转载规则


《JavaScript中,slice,splice和split三个函数的使用方法的总结》 Zoe 张兮兮 采用 知识共享署名 4.0 国际许可协议 进行许可。
 本篇
JavaScript中,slice,splice和split三个函数的使用方法的总结 JavaScript中,slice,splice和split三个函数的使用方法的总结
知识点总结1. slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括 end)。原始数组不会被改变。语法: array.slice(begin,end),第一个参
2019-10-22
下一篇 
Vue 生命周期的简单总结 Vue 生命周期的简单总结
知识点总结Vue 的生命周期是指从创建–>挂载–>更新–>销毁的过程,简单地说,一个组件从开始创建到最后销毁所经历的各种状态,就是一个组件的生命周期。首先,官方文档对于 Vue 生命周期的图解一定要仔细研究一波,请看官方图
2019-10-18
  目录