splice 与 slice

splice 与 slice

slice

• 方法可从已有的数组中返回选定的元素

语法

arrayObject.slice(start,end)

• start 可选(有 end 参数是必须有 start )。
  • 规定从何处开始选取。
  • 如果是负数，那么它规定从数组尾部开始算起的位置。
    • 也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• end 可选。
  • 规定从何处结束选取。
  • 该参数是数组片断结束处的数组下标。
    • 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。
    • 如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值

• 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素

说明

• 请注意，该方法并不会修改原数组，而是返回一个子数组。
• 如果想剪切数组中的一段元素，应该使用方法 Array.splice()

例子

var arr = [1, 2, 3, 4, 5];
// 没有参数的情况下返回原数组
console.log(arr.slice()); // [1, 2, 3, 4, 5]
// 只有一个参数的情况下为 start 规定从何处开始选取到结尾的所有元素
console.log(arr.slice(2)); // [3, 4, 5]
// start为负数时，从数组尾部算位置
console.log(arr.slice(-2)); // [4, 5]
// 两个参数
console.log(arr.slice(2, 3)); // [3]
// 两个参数 end为负数
console.log(arr.slice(2, -2)); // [3]

splice

• 向/从数组中添加/剪切项目，然后返回被剪切的项目。

语法

• arrayObject.splice(index,howmany,item1,.....,itemX)

  • index 必需。

    • 整数，规定添加/剪切项目的位置
      • 使用负数可从数组结尾处规定位置。

  • howmany 必需。

    • 要剪切的项目数量。
      • 如果设置为 0，则不会剪切项目。

  • item1, ..., itemX 可选

    • 向数组添加的新项目。

返回值

• 包含被剪切项目的新数组，如果有的话。(Array)

说明

• 请注意， splice() 方法与 slice() 方法的作用是不同的
  • splice() 方法会直接对数组进行修改。

例子

 var arr = [1, 2, 3, 4, 5];
 // 不传参数，原数组未改变
 console.log(arr.splice()) // []
 console.log(arr) // [1, 2, 3, 4, 5]

 var arr1 = [1, 2, 3, 4, 5];
 // 传一个参数 剪切 index 位置到结尾的所有元素
 console.log(arr1.splice(2)) // [3, 4, 5]
 console.log(arr1) // [1, 2]

 var arr2 = [1, 2, 3, 4, 5];
 // 传一个参数为负数 剪切 index 位置到结尾的所有元素
 console.log(arr2.splice(-2)) // [ 4, 5]
 console.log(arr2) // [1, 2, 3]

 var arr3 = [1, 2, 3, 4, 5];
 // 传两个参数 剪切 index 位置后 howmany 个数量
 console.log(arr3.splice(2, 2)) // [3, 4]
 console.log(arr3) // [1, 2, 5]

 var arr4 = [1, 2, 3, 4, 5];
 // 传两个参数,index 为负数 剪切 index 位置后 howmany 个数量
 console.log(arr4.splice(-3, 2)) // [3, 4]
 console.log(arr4) // [1, 2, 5]

 var arr5 = [1, 2, 3, 4, 5];
 // 传两个参数,howmany 为负数 原数组未改变
 console.log(arr5.splice(2, -2)) // []
 console.log(arr5) // [1, 2, 3, 4, 5]

 var arr6 = [1, 2, 3, 4, 5];
 // 传两个参数,都为为负数 原数组未改变
 console.log(arr6.splice(-2, -2)) // []
 console.log(arr6) // [1, 2, 3, 4, 5]

 var arr7 = [1, 2, 3, 4, 5];
 // 传三个参数,剪切并填充
 console.log(arr7.splice(2, 2, 5)) // [3, 4]
 console.log(arr7) // [1, 2, 5, 5]

 var arr8 = [1, 2, 3, 4, 5];
 // 传三个参数,howmany 为 零 只填充
 console.log(arr8.splice(2, 0, 5)) // []
 console.log(arr8) // [1, 2, 5, 3, 4, 5]

 var arr8 = [1, 2, 3, 4, 5];
 // 传多个参数,  第三个参数后的值可以填充进去
 console.log(arr8.splice(2, 0, 5, 6, 7)) // []
 console.log(arr8) // [1, 2, 5, 6, 7, 3, 4, 5]

封装一个移动一位数组的函数

function move(array, from, to) {
    if(from < 0 || to >= array.length) {
        console.error("参数错误");
        return;
    }
    const newArray = [...array];
    let item = newArray.splice(from, 1);
    newArray.splice(to, 0, item[0]);
    return newArray;
}