JS中slice和splice的区别

slice()

1、String中

• 语法
      string.slice(start, end) 抽取一个子字符串
• 描述
      slice()将返回一个含有字符串string的片段的字符串或返回它的一个子串。 但是该方法不修改string
• 参数
      start：要抽取的片段的起始下标。如果是负数，那么该参数声明了从字符串的尾部开始算起的位置。也就是说，-1指字符串中的最后一个字符，-2指倒数第二个字符，以此类推
      end：紧接着要抽取的片段的结尾的下标。如果没有指定这一参数，那么要抽取的子串包括start到原字符串结尾的字符串。如果该参数是负数，那么它声明了从字符串的尾部开始算起的位置
• 返回值
      一个新字符串，包括字符串string从start开始(包括start)到end为止(不包 括end)的所有字符
• Bug
      在JavaScript 3.0(InternetExplorer 4)中，参数start的值是不能是负数。负的start值指定的不是从字符串尾部开始算起的字符位置，而是指定第0个字符的位置

let str = 'abcdefg'

let newStr = str.slice(0, 4)    // newStr is 'abcd'; str is 'abcdefg'

let newStr = str.slice(2, 4)    // newStr is 'cd'; str is 'abcdefg'

let newStr = str.slice(4)      // newStr is 'efg'; str is 'abcdefg'

let newStr = str.slice(3, -1)   // newStr is 'def'; str is 'abcdefg'

let newStr = str.slice(3, -2)   // newStr is 'de'; str is 'abcdefg'

let newStr = str.slice(-3, -1)  // newStr is 'ef', IE 4 ———> newStr is 'abcdef'

2、Array中

• 语法
      array.slice(start, end) 返回数组的一部分
• 描述
      slice()将返回数组的一部分，或者说是一个子数组。返回的数组包含从start 开始到end之间的所有元素，但是不包括end所指的元素。如果没有指定end，返回的数组包含从start开始到原数组结尾的所有元素
• 参数
      start：数组片段开始处的数组下标。如果是负数，它声明从数组尾部开始算起的位置。 也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推
      end：数组片段结束处的后一个元素的数组下标。如果没有指定这个参数 包含从start开始到数组结束的所有元素。如果这个参数是负数， 从数组尾部开始算起的元素
• 返回值
      一个新数组，包含从start到end(不包括该元素)指定的array元素
• Bug
      在Internet Explorer 4中，参数start不能为负数

let arr = [1, 2, 3, 4, 5]

let newArr = arr.slice(0, 3)    // newArr is [1, 2, 3]; arr is [1, 2, 3, 4, 5]

let newArr = arr.slice(3)      // newArr is [4, 5]; arr is [1, 2, 3, 4, 5]

let newArr = arr.slice(1, -1)   // newArr is [2, 3, 4]; arr is [1, 2, 3, 4, 5]

let newArr = arr.slice(-3, -2)  // newArr is [3]; arr is [1, 2, 3, 4, 5] , IE 4 ——> newArr is [1, 2, 3]

splice()

• 语法
      array.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
• 描述
      splice()将删除从start开始(包括start所指的元素在内)的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。位于插入或删除的元素之后的数组元素都会被移动，以保持它们与数组其他元素的连续性。
      注意：虽然spllce()方法与slice()方法名字相似，但作用不同，splice()会直接修改数组
• 参数
      start：开始插入和(或)删除的数组元素的下标
      deleteCount：从start开始，包括start所指的元素在内要删除的元素个数。这个参数是可选的，如果没有指定它，splice()将删除从start开始到原数组结尾的所有元素
      value, ...要插人数组的零个或多个值，从start所指的下标处开始插入
• 返回值
      如果从array中删除了元素，返回的是含有被删除的元素的数组。但是要注意，由于存在—个bug，因此在JavaScriptl.2的Netscape实现中，返回的并不总是数组
• Bug
      splice()方法假定在各种情况下均返回一个包含已删除元素的数组。但是，在 Netscape的JavaScript 1.2解释器中，如果删除的是单个元素，那么该方法返回的是元素，而不是包含那个元素的数组。如果没有删除任何元素，它不是返回一个空数组，而是什么都不返回。只要把语言版本明确地设置为1.2，JavaScript的Netscape实现都有这种bug行为

let arr = [1, 2, 3, 4, 5, 6, 7, 8]

let newArr = arr.splice(4)        // newArr is [5, 6, 7, 8]; arr is [1, 2 ,3, 4]

let newArr = arr.splice(1, 2)      // newArr is [2, 3]; arr is [1, 4, 5, 6, 7, 8]

let newArr = arr.splice(1, 1) // 删除元素      
// Netscape/JavaScript 1.2 返回 2 ，应该 newArr is [2]; arr is [1, 3, 4, 5, 6, 7, 8]

let newArr = arr.splice(1, 0, 2, 3) // 插入元素  
// Netscape/JavaScript 1.2 newArr is undefined ，应该 newArr is []; arr is [1, 2, 3, 2, 3, 4, 5, 6, 7, 8]

let newArr = arr.splice(1, 5, 2, 3) // 删除并插入元素
// newArr is [2, 3, 4, 5, 6]; arr is [1, 2, 3, 7, 8]

slice和splice的区别

1. slice()方法会返回一个新的数组，不改变原数组；splice()方法返回包含已删除元素的数组，会改变原数组
2. slice(start, end)方法第一个参数表示截取的起始位置(包括start所指的元素在内)，第二个表示截取到的位置(不包括end该位置的元素)；splice(start, deleteCount)第一个参数也表示截取的起始位置，第二个参数表示要截取的元素个数