1. slice
概述
slice 方法用于提取数组中的一部分,返回提取结果,不会改变原数组
语法
- array.slice(start, end)
- start 起始位置 end 可选参数,结束位置
- 返回值: 起始位置到结束位置之间的数据,包含起始位置,但是不包含结束位置
- 当位置的值为负数时,代表从倒数第几个元素开始提取,如: -1 代表倒数第一个元素
实例
- const arr = ['what', 'are', 'you', 'doing', '?']
- // ['are', 'you']
- const res1 = arr.slice(1, 3)
- // ['are', 'you', 'doing']
- const res2 = arr.slice(1, -1)
2. splice
语法
- array.splice(index, howmany[, item1, item2, ...])
- index 起始位置,从何处开始
- howmany 删除的元素数量,为 0 时不会删除任何元素
- item1, item2, .. 可选参数,要添加到数组中的新项目
- 返回值:被删除元素构建的新数组,没有删除时返回空数组
- 当位置的值为负数时,代表从倒数第几个元素开始提取,如: -1 代表倒数第一个元素
实例
- const arr = ['what', 'are', 'you', 'doing', '?']
- // ['are', 'you', 'doing']
- const delArr = arr.splice(1, 3)
- // ['what', '?']
- console.log(arr);
- const arr = ['what', 'are', 'you', 'doing', '?']
- // []
- const delArr = arr.splice(1, 0, 'ok', 'name')
- // ['what', 'ok', 'name', 'are', 'you', 'doing', '?']
- console.log(arr);
- const arr = ['what', 'are', 'you', 'doing', '?']
- // ['you']
- const delArr = arr.splice(2, 1, 'ok')
- // ['what', 'are', 'ok', 'doing', '?']
- console.log(arr);
应用场景
现有物联网设备每隔一段时间会向APP发送一些数据,APP需要将数据临时保存起来,等待特定时机将这些数据一次性发送给服务端,保存这些数据时如果有相同的id,则后面的数据覆盖前面的数据
- // 缓存变量
- const data = []
- setInterval(() => {
- // 生成 1~5 之间的整数
- const id = Math.round(Math.random() * 4 + 1)
- const score = Math.round(Math.random() * 100)
- // 要存入缓存变量中的数据
- const user = { id, score }
- // 存入缓存变量
- const index = data.findIndex(item => item.id == id)
- index === -1 ? data.push(user) : data.splice(index, 1, user);
- // 查看数据
- console.log(user);
- console.log(data);
- }, 3000)
3. slice 和 splice 区别
slice() 方法用于从数组中选取元素,返回值是选取的元素,并且不会改变原数组
splice() 方法用于在数组中添加和删除元素,返回值是被删除的元素,会改变原数组