JavaScript中一个对象数组按照另一个数组排序
JavaScript中一个对象数组按照另一个数组排序
需求:排序
const arr1 = [33, 11, 55, 22, 66];const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}]- 数组arr2中每项都是一个对象,对象中age属性 === 数组arr1中的项
- 将arr2数组根据对象的age值在arr1中的位置排序, 排序后的结果为 `const arr2 = [ {age: 33},{age: 11}, {age: 55}, {age: 22}, {age: 66}]

步骤:
方法1(需求已知根据对象的age排序)
const arr1 = [33, 11, 55, 22, 66];
const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}] console.log('排序前arr2 => ', arr2) // 排序 arr2
arr2.sort((prev, next) => {
const p = arr1.indexOf(prev.age)
const n = arr1.indexOf(next.age)
return p - n
}) // 排序 arr2(简写)
arr2.sort((prev, next) => {
return arr1.indexOf(prev.age) - arr1.indexOf(next.age)
}) console.log('排序后arr2 => ', arr2)
console.log(' arr1 => ', arr1)

方法2 (需求未知需要根据对象的哪个属性排序)
const ageArr = [33, 11, 55, 22, 66];
const moneyArr = [5000, 3000, 6000, 2000, 9000]
const objArr = [
{age: 55, money: 6000},
{age: 22, money: 3000},
{age: 11, money: 2000},
{age: 66, money: 9000},
{age: 33, money: 5000}
] // 1. 将sort排序函数抽离出来
/**
* @description 数组sort方法的 sortby(规定排序顺序)
* @param {String} propName 属性名(数组排序基于的属性)
* @param {Array} referArr 参照数组(objArr数组排序的参照数组)
*/
const sortFunc = (propName, referArr) => {
return (prev, next) => {
return referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName])
}
} // 2. 排序objArr
objArr.sort(sortFunc('age', ageArr))
console.log('按age属性排序后的objArr\n', objArr) objArr.sort(sortFunc('money', moneyArr))
console.log('按money属性排序后的objArr\n', objArr)
JavaScript中一个对象数组按照另一个数组排序的更多相关文章
- JavaScript中的数组详解
JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...
- JavaScript中对数组和数组API的认识
JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...
- JavaScript中的数组创建
JavaScript中的数组创建 数组是一个包含了对象或原始类型的有序集合.很难想象一个不使用数组的程序会是什么样. 以下是几种操作数组的方式: 初始化数组并设置初始值 通过索引访问数组元素 添加新元 ...
- JavaScript中Array(数组) 对象
JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- Javascript中判断数组的正确姿势
在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...
- javascript中的数组扩展(一)
javascript中的数组扩展(一) 随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充. 一.数组的本质 数组是按照次序排 ...
- JavaScript中对数组的操作
原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式.如: .var arr = [12,3,5,8]; .var arr = new Ar ...
- JavaScript中一个对象如何继承另外一个对象
如题,JavaScript中一个对象a如何继承另外一个对象b.即将b中的属性和方法复制到a中去. 面试中遇到了这个问题,当时脑子里的想法是: 1.除了循环遍历复制,还能怎样 2.javascript中 ...
随机推荐
- (转)LSTM神经网络介绍
原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...
- Java 入土之路
概述 变量与数据类型 运算符与方法 面向对象 异常处理 包装类与常量池 集合框架 多线程 网络通讯协议 socket 编程-概念未发布 socket 编程-java环境未发布 web入门 Servle ...
- Spring基础——配置文件pom.xml,web.xml,ApplicationContext.xml
Spring配置文件——复制粘贴即用 为了以后兼容SSM框架,直接创建Maven Project,包结构如下图. pom.xml <project xmlns="http://mave ...
- MS16-072域内中间人攻击
0x01 漏洞利用 在目标主机域用户口令已知的条件下,目标主机在进行策略更新时,对域服务器的认证存在漏洞,攻击者劫持认证服务器的过程,引导至伪造的域服务器,并在域服务器中制定用户的计划任务策略,可以获 ...
- SQL Server之替换文本内容中的回车符和换行符
UPDATE 表 SET 栏位A = REPLACE(栏位A, CHAR(10), '') UPDATE表 SET 栏位A = REPLACE(栏位A, CHAR(13), '')
- OGG For Oracle To PostgreSQL
本文档描述OGG(Oracle goldengate)为Oracle同步到PostgreSQL数据库配置.在目前去“IOE”潮流.PostgreSQL确实是Oracle最好的替代品之一. 实验环境如下 ...
- [译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
- Springcloud 微服务 高并发(实战1):第1版秒杀
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列之15 [博客园总入口 ] 前言 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大家介绍三个版 ...
- django中使用pandas Django-pandas
在django中使用pandas操作django的ORM查询出来的QuerySet对象,可以使用插件django-pandas. 截止教程书写时间,django-pandas已发布到0.6.1. 依赖 ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...