js的slice和splice解析与实现

1使用 splice() 截取数组

splice() 方法可以添加元素、删除元素，也可以截取数组片段。删除元素时，将返回被删除的数组片段，因此可以使用 splice() 方法截取数组片段。

由于 splice() 方法的功能多，参数复杂，使用时应该注意下面几个问题。

1) splice() 方法的参数是可选的。如果不给它传递参数，则该方法不执行任何操作。如果给它传递一个参数，则该方法仅执行删除操作，参数值指定删除元素的起始下标，（包含该下标元素），splice() 方法将删除后面所有元素。

1.如果指定两个参数，则第 2 个参数值表示要删除元素的个数。

2.如果指定三个或多个参数，则第 3 个以及后面所有参数都被视为插入的元素

3.如果不执行删除操作，第 2 个参数值应该设置为 0，但是不能够空缺，否则该方法无效。

4.参数取负值问题。如果第 1 个参数为负值，则按绝对值从数组右侧开始向左侧定位。如果第 2 个参数为负值，则被视为 0。

var a = [1,2,3,4,5];   //定义数组
var b = a.splice(-2,-2,2,3);  //第一、二个参数都为负值
console.log(a);  //返回[1,2,3,2,3,4,5]

注意：splice()是在原数组上进行操作的，会改变原数组，返回值为被删除的元素

 

2splice() 实现

Array.prototype.mySplice = function (start, num) {
  let arr = this; //获取当前数组
  const length = arr.length;
  let decArr = []; //需要删除的数据
  if (start === undefined) {
    //没有传值,不做任何操作
    return arr;
  }

  start = start > length ? length : start; //超出数组范围，从最后位置开始
  num = num === undefined ? Infinity : num; //若只传了一个参数，没有num，则将num设置成一个很大的值
  const [, , ...args] = arguments; //获取前两个元素之后的参数数组
  if (length - num >= start) {
    //删除数量没有超出范围
    decArr = arr.slice(start, start + num); //删除的数据
    //将数据连接
    arr = arr
      .slice(0, start)
      .concat(args)
      .concat(arr.slice(start + num));
  } else {
    //删除数量超出范围
    decArr = arr.slice(start, length);
    arr = arr.slice(0, start).concat(args);
  }
  //原数组不能直接通过this=arr直接修改,通过索引修改
  this.length = arr.length; //控制数组长度一样
  //arr为处理之后需要的数组
  for (let i = 0; i < arr.length; i++) {
    this[i] = arr[i];
  }
  return decArr;
};
//测试用例
const arr = [1, 3, 4, 5, 6, 24, 5, 3, 8];
const arr2 = arr.mySplice(1, 4, 7, 7, 7); 
console.log(arr, arr2);//[1, 7, 7, 7, 24, 5, 3, 8][(3, 4, 5, 6)]

 

3使用 slice() 截取数组

slice() 方法与 splice() 方法功能相近，但是它仅能够截取数组中指定区段的元素，并返回这个子数组。该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标。

1. 第 1 个参数指定起始下标位置，包括该值指定的元素；第 2 个参数指定结束位置，不包括指定的元素。
2.该方法的参数可以自由设置。如果不传递参数，则不会执行任何操作；如果仅指定一个参数，则表示从该参数值指定的下标位置开始，截取到数组剩余全部元素

3当参数为负值时，表示按从右到左的顺序进行定位，即倒数定位法，而不再按正数顺序定位（从左到右），但取值顺序依然是从左到右。

var a = [1,2,3,4,5];  //定义数组
var b = a.slice(-4,-2);  //截取倒数第四个元素到倒数第二个元素前的元素
console.log(b);   //返回[2,3]，左闭右开

注意：slice() 方法将返回数组的一部分（新数组），不会修改原数组。

 

4slice() 实现

Array.prototype.mySlice = function (start, end) {
  const arr = this;//获取当前数组
  const newArr = [];
  //判断参数的传递
  start = start === undefined ? 0 : start;
  end = end === undefined ? arr.length : end;
  for (let i = start; i < end; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
};

//测试用例
const arr = [1, 3, 4, 5, 6, 24, 5, 3, 8];
const arr2 = arr.mySlice(3, 6);
console.log(arr2);//[ 5, 6, 24 ]