slice和splice的区别,以及二者较详细的解析

slice和splice的区别

MDN相对应的地址：字符串slice & 数组slice & splice

slice

对数组：实现浅拷贝数组与截取数组,返回的是截取拷贝后的新数组,原数组不会改变

对字符串：还可以提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

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

对数组：arr.slice(起始下标,结束下标) 没有结束下标就默认到最后 包括起始下标，不包括结束下标

let arr = ["one", "two", "three", "four", "five"]
  // slice(起始下标,结束下标) 没有结束下标就默认到最后 包括起始下标

  let sliceArr0 = arr.slice() // 浅拷贝数组 ['one', 'two', 'three', 'four', 'five']
  let sliceArr1 = arr.slice(2) // 从下标2开始到最后一个   ['three', 'four', 'five']
  let sliceArr2 = arr.slice(3, 5) //从下标3开始到5结束，包括3不包括5   ['four', 'five']
  let sliceArr3 = arr.slice(-2) //倒数第二个到最后一个   ['four', 'five']

  console.log(sliceArr0);
  console.log(sliceArr1);
  console.log(sliceArr2);
  console.log(sliceArr3);

对字符串：str.slice(a,b) 截取[a,b) 包含a不包含b的字符串

let str = '123456'
console.log(str.slice(1, 2)) //从下标为1开始到下标为2结束，包括1不包括2   结果：2

=================================================================

splice

可以实现数组的删除/截取/替换/添加,返回的是被删除/截取/替换的原数组的数据,同时原数组会被改变

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

splice(起始下标,删除个数,插入的数1,插入的数2,...) (包括起始下标本身)

---

• 一个参数时就是删除从该下标开始的后面所有数,返回值是下标往后的数组,相当于截取,同时原数组只剩下该下标前的数,也相当于删除。相当于 取原数组=删除、 取返回的数组=截取

let arr2 = ['first', 'second', 'third', 'forth', 'fifth']

 let spliceArr1 = arr2.splice(2) 
 console.log(arr2); // 原数组:从下标2开始(包括2)替换元素来修改,此处原数组从下标2开始都被替换成了空,所以原数组只有两个数 ['first', 'second']
 console.log(spliceArr1);// 返回的是被修改的内容,也就是被删除的数组值 ['third', 'forth', 'fifth'] 

MDN:第一个参数时指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。

---

• 两个参数时，第一个参数依旧是开始删除的下标，第二个参数为删除的个数。返回的是删除的数、原数组会被改成删除后的数组。此时 取原数组=删除、 取返回的数组=截取

  let arr2 = ['first', 'second', 'third', 'forth', 'fifth']
  
	let spliceArr2 = arr2.splice(2, 1)
    console.log(arr2);//原数组被从下标为2的开始截取一位,此处原数组中的这一位被删除,原数组结果为 ['first', 'second', 'forth', 'fifth']
    console.log(spliceArr2);//这是被截取的下标为2的一位结果为:['third']

MDN:第二个参数为整数，表示要移除的数组元素的个数。如果 删除个数 大于 第一个参数 之后的元素的总数，则从 第一个参数 后面的元素都将被删除（含第 第一个参数 位）。如果 删除个数 被省略了，或者它的值大于等于数组长度 - 第一个参数(也就是说，如果它大于或者等于第一个参数之后的所有元素的数量)，那么第一个参数之后数组的所有元素都会被删除。如果 删除个数 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

---

• 三个参数以上时，第一个参数是开始删除的下标，第二个参数为删除的个数，第三个以上的数为 往 以第一个参数为下表 开始插入后续参数值。此时实现了 删除与替换原数组元素。
  • 如果第二个参数为0时就是往数组里进行插入数据了。

  let arr2 = ['first', 'second', 'third', 'forth', 'fifth']
  
  let spliceArr3 = arr2.splice(2, 1, 'in', 'in2') //从下标为2开始,包含2,删除1位,在这个位置插入参数三与参数四的值
  console.log(arr2);//['first', 'second', 'in', 'in2', 'forth', 'fifth']
  console.log(spliceArr3); // 这是被删除的下标为2的数 [ 'third']

MDN:第三个往后的参数时要添加进数组的元素，从第一个参数 位置开始。如果不指定，则 splice() 将只删除数组元素

---

总结：两者的区别：

• slice可以操作数组与字符串，splice只能操作数组

• slice不改变原数组，splice改变原数组

• slice是拷贝原数组的部分或者全部内容，splice可以对原数组进行删除与插入

• slice接收两个参数，splice可以传入三个及以上参数

注：MDN上有更加详细的，例如参数为负数的情况，可以去看看哦