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

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)  //false
    console.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?"]