JavaScript如何移除数组指定对象并将其移至数组首位

核心实现逻辑分3步：

• 遍历数组找到title属性匹配目标值的元素
• 将该元素从原位置移除
• 把移除的元素插入到数组索引为0的头部位置

根据是否允许修改原数组，有两种常用实现方式：

方式1：直接修改原数组（性能更优） #

用数组原生的findIndex定位元素位置，再用splice移除元素、unshift插入头部，注意加判断避免找不到匹配元素时报错：

const inputArr = [{id:1, title:"John",age:20},{id:2, title:"smith",age:22},{id:3, title:"stokes",age:24},{id:4, title:"david",age:30},{id:5, title:"William",age:28},{id:6, title:"Andy",age:32}]

// 匹配title为William的元素索引
const targetIndex = inputArr.findIndex(item => item.title === "William")
if (targetIndex > -1) {
  // 从原位置删除匹配元素，splice返回被删除元素的数组
  const [targetItem] = inputArr.splice(targetIndex, 1)
  // 将元素插入数组头部
  inputArr.unshift(targetItem)
}

// 此时inputArr和需求给出的outputArr完全一致

方式2：不修改原数组（生成新数组） #

适合不允许直接修改原始数据的场景（比如React状态更新），用find拿到目标元素后，过滤掉原数组里的匹配项，再把目标元素放到新数组头部：

const inputArr = [{id:1, title:"John",age:20},{id:2, title:"smith",age:22},{id:3, title:"stokes",age:24},{id:4, title:"david",age:30},{id:5, title:"William",age:28},{id:6, title:"Andy",age:32}]
const TARGET_TITLE = "William"

const targetItem = inputArr.find(item => item.title === TARGET_TITLE)
// 找不到匹配项时直接返回原数组的浅拷贝
const outputArr = targetItem 
  ? [targetItem, ...inputArr.filter(item => item.title !== TARGET_TITLE)]
  : [...inputArr]

注意：如果数组里存在多个title等于目标值的元素，方式2会把所有匹配项都过滤掉，只把第一个匹配到的元素放到头部，如果需要处理多匹配项的场景，可以调整过滤逻辑按索引判断。

内容的提问来源于stack exchange，提问作者vjtechno