news 2026/6/25 18:14:59

JS 按照数组顺序对对象进行排序

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JS 按照数组顺序对对象进行排序


在JavaScript中,可以通过将对象转换为可排序的结构(如数组),使用自定义比较函数基于参考数组的顺序进行排序,然后转换回对象来实现。以下是一个通用的函数示例,它接受一个参考数组和一个待排序的对象,并返回一个新对象,其键按照参考数组的顺序排列。

需求:自定义排序 el-table 表格的列。
思路:根据数组字段的顺序,对对象中的key值进行重新排序。
// 示例代码 const referenceOrder = ['sunday', 'monday', 'wednesday', 'thursday', 'friday']; const unsortedObject = { wednesday: 'wednesday', friday: 'friday', monday: 'monday', thursday: 'thursday', sunday: 'sunday' }; // 预期输出: const unsortedObject = { sunday: 'sunday', monday: 'monday', wednesday: 'wednesday', thursday: 'thursday', friday: 'friday' };
代码实现:
/** * 按照数组顺序对对象进行排序 * @param {Array} arr - 排序依据的数组 * @param {Object} obj - 需要排序的对象 * @returns {Object} 按数组顺序重新排列的对象 */ export function sortObjectByArray(arr, obj) { const sortedObj = {}; arr.forEach(key => { if (obj.hasOwnProperty(key)) { sortedObj[key] = obj[key]; } }); return sortedObj; } let sortedObject = sortObjectByArray(arr, object); console.log(sortedObject); // 输出结果: { sunday: 'sunday', monday: 'monday', wednesday: 'wednesday', thursday: 'thursday', friday: 'friday' };
问题:

在Vue中发现 调用 hasOwnProperty 报错:不要使用对象原型上的方法,因为原型的方法可能会被重写。

Do not access Object.prototype method ‘hasOwnProperty‘ from target object no-prototype-builtins

原因:

出现这种报错是因为使用Vue.js启动项目会自动生成配置为与ESLint一起使用的样板

ESLint是一个能帮助识别报告JS中的不良模式,以便维护代码

在ECMAScript5.1中,新增了 Object.create,它支持使用指定的 [[Prototype]] 创建对象。Object.create(null)是一种常见的模式,用于创建将用作映射的对象

Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString(), hasOwnProperty()等方法

因为no-prototype-builtins 规则不允许Object.prototype直接从对象调用方法,所以会导致这种错误

解决方法:

将xxx.hasOwnProperty(‘yyy’)修改为Object.prototype.hasOwnProperty.call(xxx, ‘yyy’)

/** * 按照数组顺序对对象进行排序 * @param {Array} arr - 排序依据的数组 * @param {Object} obj - 需要排序的对象 * @returns {Object} 按数组顺序重新排列的对象 */ export function sortObjectByArray(arr, obj) { const sortedObj = {}; arr.forEach(key => { // if (obj.hasOwnProperty(key)) { // 修改前 if (hasOwnKey(obj, key)) { // 修改后 sortedObj[key] = obj[key]; } }); return sortedObj; } function hasOwnKey(obj, key) { return Object.prototype.hasOwnProperty.call(obj, key) }

记录一下~

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/25 13:35:20

Qwen2.5-7B部署效率提升:并行推理与批处理实战优化

Qwen2.5-7B部署效率提升:并行推理与批处理实战优化 1. 引言:为何需要高效部署Qwen2.5-7B? 随着大语言模型(LLM)在实际业务场景中的广泛应用,模型推理的吞吐量和响应延迟成为决定用户体验和系统成本的关键因…

作者头像 李华
网站建设 2026/6/16 23:05:22

Qwen2.5-7B多任务学习:联合训练优化策略

Qwen2.5-7B多任务学习:联合训练优化策略 1. 技术背景与问题提出 随着大语言模型(LLM)在自然语言理解、代码生成、数学推理等任务中的广泛应用,单一任务微调的局限性逐渐显现。传统指令微调往往聚焦于特定任务分布,导…

作者头像 李华
网站建设 2026/6/21 10:03:32

Qwen2.5-7B文本摘要生成:长文档处理技巧

Qwen2.5-7B文本摘要生成:长文档处理技巧 1. 技术背景与挑战 随着大语言模型在自然语言处理任务中的广泛应用,长文档的自动摘要生成已成为信息提取、内容聚合和知识管理的核心需求。传统摘要模型受限于上下文长度(通常为512或1024 tokens&am…

作者头像 李华
网站建设 2026/6/23 0:42:22

Qwen2.5-7B语音助手:与TTS/ASR集成方案

Qwen2.5-7B语音助手:与TTS/ASR集成方案 1. 引言:构建下一代智能语音交互系统 随着大语言模型(LLM)在自然语言理解与生成能力上的飞速发展,语音助手正从“关键词匹配”迈向“语义理解自然对话”时代。Qwen2.5-7B作为阿…

作者头像 李华
网站建设 2026/6/13 0:47:29

Qwen2.5-7B工具链推荐:高效部署必备插件与脚本集合

Qwen2.5-7B工具链推荐:高效部署必备插件与脚本集合 1. 背景与技术定位 1.1 Qwen2.5-7B 模型简介 Qwen2.5 是阿里云推出的最新一代大语言模型系列,覆盖从 0.5B 到 720B 参数的多个版本。其中 Qwen2.5-7B 是一个中等规模、高性价比的开源模型&#xff0c…

作者头像 李华
网站建设 2026/6/22 8:19:31

先搞懂:web 开发到底在做啥?

先搞懂:web 开发到底在做啥?简单说,web 开发就是把一堆代码变成我们能看到、能点击的网页。比如你打开一个美食博客,看到漂亮的图片、能滑动的菜谱、可以评论的留言区,这些都是 web 开发者一点点“敲”出来的。这里面分…

作者头像 李华