当前位置：首页 > news >正文

splice()、slice()、split()三种方法的区别

news 文章来源：https://blog.csdn.net/weixin_72324200/article/details/139582687 2024/11/7 18:14:17

slice

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

 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant', 'dog'];// console.log(animals.slice(2));  // // ["camel", "duck", "elephant"]  从下标2开始截取
//console.log(animals.slice(2, 4));//  ["camel", "duck"]            从下标2开始截取，到下标4结束，不包含4 
//console.log(animals.slice(1, 5));   // ["bison", "camel", "duck", "elephant"]  从下标1开始截取，到下标5结束，不包含5 
// console.log(animals.slice(-2));//  ["elephant", "dog"]        从后往前截取, 数字是几就截取几位
//console.log(animals.slice(2, -1)); //  ['camel', 'duck', 'elephant']   从下标2开始截取，结束位置是从后面开始的负一
//console.log(animals.slice());// ["ant", "bison", "camel", "duck", "elephant","dog"]   如果不传截取的数目，就是对原数组的拷贝
const res1 = animals.slice()console.log(res1)//['ant', 'bison', 'camel', 'duck', 'elephant', 'dog'] const res2 = animals.slice(0)  console.log(res2)// ['ant', 'bison', 'camel', 'duck', 'elephant', 'dog']   // 传入一个数字0 ，从效果上来看像是拷贝，但实际上它还是截取，此时的它可以说是新的数组对象console.log(res1===res2)  //falseconsole.log(res1==res2)  //false

splice()

splice() 方法就地移除或者替换已存在的元素和/或添加新的元素。

const months = ['Jan', 'March', 'April', 'June'];months.splice(1, 0, 'Feb');console.log(months);//  ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');console.log(months);//  Array ["Jan", "Feb", "March", "April", "May"]months.splice();console.log(months)//['Jan', 'Feb', 'March', 'April', 'May']
months.splice(0);console.log(months)//[]

语法

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

start 从 0 开始计算的索引，表示要开始改变数组的位置，它会被转换成整数。负索引从数组末尾开始计算——如果 -buffer.length <= start < 0，使用 start + array.length。如果 start < -array.length，使用 0。如果 start >= array.length，则不会删除任何元素，但是该方法会表现为添加元素的函数，添加所提供的那些元素。如果 start 被省略了（即调用 splice() 时不传递参数），则不会删除任何元素。这与传递 undefined 不同，后者会被转换为 0。 deleteCount 可选一个整数，表示数组中要从 start 开始删除的元素数量。如果省略了 deleteCount，或者其值大于或等于由 start 指定的位置到数组末尾的元素数量，那么从 start 到数组末尾的所有元素将被删除。但是，如果你想要传递任何 itemN 参数，则应向 deleteCount 传递 Infinity 值，以删除 start 之后的所有元素，因为显式的 undefined 会转换为 0。如果 deleteCount 是 0 或者负数，则不会移除任何元素。在这种情况下，你应该至少指定一个新元素（请参见下文）。

item1、…、itemN 可选
从 start 开始要加入到数组中的元素。

如果不指定任何元素，splice() 将只从数组中删除元素。
返回值
一个包含了删除的元素的数组。
如果只移除一个元素，则返回一个元素的数组。
如果没有删除任何元素，则返回一个空数组。

描述
splice() 方法是一个修改方法。它可能会更改 this 的内容。如果指定的要插入的元素数量与要删除的元素数量不同，数组的 length 也将会更改。同时，它会使用 @@species 来创建一个新数组实例并返回。

如果删除的部分是稀疏的，则 splice() 返回的数组也是稀疏的，对应的索引为空槽。

splice() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。尽管字符串也类似于数组，但这种方法不适用于它，因为字符串是不可变的。

  

在索引 2 处移除 0 个元素，并插入“drum”
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum");["angel", "clown", "drum", "mandarin", "sturgeon"]



在索引 2 处移除 0 个元素，并插入“drum”和“guitar”
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum", "guitar");["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]


在索引 0 处移除 0 个元素，并插入“angel”
splice(0, 0, ...elements) 像 unshift() 一样在数组的开头插入元素。
const myFish = ["clown", "mandarin", "sturgeon"];
const removed = myFish.splice(0, 0, "angel");
// myFish 是 ["angel", "clown", "mandarin", "sturgeon"]


在最后一个索引处移除 0 个元素，并插入“sturgeon”
splice(array.length, 0, ...elements) 像 push() 一样在数组的末尾插入元素。
const myFish = ["angel", "clown", "mandarin"];
const removed = myFish.splice(myFish.length, 0, "sturgeon");
// myFish 是 ["angel", "clown", "mandarin", "sturgeon"]


在索引 3 处移除 1 个元素
const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
const removed = myFish.splice(3, 1);
// myFish 是 ["angel", "clown", "drum", "sturgeon"]


在索引 2 处移除 1 个元素，并插入“trumpet”
const myFish = ["angel", "clown", "drum", "sturgeon"];
const removed = myFish.splice(2, 1, "trumpet");
// myFish 是 ["angel", "clown", "trumpet", "sturgeon"]


从索引 0 处移除 2 个元素，并插入“parrot”、“anemone”和“blue”
const myFish = ["angel", "clown", "trumpet", "sturgeon"];
const removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
// myFish 是 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed 是 ["angel", "clown"]


从索引 2 处开始移除 2 个元素
const myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
const removed = myFish.splice(2, 2);
// myFish 是 ["parrot", "anemone", "sturgeon"]
// removed 是 ["blue", "trumpet"]


在索引 -2 处移除 1 个元素
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(-2, 1);
// myFish 是 ["angel", "clown", "sturgeon"]
// removed 是 ["mandarin"]


删除从索引 2 开始的所有元素
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2);
// myFish 是 ["angel", "clown"]
// removed 是 ["mandarin", "sturgeon"]


在稀疏数组中使用 splice()
splice() 方法保留了数组的稀疏性。
const arr = [1, , 3, 4, , 6];
console.log(arr.splice(1, 2)); // [empty, 3]
console.log(arr); // [1, 4, empty, 6]



在非数组对象中使用 splice()
splice() 方法读取 this 的 length 属性。然后，它根据需要更新整数键属性和 length 属性。
const arrayLike = {length: 3,unrelated: "foo",0: 5,2: 4,
};
console.log(Array.prototype.splice.call(arrayLike, 0, 1, 2, 3));
// [ 5 ]
console.log(arrayLike);
// { '0': 2, '1': 3, '3': 4, length: 4, unrelated: 'foo' }

split

split() 方法接受一个模式，通过搜索模式将字符串分割成一个有序的子串列表，将这些子串放入一个数组，并返回该数组。

 const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');console.log(words[3]);//  "fox"
const chars = str.split('');console.log(chars[8]);//  "k"
const strCopy = str.split();console.log(strCopy);// ["The quick brown fox jumps over the lazy dog."]
语法sring.split(separator)string.split(separator, limit)
其中，separator表示用来分割字符串的字符或字符串，limit表示返回的数组的最大长度。var str = "How are you doing today?";var words = str.split(" "); //从空格部分开始分割
console.log(words);// ["How", "are", "you", "doing", "today?"]

slice

splice()

split

相关文章：