按键或值对 JavaScript 对象进行排序; ES6

2024-02-09

在我问之前;关于这个特定主题有很多讨论,其中大部分与 ES5 相关,并不一定适用于 ES6。我试图得到一些澄清,也许可以帮助下一个在互联网上寻找答案的人。这是专门针对 ES6 的.

问题:

考虑以下对象结构:

const unsorted_object = {
    'C': '0003',
    'D': '0004',
    'A': '0001',
    'B': '0002',
    'F': '0005',
}; 
  1. 如何按键对 JavaScript 对象进行排序? (已回答here https://stackoverflow.com/questions/5467129)

    const sorted_object = {};
    Object.keys(unsorted_object).sort().forEach(function(key) {
        sorted_object[key] = unsorted_object[key];
    });
    
  2. 如何按键值对 JavaScript 对象进行排序?

EDIT #1

我可能对问题#2 没有完全清楚。这个想法是根据键的值而不是键和值对 JavaScript 对象进行排序。

EDIT #2

const unsorted_object = {
    '0001': '13.1666',
    '0002': '11.0001',
    '0003': '10.6664',
    '0004': '13.1666',
    '0005': '7.3331',
};

Output:

'0001': '13.1666'
'0004': '13.1666'
'0002': '11.0001'
'0003': '10.6664'
'0005': '7.3331'

ES6 中的对象键具有遍历顺序。整数键始终排在第一位,并按升序排序 (0 -> 9)。在非整数键中,保留分配的顺序(请参阅此article http://2ality.com/2015/10/property-traversal-order-es6.html)。要对对象的键进行排序,我们需要重新创建对象,并按所需的顺序添加键。

Note:这意味着排序仅适用于非整数键,因为整数始终是第一个,并且始终按升序排序。

要排序并重新创建对象:

  • Use Object.entries() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce获取键/值对数组 -[[key, value], [key, value]]
  • 按值对它们进行排序(该对中的第二项)使用数组解构 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Ignoring_some_returned_values - [, v1]。使用以下命令将字符串转换为数字+操作员,
  • Reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce回到一个物体。使用解构获取键和值[k , v],并将它们添加到累加器对象中使用计算属性名称 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names - ({ [k]: v }), and 对象传播 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals - ({ ...r, [k]: v })
const unsorted_object = {
    '0001': '13.1666',
    '0002': '11.0001',
    '0003': '10.6664',
    '0004': '13.1666',
    '0005': '7.3331',
};

const sorted_object = Object.entries(unsorted_object)
  .sort(([,v1], [,v2]) => +v2 - +v1)
  .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});

console.log(sorted_object);

如果支持,您可以使用以下条目从条目创建对象Object.fromEntries() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries代替Array.reduce():

const unsorted_object = {
    '0001': '13.1666',
    '0002': '11.0001',
    '0003': '10.6664',
    '0004': '13.1666',
    '0005': '7.3331',
};

const sorted_object = Object.fromEntries(
  Object.entries(unsorted_object)
    .sort(([,v1], [,v2]) => +v2 - +v1)
);

console.log(sorted_object);

边缘友好版本,使用Object.assign() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign而不是传播:

const unsorted_object = {
    '0001': '13.1666',
    '0002': '11.0001',
    '0003': '10.6664',
    '0004': '13.1666',
    '0005': '7.3331',
};

const sorted_object = Object.entries(unsorted_object)
  .sort(([,v1], [,v2]) => +v2 - +v1)
  .reduce((r, [k, v]) => Object.assign(r, { [k]: v }), {});

console.log(sorted_object);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

按键或值对 JavaScript 对象进行排序; ES6 的相关文章

  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 如何在 DOM 中的每个元素中调用函数,即使它们是动态创建的

    我想对 DOM 上的特定元素调用函数 例如 red css backgroundColor pink 它适用于 DOM 中已经存在的任何元素 但我也希望在动态添加到 DOM 的元素中调用此方法 我尝试过类似的事情 red on functi
  • JQuery datepickers-从开始日期设置结束日期

    使用了两个 Jquery 日期选择器 StartDate 和 EndDate
  • 如何在不阻止触摸启动的情况下防止“过度滚动历史导航”?

    我正在实现基于滑动的导航 但我在使用 Chrome 时遇到了麻烦 当页面向右拖动时 会触发新实现的功能 过度滚动历史导航 从而导致跳回 到 历史 1 为了防止这种情况 我必须打电话 preventDefault on touchstart
  • 如何使 d3 饼图响应式?

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 在javascript中访问函数内的实例变量?

    如何以最简单的方式访问函数内的实例变量 function MyObject Instance variables this handler Methods this enableHandler function var button doc
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • C++:向 std::sort 提供模板化比较函数

    假设我想让 std sort 根据指针指向的 int 值对指向 int 的指针向量进行排序 忽略那里明显的性能问题 很简单吧 做一个函数 bool sort helper const int a const int b return a l
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 如果没有 /// 标签,TypeScript 的“将 JavaScript 输出合并到文件中”选项无法推断出正确的脚本顺序

    我正在开发一个使用 将 JavaScript 输出合并到文件中 选项的 TypeScript 解决方案 我经常引用另一个文件中定义的项目 例如 In MyBaseClass ts export class MyBaseClass In My
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • Javascript 浮点乘以 100 仍然有错误

    我有一个货币字段的文本输入 我在字段中输入 33 91 并在尝试使用 乘以 100 技术时得到以下结果 var curWth parseInt trans withdraw index val 100 3390 var curWth par
  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w
  • 如何重复 ajax 请求,直到满足 RxJS Observable 的条件?

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt
  • ChartJs:如何按时间值(而不是像素)以编程方式平移

    我使用的是chartJs 3 6 1 和 Chartjs plugin zoom 1 2 1 但我认为这并不重要 我有 2 个时间序列折线图 当我通过拖放平移一个图表时 我也想移动 平移另一个图表 为此 我为 graphA 启用了缩放 平移
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val

随机推荐

  • scrapy如何制作自己的调度程序中间件

    我正在使用 Python 2 7 和 Scrapy 0 20 我的问题 如何构建我自己的调度程序 我尝试过的 我通过互联网阅读并发现了这一点 我必须创建自己的 python 类并使用 SCHEDULER MIDDLEWARES 在设置中分配
  • 生成不连续重复的随机数

    如何生成 0 4 之间的随机整数 并且不会连续两次生成相同的数字 例如 如果第一次生成的数字为3 则第二次随机生成的可能数字为0 1 2 4 如果第二次生成2 则第三次随机生成的可能数字为0 1 3 4 以此类推 int oldrand
  • Spring saml - 在 SP 上发起登录时如何记住请求参数,并在 IdP 响应后处理它们

    我想记住我的网站 SP 的第一个请求中的 url 请求参数 并在 IdP 响应后使用它们 我正在使用 spring saml 扩展并考虑 relayState 属性 但找不到如何使用请求中的参数构建它的示例 我需要在 sso 身份验证过程后
  • 时间复杂度 嵌套循环 内循环 + 外循环

    谁能解释一下这个算法的时间复杂度是多少 for i 1 i lt n i for j 1 j lt n j i note not j printf Iteration d d n i j The printf在内循环中称为exactly c
  • 相机2输出位图

    我正在尝试使用谷歌移动视觉API https developers google com vision barcodes overview使用camera2模块 我遇到了很多麻烦 我正在使用谷歌的android Camera2Video h
  • 使 google-chrome 浏览器在页面加载时全屏显示

    即使您将其标记为重复 也请考虑在此处回答此问题因为出于某种原因 我无法让它与其他解决方案一起使用 尽管我试图寻求帮助 但没有人回复 我真正想要的是 document ready function browser goes fullscree
  • PHP 中 MySQL 结果的分页

    直到最近我才真正考虑过这个 分页 作为一个问题 当我坐下来专注于它时 我发现自己面临很多问题 我感兴趣的是一个基本的联系人管理系统 用户可以在其中添加 更新 删除 搜索联系人 搜索部分是我需要有效实现分页的地方 我的想法 ve 和 ve 点
  • Google Apps 脚本 - JavaScript 不工作

    我创建了一个简单的网络应用程序 但它不起作用 Code gs function doGet I think this works var output HtmlService createTemplateFromFile index eva
  • 使用 Java 8 的 cobertura-maven-plugin

    是我一个人的问题还是 cobertura maven plugin 不适用于 java 8 当它运行时我得到 INFO cobertura maven plugin 2 6 instrument default provider impl
  • Oozie Shell Action 的 stdout 和 stderr 输出

    在 Oozie 站点中 它说 Shell 操作的 stdout 和 stderr 输出被重定向到运行 shell 命令的 Oozie Launcher 映射减少作业任务 STDOUT 谁能告诉我具体应该去哪里看 Oozie 在 启动器 中运
  • 递归是如何工作的? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 请用最简单的方式解释递归是如何工作的
  • Robotium:测试运行未能完成。预期 N 次测试,已收到 (N-1)

    Android 测试仍然是我头疼的问题 我创建了最简单的应用程序只是为了弄清楚如何Robotium有效 每次测试失败时都会出现错误 Running tests Test running started Test failed to run
  • subprocess.call cd 不起作用[重复]

    这个问题在这里已经有答案了 In 3 pwd Out 3 u Users aarcher Desktop scripts In 5 subprocess call mkdir p os path expanduser file path n
  • 防止在 C++ 中重新绘制窗口

    我正在编写一个全局钩子 DLL 它需要在窗口上使用 GDI 进行一些绘图以响应事件 我的问题是正在绘制的窗口不断重新绘制自身 因此我绘制的内容在我想要的之前就被删除了 有什么办法可以阻止窗户在我需要的时间内绘制任何东西吗 我的钩子目前是WH
  • PHP $_POST 只有 id,没有名称

    有人可以向我解释一下吗 我有以下代码
  • 如何为 CustomClipper 创建的小部件制作合适的边框和阴影

    我有一个Container里面的小部件ClipPath它使用一个CustomClipper 一切正常 我有所需的小部件形状 但是 我找不到为这个自定义形状的小部件制作阴影的方法 另外 我想要一个自动跟随此自定义小部件边缘的轮廓 边框 再次没
  • 不同的 ActionBar.Tab 使用不同的颜色

    我想让 ActionBar 中的所有选项卡都有不同的颜色指示器 例如选项卡 1 为蓝色 选项卡 2 为红色等 为了实现这一点 我为所有颜色创建了不同的选择器 并将它们放在可绘制的不同 xml 中 在 style xml 中我通过以下方式调用
  • 使用正则表达式 OR 运算符解决 2 个条件

    我正在尝试使用 OR 运算符将 2 个正则表达式合并为 1 个 我有一个检查字母后跟 8 位数字是否匹配的方法 Regex IsMatch s A Z d 8 我有另一个只检查 9 位数字的程序 Regex IsMatch s d 9 现在
  • Kubernetes 记录命令 TLS 握手超时

    我正在运行开源 kube 版本 1 9 在运行时出现 TLS 握手超时错误kubectl logs命令 其他kubectl命令工作正常 etc kubernetes pki gt kubectl get pods NAME READY ST
  • 按键或值对 JavaScript 对象进行排序; ES6

    在我问之前 关于这个特定主题有很多讨论 其中大部分与 ES5 相关 并不一定适用于 ES6 我试图得到一些澄清 也许可以帮助下一个在互联网上寻找答案的人 这是专门针对 ES6 的 问题 考虑以下对象结构 const unsorted obj