JS 数组方法 slice 和 splice 的区别

1. slice

概述

slice 方法用于提取数组中的一部分，返回提取结果，不会改变原数组

语法

1. array.slice(start, end)
3. start 起始位置 end 可选参数，结束位置
5. 返回值: 起始位置到结束位置之间的数据，包含起始位置，但是不包含结束位置
7. 当位置的值为负数时，代表从倒数第几个元素开始提取，如: -1 代表倒数第一个元素

实例

1. const arr = ['what', 'are', 'you', 'doing', '?']
2. // ['are', 'you']
3. const res1 = arr.slice(1, 3)
4. // ['are', 'you', 'doing']
5. const res2 = arr.slice(1, -1)

2. splice

语法

1. array.splice(index, howmany[, item1, item2, ...])
3. index 起始位置，从何处开始
4. howmany 删除的元素数量，为 0 时不会删除任何元素
5. item1, item2, .. 可选参数，要添加到数组中的新项目
7. 返回值：被删除元素构建的新数组，没有删除时返回空数组
9. 当位置的值为负数时，代表从倒数第几个元素开始提取，如: -1 代表倒数第一个元素

实例

1. const arr = ['what', 'are', 'you', 'doing', '?']
2. // ['are', 'you', 'doing']
3. const delArr = arr.splice(1, 3)
4. // ['what', '?']
5. console.log(arr);

1. const arr = ['what', 'are', 'you', 'doing', '?']
2. // []
3. const delArr = arr.splice(1, 0, 'ok', 'name')
4. // ['what', 'ok', 'name', 'are', 'you', 'doing', '?']
5. console.log(arr);

1. const arr = ['what', 'are', 'you', 'doing', '?']
2. // ['you']
3. const delArr = arr.splice(2, 1, 'ok')
4. // ['what', 'are', 'ok', 'doing', '?']
5. console.log(arr);

应用场景

现有物联网设备每隔一段时间会向APP发送一些数据，APP需要将数据临时保存起来，等待特定时机将这些数据一次性发送给服务端，保存这些数据时如果有相同的id，则后面的数据覆盖前面的数据

1. // 缓存变量
2. const data = []
3. setInterval(() => {
4. // 生成 1~5 之间的整数
5. const id = Math.round(Math.random() * 4 + 1)
6. const score = Math.round(Math.random() * 100)
7. // 要存入缓存变量中的数据
8. const user = { id, score }
9. // 存入缓存变量
10. const index = data.findIndex(item => item.id == id)
11. index === -1 ? data.push(user) : data.splice(index, 1, user);
12. // 查看数据
13. console.log(user);
14. console.log(data);
15. }, 3000)

3. slice 和 splice 区别

slice() 方法用于从数组中选取元素，返回值是选取的元素，并且不会改变原数组

splice() 方法用于在数组中添加和删除元素，返回值是被删除的元素，会改变原数组