JavaScript数组splice和slice的区别

338

splice和slice有什么区别?

const array = [1, 2, 3, 4, 5];
array.splice(index, 1);
array.slice(index, 1);

1
请检查此答案是否对您有帮助:https://dev59.com/uXI-5IYBdhLWcg3wlpeW - Fábio Luiz
splice() 方法通过向数组添加或删除元素来改变数组,并仅返回已删除的项目。 - Shaik Md N Rasool
1
他们本应该交换名称以表达实际含义,例如说“切块蛋糕” - 意味着要切大蛋糕并分给一部分人。但在现实中,它却恰恰相反,原来的蛋糕完好无损,并且只是切了一片出来,这怎么可能啊,哎呀。 - vikramvi
当你拿到一个三明治时,真正做的是拿到两个面包片,而不是两片面包。这样做会让整个面包变小,感觉不太直观,我知道。 - Dean
20个回答

7

slice( )方法将给定的数组的一部分复制并将该已复制的部分作为新的数组返回。它不会改变原始数组。

splice( )方法会通过添加或删除元素来更改数组本身。

下面是slice的语法:

array.slice(from, until);

// example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.slice(1, 3)
console.log({array, newArray})

// output: array: [1, 2, 3, 4, 5, 6], newArray: [2, 3]

注意:Slice() 方法也可用于字符串。
以下是 splice 语法:
//For removing elements, we need to give the index parameter,
// and the number of elements to be removed

array.splice(index, number of elements to be removed);


//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3)
console.log({array, newArray})

// output: array: [1, 5, 6], newArray: [2, 3, 4]

注意:如果我们不定义第二个参数,则从给定索引开始的每个元素都将从数组中删除。

// For adding elements, we need to give them as the 3rd, 4th, ... parameter
array.splice(index, number of elements to be removed, element, element);

//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3, 'a', 'b')
console.log({array, newArray})

// output: array: [1, ,'a', 'b', 5, 6], newArray: [2, 3, 4]

相关链接:

让我们澄清JavaScript中slice()、splice()和split()方法的混淆

Array.prototype.slice()

Array.prototype.splice()


6

通过索引删除和替换数组中的元素

索引 = 2

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));

console.log("----after-----");
console.log(arr1);
console.log(arr2);

let log = console.log;

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];

//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

log("----before-----");
log(arr1.splice(2, 1));
log(arr2.slice(2, 1));

log("----after-----");
log(arr1);
log(arr2);

enter image description here


5

slice不会改变原始数组,它返回新数组,但splice会改变原始数组。

example: var arr = [1,2,3,4,5,6,7,8];
         arr.slice(1,3); // output [2,3] and original array remain same.
         arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].

splice方法的第二个参数与slice方法不同。在splice方法中,第二个参数表示要删除的元素数量,在slice方法中它表示结束索引。

arr.splice(-3,-1); // output [] second argument value should be greater then 
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.

-1表示最后一个元素,所以它从-3到-1开始。以上是splice和slice方法之间的主要区别。


4

另一个例子:

[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]

[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]

3

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);


请提供更多关于正在发生的事情的信息。 - Manit

3

slicesplice密切相关,但它们的作用却非常不同:

slice函数用于选择数组的一部分。 它的目的是返回其结果。 其执行不会影响其主题。

splice函数用于从数组中删除元素。 它的目的是修改其主题。 如果需要,它仍然返回已删除项目的副本以供参考。


2

JavaScript数组splice()方法示例

tutsmake的示例1 - 从索引1处移除2个元素

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

示例2 由tutsmake提供 - 在JavaScript中从索引0添加新元素

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

tutsmake的Example-3 - JavaScript中添加和删除数组元素

原始答案翻译成 "最初的回答"

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

https://www.tutsmake.com/javascript-array-splice-method-by-example/


2
Slice()和Splice()是javascript内置函数,它们的区别在于,Slice()返回删除的元素但不会改变原始数组; 例如,
        // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.slice(index)
        // result=4  
        // after slicing=>  array =[1,2,3,4,5]  (same as original array)

但是在splice()的情况下,它会影响原始数组;例如:

         // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.splice(index)
        // result=[4,5]  
        // after splicing array =[1,2,3]  (splicing affects original array)

1
有3个不同之处:
  1. splice会从原始数组中删除所选元素并将它们作为新数组返回-注意,原始数组将不再拥有这些元素。slice将创建一个新数组,其中包含所选元素,而不影响原始数组。

  2. splice作为参数接收起始索引和要从该点删除的元素数量。slice接收2个索引,即起始和结束。

  3. splice可以通过传递可选参数在特定位置添加元素到数组中。


1
这两种方法对于初学者来说非常令人困惑。我研究了一下slicesplice,发现了其中的4个关键点。您可以在slice vs splice中详细阅读更多内容。 JavaScript中的Slice
  • Slice只返回数组中指定数量的元素。例如,您有一个包含10个元素的数组,您只想从第2个索引获取3个元素。
  • 它不修改原始数组,而是返回元素的数量。
  • Slice的语法为array.slice(startingIndex, elementCount)
JavaScript中的Splice
  • Splice也可以像Slice一样返回选定的元素,但它会修改原始数组。

  • 您可以使用splice在特定索引上添加新元素到数组中

  • 您还可以同时删除指定的元素并添加新元素。

  • 使用splice的语法为array.splice(startingIndex, removeCounter, newElement(s)[optional])

总结

Slice的目的是从数组中仅获取选定的元素,它不会修改原始数组。 当您想通过删除元素和添加新元素来修改原始数组时,应使用splice。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接