[TOC] #### 1. slice --- `Array.slice()` 方法用于提取数组中的一部分元素，返回提取结果（一个新的数组），不会改变原数组 语法格式： ```plaintext array.slice(start, end) start 起始位置 end 可选参数，结束位置 返回值: 起始位置到结束位置之间的数据，包含起始位置，但是不包含结束位置 当位置的值为负数时，代表从倒数第几个元素开始提取，如: -1 代表倒数第一个元素 ``` 使用示例： ```javascript const arr = ['what', 'are', 'you', 'doing', '?'] const res1 = arr.slice(1, 3) // ['are', 'you'] const res2 = arr.slice(1, -1) // ['are', 'you', 'doing'] ``` #### 2. splice --- `Array.splice()` 方法用于从数组添加或删除元素，返回值时被删除的数组，会修改原数组 语法格式： ```plaintext array.splice(index, howmany[, item1, item2, ...]) index 起始位置，从何处开始 howmany 删除的元素数量，为 0 时不会删除任何元素 item1, item2, .. 可选参数，要添加到数组中的新项目 返回值：被删除元素构建的新数组，没有删除时返回空数组 当位置的值为负数时，代表从倒数第几个元素开始提取，如: -1 代表倒数第一个元素 ``` 使用示例： ```javascript // 删除元素 const arr = ['what', 'are', 'you', 'doing', '?'] // 从索引 1 开始，删除 3 个元素 const delArr = arr.splice(1, 3) // ['are', 'you', 'doing'] console.log(arr) // 原数组发生改变 ['what', '?'] ``` ```javascript // 追加元素 const arr = ['what', 'are', 'you', 'doing', '?'] const delArr = arr.splice(1, 0, 'ok', 'name') // 因为没有删除元素，所有返回值是空数组 console.log(arr) // 原数组发生改变 ['what', 'ok', 'name', 'are', 'you', 'doing', '?'] ``` ```javascript // 从指定位置删除元素，然后再追加元素 const arr = ['what', 'are', 'you', 'doing', '?'] const delArr = arr.splice(2, 1, 'ok') // ['you'] console.log(arr) // 原数组发生改变 ['what', 'are', 'ok', 'doing', '?'] ``` #### 3. 区别总结 --- 功能差异： + slice() 方法用于从数组中选取元素，返回值是选取的元素数组，并且不会改变原数组 + splice() 方法用于在数组中添加和删除元素，返回值是被删除的元素数组，会改变原数组 参数差异： + slice() 方法接收两个参数：起始索引、结束索引（可选参数），如果省略结束索引，则提取到数组末尾 + splice() 方法：第一个参数是起始索引，第二个参数是删除元素的数量，后面的参数是插入的元素 #### 4. 应用场景 --- 很多项目都有搜索功能，并且显示历史搜索记录，下面代码实现了历史记录的存储 ```javascript // 存储历史搜索记录 // history 以往的历史记录数组，一般是从本地缓存中读取 // keyword 搜索框输入的关键词 // count 历史记录保留数量 function writeHistory(history, keyword, count = 5) { const index = history.indexOf(keyword) if (index !== -1) history.splice(index, 1) history.unshift(keyword) return history.slice(0, count) } ``` 现有物联网设备每隔一段时间会向 APP 发送一些数据，APP 需要将数据临时保存起来，等待特定时机将这些数据一次性发送给服务端，保存这些数据时如果有相同的 id，则后面的数据覆盖前面的数据 ```javascript // 缓存变量 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) ```