js method array built-in method slice(), js array interception, detailed explanation of js array built-in method slice()

The slice() method returns a new array object, which is a shallow copy of the original array determined by start and end (including start, excluding end), where start and end represent the index of the array element. The original array will not be changed.

It can be understood as: to access a part of the array without modifying it

/*
    slice(start,end)
    start 可选
    提取起始处的索引（从 0 开始），会转换为整数。
    如果索引是负数，则从数组末尾开始计算——如果 start < 0，则使用 start + array.length。
    如果 start < -array.length 或者省略了 start，则使用 0。
    如果 start >= array.length，则不提取任何元素。

    end 可选
    提取终止处的索引（从 0 开始），会转换为整数。slice() 会提取到但不包括 end 的位置。
    如果索引是负数，则从数组末尾开始计算——如果 end < 0，则使用 end + array.length。
    如果 end < -array.length，则使用 0。
    如果 end >= array.length 或者省略了 end，则使用 array.length，提取所有元素直到末尾。
    如果 end 在规范化后小于或等于 start，则不提取任何元素。

    返回值是一个 含有被提取元素的新数组
*/


const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// ["duck", "elephant"]
console.log(animals.slice(2, -1));
// ["camel", "duck"]
console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]

 Since slice is a shallow copy method, when there are objects in the array, if slice does not intercept the object, when changing the attribute value of an object in an array, the attribute value of an object in another array will be modified synchronously

// 使用 slice 方法从 myCar 创建一个 newCar。
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", newCar);
console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

// 改变 myHonda 对象的 color。
myHonda.color = "purple";
console.log("The new color of my Honda is", myHonda.color);

console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);
// 思考一下再看答案

/*
    上述代码输出：
    myCar = [
      { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } },
      2,
      'cherry condition',
      'purchased 1997'
    ]
    newCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ]
    myCar[0].color = red
    newCar[0].color = red
    The new color of my Honda is purple
    myCar[0].color = purple
    newCar[0].color = purple

*/

If the source array is a sparse array, slice() the array returned by the method will also be a sparse array.

console.log([1, 2, , 4, 5].slice(1, 4)); // [2, '空', 4]

Can also be used with bind() and call() to create a utility method that converts an array-like object to an array.

// 调用 slice() 方法时，会将 this 对象作为第一个参数传入
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

const list1 = list(1, 2, 3); // [1, 2, 3]

The code snippet in this article refers to mdn Array.prototype.slice()