js方法数组内置方法slice(),js数组截取,js数组内置方法slice()详解

slice() 方法返回一个新的数组对象,这一对象是一个由 start 和 end 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

可以理解为:要访问数组的一部分而不修改它

/*
    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"]

 由于slice是一个浅拷贝的方法,所以当数组中存在对象的时候,slice未截取对象的话,改变某个数组的对象中的属性值时,会同步修改另一个数组的对象的属性值

// 使用 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

*/

如果源数组是稀疏数组,slice() 方法返回的数组也会是稀疏数组。

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

也可以bind()call()一起使用,用于创建一个实用方法,将类数组对象转换为数组。

// 调用 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]

本文代码片段参考mdnArray.prototype.slice()

猜你喜欢

转载自blog.csdn.net/guojixin12/article/details/131920181
今日推荐