前言

splice 会改变原数组，slice 不会改变原数组。

一、 splice方法

1、介绍

splice()  方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

参数

2+n 接收两个参数 + n个要添加进入数组的元素

1. start： 从那个元素索引（整数）开始删除 ，start绝对值大于arr.length 则相当于从0开始，若为复数 则从数组倒数第start 个元素往后面删除
2. deleteCount： 从start开始要删除第几个元素, 如果省略或者大于arr.length -start，则数组的第start个元素（包含）之后的都被删除。
3. item1、item2、... splice API

arr.splice(start, deleteCount，item1，item2，...)

返回值

返回被删除元素所组成的数组

2、案例与使用场景

只有一个参数的情况

let names = ['张三','李四', '王老五', '赵小六','周七七','林八']

let targetNames = names.splice(2)

console.log(names);  // 原数组被改变输出 [ '张三', '李四' ]
console.log(targetNames); // 得到被 删除元素组成的数组 [ '王老五', '赵小六', '周七七', '林八' ]

有二个参数的情况

let names = ['张三','李四', '王老五', '赵小六','周七七','林八']

let targetNames = names.splice(2,2)

console.log(names);  // 原数组的arr[2],arr[3]这两个元素被删除。 [ '张三', '李四', '周七七', '林八' ]
console.log(targetNames); // [ '王老五', '赵小六' ]

三个参数时可以替换原数组中某几项元素的值

let names = ['张三', '李四', '王老五', '赵小六', '周七七', '林八']

let targetNames = names.splice(2, 2, '陈二', '吴一')

console.log(names);  // [ '张三', '李四', '陈二', '吴一', '周七七', '林八' ]
console.log(targetNames); // [ '王老五', '赵小六' ]

从指定某个位置批量插入

let names = ['张三', '李四', '王老五', '赵小六', '周七七', '林八']

let targetNames = names.splice(0, 0,  '吴一','陈二')

console.log(names);  // 得到插入后的结果 ['吴一', '陈二','张三', '李四', '王老五', '赵小六', '周七七', '林八']
console.log(targetNames); // 删除个数为0 没有删除元素 []

start 为负值情况

let names = ['张三', '李四', '王老五', '赵小六', '周七七', '林八']

let targetNames = names.splice(-3, 2)

console.log(names);  // 从倒数第三个往后删除 [ '张三', '李四', '王老五', '林八' ]
console.log(targetNames); //[ '赵小六', '周七七' ]

二、 slice方法

slice()  方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

1、介绍

参数

接收两个参数begin 和 end，它们是一个索引区间[begin, end) 左闭右开

1. begin ,只有一个参数时，截取 数组索引begin 后面的所有元素， 为负数时，截取倒数第begin个索引后面的所有。
2. end 结尾区间索引，不包括end, 为负数时为数组的倒数第end个

看具体的输入输出情况

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

返回值

一个含有被提取元素的新数组。

2、案例与使用场景

1、将类数组对象转化为数组

面试题中会问道的如何将函数的类数组对象参数agruments 转化为数组。

function args() {
  return arguments
}
function list() {
  return Array.prototype.slice.call(arguments); // 写法
}

let a = args(1,2,3)
let b = list(1,2,3)

console.log(a); //[Arguments] { '0': 1, '1': 2, '2': 3 }
console.log(b); // [ 1, 2, 3 ]

上面的写法也可以是这样 return [].slice.call(arguments)

还可以这样

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

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

var list1 = list(1, 2, 3); // [1, 2, 3]
console.log(list1);

字符串的API也有slice 这个方法，使用的使用需要注意区别

总结

本文介绍了数组中splice方法和slice方法的区别，以及它们的应用场景，面试中遇到的问题等。总结区别如下：

1. splice会改变原数组， slice 不会改变原数组。
2. splice 接收多个参数 2 + n 个参数 ，第一个是索引，第二个是要删除的个数，第三个以后是要添加的元素。返回被删除的数组。 3.slice 两个参数都是索引，返回切片的数组

官方文档