0

0

如何识别数组中位置发生变动的元素

花韻仙語

花韻仙語

发布时间:2026-02-06 12:10:53

|

320人浏览过

|

来源于php中文网

原创

如何识别数组中位置发生变动的元素

通过对比新旧数组中各元素的前后邻居关系,可精准定位被拖拽移动的元素;当仅两个相邻元素互换位置时,任选其一作为结果即可。

在实现拖拽排序(如 HTML 列表项重排)功能时,一个常见需求是:仅根据拖拽前后的数组状态,快速识别出哪个元素被主动移动了位置。由于用户只拖动一个元素(其余元素相对顺序不变),该元素在新数组中的“上下文”——即其前驱与后继元素——必然发生变化,而其他元素至少保留一个邻居未变。

核心思路是:对每个元素,记录它在旧数组和新数组中的直接邻居(前一项和后一项的 id),然后找出那些在新旧数组中“两个邻居都不同”的元素。这类元素极大概率就是被拖动的目标。

以下是具体实现:

const oldArr = [{id: 'id1'}, {id: 'id2'}, {id: 'id3'}, {id: 'id4'}, {id: 'id5'}, {id: 'id6'}];
const newArr = [{id: 'id1'}, {id: 'id2'}, {id: 'id5'}, {id: 'id3'}, {id: 'id4'}, {id: 'id6'}];

// 构建旧数组中每个 id 对应的邻居数组 [prevId, nextId],边界用 '-' 占位
const oldNeighbors = oldArr.reduce((map, {id}, i, arr) => {
  const prev = i === 0 ? '-' : arr[i - 1].id;
  const next = i === arr.length - 1 ? '-' : arr[i + 1].id;
  map[id] = [prev, next];
  return map;
}, {});

// 同理构建新数组的邻居映射
const newNeighbors = newArr.reduce((map, {id}, i, arr) => {
  const prev = i === 0 ? '-' : arr[i - 1].id;
  const next = i === arr.length - 1 ? '-' : arr[i + 1].id;
  map[id] = [prev, next];
  return map;
}, {});

// 查找「旧邻居全部未出现在新邻居中」的元素(即两个邻居都变了)
const movedItems = oldArr.filter(({id}) => {
  const oldN = oldNeighbors[id];
  const newN = newNeighbors[id];
  // 若旧前驱和旧后继均不在新邻居中,则判定为移动项
  return !newN.includes(oldN[0]) && !newN.includes(oldN[1]);
});

console.log('Moved item:', movedItems); // [{id: 'id5'}]

优势说明

10Web
10Web

AI驱动的WordPress网站自动构建器,托管和页面速度助推器

下载
  • 时间复杂度 O(n),仅需三次线性遍历;
  • 不依赖索引差或位移量,天然兼容首尾插入、跨段拖拽等场景;
  • 对“相邻互换”情形(如 [A,B] → [B,A])自动退化为返回任一元素(因二者均满足邻居全变),符合题目中“无需区分”的要求。

⚠️ 注意事项

  • 假设所有 id 唯一且稳定(不可重复、不可为空);
  • 若存在多元素同时移动(非单拖拽场景),本方法可能误判,此时需结合事件钩子(如 dragstart/dragend)做辅助校验;
  • 边界处理(首/尾元素)使用 '-' 占位符,确保比较逻辑统一,也可替换为 null 或 undefined,但需同步调整 .includes() 判断逻辑。

该方法轻量、健壮、语义清晰,是前端列表排序变更检测的推荐实践方案。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

240

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

600

2024.03.01

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5503

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3127

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

879

2025.12.25

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

74

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

15

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

9

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

5

2026.02.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.4万人学习

CSS教程
CSS教程

共754课时 | 27.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号