Javascript:打乱数组中的对象组

2024-05-10

我有一个对象数组,我已按键排序(group如下)使得所有具有相同值的对象group在索引中彼此相邻data。例如:

var data = [{foo: "cat", group:"house"},
            {foo: "cat", group: "house"},
            {foo: "cat", group: "tree"},
            {foo: "dog", group: "tree"},
            {foo: "dog", group: "car"}];

我正在尝试打乱对象中对象的顺序data数组,同时保留键值内的顺序group。换句话说,我试图将对象组打乱data而不是单个对象。虽然我知道如何对数组中的对象进行洗牌,但我不知道如何对数组中的对象组进行洗牌。

我的想法是,可能有一种方法可以利用这样一个事实:只有当群体发生变化时,群体的价值观才会发生变化。


你在这里有一个有趣的问题。我只是最近写过这个 https://stackoverflow.com/a/61049318/633183因此,如果您对此答案中提出的想法感兴趣,请点击该链接 -

const randInt = (n = 0) =>
  Math.floor(Math.random() * n)

const { empty, map, concat } =
  Comparison

const sortByGroup =
  map(empty, x => x.group)

const sortByRand =
  map(empty, _ => randInt(3) - 1) // -1, 0, 1

直观上,我们使用map(empty, ...)进行新的比较(排序)。concat是我们用来将一个比较与另一个比较结合起来的东西 -

// sort by .group then sort by rand
const mySorter =
  concat(sortByGroup, sortByRand) 

我们的比较直接插入Array.prototype.sort -

const data =
  [ { name: "Alice", group: "staff" }
  , { name: "Monty", group: "client" }
  , { name: "Cooper", group: "client" }
  , { name: "Jason", group: "staff" }
  , { name: "Farrah", group: "staff" }
  , { name: "Celeste", group: "guest" }
  , { name: "Briana", group: "staff" }
  ]

console.log("first", data.sort(mySorter)) // shuffle once
console.log("second", data.sort(mySorter)) // shuffle again

在输出中,我们看到项目按以下方式分组group然后随机化——

// first
[ { name: "Cooper", group: "client" }
, { name: "Monty", group: "client" }
, { name: "Celeste", group: "guest" }
, { name: "Alice", group: "staff" }
, { name: "Jason", group: "staff" }
, { name: "Farrah", group: "staff" }
, { name: "Briana", group: "staff" }
]

// second
[ { name: "Monty", group: "client" }
, { name: "Cooper", group: "client" }
, { name: "Celeste", group: "guest" }
, { name: "Farrah", group: "staff" }
, { name: "Alice", group: "staff" }
, { name: "Jason", group: "staff" }
, { name: "Briana", group: "staff" }
]

最后,我们实现Comparison -

const Comparison =
  { empty: (a, b) =>
      a < b ? -1
        : a > b ? 1
          : 0
  , map: (m, f) =>
      (a, b) => m(f(a), f(b))
  , concat: (m, n) =>
      (a, b) => Ordered.concat(m(a, b), n(a, b))
  }

const Ordered =
  { empty: 0
  , concat: (a, b) =>
      a === 0 ? b : a
  }

展开下面的代码片段以在您自己的浏览器中验证结果。运行程序多次查看结果总是按group然后随机化——

const Comparison =
  { empty: (a, b) =>
      a < b ? -1
        : a > b ? 1
          : 0
  , map: (m, f) =>
      (a, b) => m(f(a), f(b))
  , concat: (m, n) =>
      (a, b) => Ordered.concat(m(a, b), n(a, b))
  }

const Ordered =
  { empty: 0
  , concat: (a, b) =>
      a === 0 ? b : a
  }

const randInt = (n = 0) =>
  Math.floor(Math.random() * n)

const { empty, map, concat } =
  Comparison

const sortByGroup =
  map(empty, x => x.group)

const sortByRand =
  map(empty, _ => randInt(3) - 1) // -1, 0, 1

const mySorter =
  concat(sortByGroup, sortByRand) // sort by .group then sort by rand

const data =
  [ { name: "Alice", group: "staff" }
  , { name: "Monty", group: "client" }
  , { name: "Cooper", group: "client" }
  , { name: "Jason", group: "staff" }
  , { name: "Farrah", group: "staff" }
  , { name: "Celeste", group: "guest" }
  , { name: "Briana", group: "staff" }
  ]
   
console.log(JSON.stringify(data.sort(mySorter))) // shuffle once
console.log(JSON.stringify(data.sort(mySorter))) // shuffle again

小改进

而不是像这样的硬编码排序器sortByGroup,我们可以做一个参数化的比较,sortByProp -

const sortByProp = (prop = "") =>
  map(empty, (o = {}) => o[prop])

const sortByFullName =
  concat
    ( sortByProp("lastName")  // primary: sort by obj.lastName
    , sortByProp("firstName") // secondary: sort by obj.firstName
    )

data.sort(sortByFullName) // ...

为什么是模块?

定义单独的好处Comparison模块很多,这里不再赘述。该模块使我们能够轻松建模复杂的排序逻辑 -

const sortByName =
  map(empty, x => x.name)

const sortByAge =
  map(empty, x => x.age)

const data =
  [ { name: 'Alicia', age: 10 }
  , { name: 'Alice', age: 15 }
  , { name: 'Alice', age: 10 }
  , { name: 'Alice', age: 16 }
  ]

Sort by name然后排序age -

data.sort(concat(sortByName, sortByAge))
// [ { name: 'Alice', age: 10 }
// , { name: 'Alice', age: 15 }
// , { name: 'Alice', age: 16 }
// , { name: 'Alicia', age: 10 }
// ]

Sort by age然后排序name -

data.sort(concat(sortByAge, sortByName))
// [ { name: 'Alice', age: 10 }
// , { name: 'Alicia', age: 10 }
// , { name: 'Alice', age: 15 }
// , { name: 'Alice', age: 16 }
// ]

并且毫不费力reverse任何分拣机。这里我们按照name然后反向排序age -

const Comparison =
  { // ...
  , reverse: (m) =>
      (a, b) => m(b, a)
  }

data.sort(concat(sortByName, reverse(sortByAge)))
// [ { name: 'Alice', age: 16 }
// , { name: 'Alice', age: 15 }
// , { name: 'Alice', age: 10 }
// , { name: 'Alicia', age: 10 }
// ]

功能原理

Our Comparison模块灵活而可靠。这使我们能够以类似公式的方式编写排序器 -

// this...
concat(reverse(sortByName), reverse(sortByAge))

// is the same as...
reverse(concat(sortByName, sortByAge))

与此类似concat表达方式——

// this...
concat(sortByYear, concat(sortByMonth, sortByDay))

// is the same as...
concat(concat(sortByYear, sortByMonth), sortByDay)

// is the same as...
nsort(sortByYear, sortByMonth, sortByDay)

多分类

因为我们的比较可以组合起来创建更复杂的比较,所以我们可以有效地按任意数量的因素进行排序。例如,对日期对象进行排序需要进行三个比较:year, month, and day。由于功能原理,我们的concat and empty做所有艰苦的工作-

const Comparison =
  { // ...
  , nsort: (...m) =>
      m.reduce(Comparison.concat, Comparison.empty)
  }

const { empty, map, reverse, nsort } =
  Comparison

const data =
  [ { year: 2020, month: 4, day: 5 }
  , { year: 2018, month: 1, day: 20 }
  , { year: 2019, month: 3, day: 14 }
  ]

const sortByDate =
  nsort
    ( map(empty, x => x.year)  // primary: sort by year
    , map(empty, x => x.month) // secondary: sort by month
    , map(empty, x => x.day)   // tertiary: sort by day
    )

现在我们可以排序year, month, day -

data.sort(sortByDate)
// [ { year: 2019, month: 11, day: 14 }
// , { year: 2020, month: 4, day: 3 }
// , { year: 2020, month: 4, day: 5 }
// ]

并且同样轻松地反向排序year, month, day -

data.sort(reverse(sortByDate))
// [ { year: 2020, month: 4, day: 5 }
// , { year: 2020, month: 4, day: 3 }
// , { year: 2019, month: 11, day: 14 }
// ]

要运行reverse and nsort示例,请按照原帖 https://stackoverflow.com/a/61049318/633183 ????


复杂排序

您当然正在寻找一个细致入微的分类器,但不用担心,我们的模块能够处理它 -

const { empty, map } =
  Comparison

const randParitionBy = (prop = "", m = new Map) =>
  map
    ( empty
    , ({ [prop]: value }) =>
        m.has(value)
          ? m.get(value)
          : ( m.set(value, Math.random())
            , m.get(value)
            )
    )

console.log(data)                               // presort...
console.log(data.sort(randParitionBy("group"))) // first...
console.log(data.sort(randParitionBy("group"))) // again...

输出 -

// pre-sort
[ {name:"Alice",group:"staff"}
, {name:"Monty",group:"client"}
, {name:"Cooper",group:"client"}
, {name:"Jason",group:"staff"}
, {name:"Farrah",group:"staff"}
, {name:"Celeste",group:"guest"}
, {name:"Briana",group:"staff"}
]

// first run (elements keep order, but sorted by groups, groups are sorted randomly)
[ {name:"Celeste",group:"guest"}
, {name:"Alice",group:"staff"}
, {name:"Jason",group:"staff"}
, {name:"Farrah",group:"staff"}
, {name:"Briana",group:"staff"}
, {name:"Monty",group:"client"}
, {name:"Cooper",group:"client"}
]

// second run (elements keep order and still sorted by groups, but groups are sorted differently)
[ {name:"Alice",group:"staff"}
, {name:"Jason",group:"staff"}
, {name:"Farrah",group:"staff"}
, {name:"Briana",group:"staff"}
, {name:"Monty",group:"client"}
, {name:"Cooper",group:"client"}
, {name:"Celeste",group:"guest"}
]
const Comparison =
  { empty: (a, b) =>
      a < b ? -1
        : a > b ? 1
          : 0
  , map: (m, f) =>
      (a, b) => m(f(a), f(b))
  }
  
const { empty, map } =
  Comparison

const data =
  [ { name: "Alice", group: "staff" }
  , { name: "Monty", group: "client" }
  , { name: "Cooper", group: "client" }
  , { name: "Jason", group: "staff" }
  , { name: "Farrah", group: "staff" }
  , { name: "Celeste", group: "guest" }
  , { name: "Briana", group: "staff" }
  ]

const randParitionBy = (prop = "", m = new Map) =>
  map
    ( empty
    , ({ [prop]: value }) =>
        m.has(value)
          ? m.get(value)
          : ( m.set(value, Math.random())
            , m.get(value)
            )
    )

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

Javascript:打乱数组中的对象组 的相关文章

  • HTML/VBA Click 事件未触发

    这是我第一次在 StackOverflow 上发布问题 到目前为止 我已经能够通过 VBA 帮助论坛解决我的大部分问题 我的问题很简单 我有一个自动数据拉取 我需要在其中导出数据 我过去曾在这方面取得过成功 但这次略有不同 我尝试单击以生成
  • 在 Go 中,如何将结构体转换为字节数组?

    我有一个我定义的结构实例 我想将其转换为字节数组 我尝试了 byte my struct 但这不起作用 另外 我还被指出二进制包 http golang org pkg encoding binary 但我不确定我应该使用哪个函数以及应该如
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • Node js 使用中间件重定向进行过多重定向

    在我的 Node js 应用程序 我使用的是express 4 x 中 我想检查用户是否已登录 如果用户未登录 我想重定向到我的登录页面 然后我在中间件中这样做 服务器 js app use function req res next if
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 按范围迭代数组

    我有一个数组 1 2 3 4 5 6 100 我希望将此数组迭代 5 次 具体来说 取数组的前 5 个数字并获取平均值 继续处理接下来的 5 个数字并获取平均值 依此类推 我尝试过多种方法 例如Dequeue和 for 循环但未能获得所需的
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐