场景问题（主要用到数组对象的es6的方法），只供参考，实际该场景sort更加合适

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量126 收藏
点赞数 1
分类专栏： 遇到的问题 文章标签： es6 javascript 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B1841630/article/details/132831882
版权

场景问题

假设有这个一个数组，数组不是按顺序排列的，数组的每一项都有一个type字段表示该条数据的类型

  • // type表示类型
// 例如 1代表日任务，2代表周任务，3代表月任务
const orignList = [
    { name: "1类型下的任务项...", type: 1 },
    { name: "3类型下的任务项...", type: 3 },
    { name: "3类型下的任务项...", type: 3 },
    { name: "2类型下的任务项...", type: 2 },
    { name: "1类型下的任务项...", type: 1 },
    { name: "2类型下的任务项...", type: 2 },
    { name: "1类型下的任务项...", type: 1 },
    { name: "1类型下的任务项...", type: 1 },
    { name: "1类型下的任务项...", type: 1 },
    { name: "2类型下的任务项...", type: 2 },
    { name: "2类型下的任务项...", type: 2 },
    { name: "3类型下的任务项...", type: 3 },
    { name: "3类型下的任务项...", type: 3 },
    { name: "2类型下的任务项...", type: 2 },
    { name: "3类型下的任务项...", type: 3 },
]

现在需要对这些任务进行归类整合，将同一类型的数据整合到一起，并且按type从大到小排序，也就是处理成如下结果

  • 当时脑子瓦特了，其实直接使用sort排序就行了，下面强行使用了一堆方法处理，就当一些方法的应用实例了，望周知！！

  • // type表示类型
// 例如 1代表日任务，2代表周任务，3代表月任务
const finalList = [
    { "name": "3类型下的任务项...", "type": 3 },
    { "name": "3类型下的任务项...", "type": 3 },
    { "name": "3类型下的任务项...", "type": 3 },
    { "name": "3类型下的任务项...", "type": 3 },
    { "name": "3类型下的任务项...", "type": 3 },
    { "name": "3类型下的任务项...", "type": 2 },
    { "name": "3类型下的任务项...", "type": 2 },
    { "name": "3类型下的任务项...", "type": 2 },
    { "name": "3类型下的任务项...", "type": 2 },
    { "name": "3类型下的任务项...", "type": 2 },
    { "name": "3类型下的任务项...", "type": 1 },
    { "name": "3类型下的任务项...", "type": 1 },
    { "name": "3类型下的任务项...", "type": 1 },
    { "name": "3类型下的任务项...", "type": 1 },
    { "name": "3类型下的任务项...", "type": 1 },
]

解决方案

  • 先对数据进行按type分类

  • let orignObj = {} // 创建一个空对象
orignList.forEach(item => {
    if (Object.keys(orignObj).includes(item.type + '')) {
        // 如果orignObj存在属性名为当前遍历项type的属性，就直接追加数据
        // 注意：因为type是数字，但Object.keys得到的数组每一项都是字符串，需要将遍历项的type转换成字符串，否则匹配失败
        orignObj[item.type].push(item)
    } else {
        // 否则就是第一次添加该属性，做初始操作
        orignObj[item.type] = [item]
    }
})

  • 最终整理成了如下结构

  • {
    "1": [
        { "name": "3类型下的任务项...", "type": 1 },
        { "name": "3类型下的任务项...", "type": 1 },
        { "name": "3类型下的任务项...", "type": 1 },
        { "name": "3类型下的任务项...", "type": 1 },
        { "name": "3类型下的任务项...", "type": 1 },
    ],
    "2": [
        { "name": "3类型下的任务项...", "type": 2 },
        { "name": "3类型下的任务项...", "type": 2 },
        { "name": "3类型下的任务项...", "type": 2 },
        { "name": "3类型下的任务项...", "type": 2 },
        { "name": "3类型下的任务项...", "type": 2 },
    ],
    "3": [
        { "name": "3类型下的任务项...", "type": 3 },
        { "name": "3类型下的任务项...", "type": 3 },
        { "name": "3类型下的任务项...", "type": 3 },
        { "name": "3类型下的任务项...", "type": 3 },
        { "name": "3类型下的任务项...", "type": 3 },
    ]
}

  • 再对数据进行按照属性名降序排序

  • 使用了Object.entries方法

  • let temptArr = Object.entries(taskObj) // 转化成数组，数组每一项第一项都是属性名, 第二项是对应的属性值
temptArr.sort((a, b) => b[0] - a[0]) // 按照第一项也就输属性名进行排序

  • 得到以下数据

  • [
    [
        "3",
        [
            {
                "name": "3类型下的任务项...",
                "type": 3
            },
            {
                "name": "3类型下的任务项...",
                "type": 3
            },
            {
                "name": "3类型下的任务项...",
                "type": 3
            },
            {
                "name": "3类型下的任务项...",
                "type": 3
            },
            {
                "name": "3类型下的任务项...",
                "type": 3
            }
        ]
    ],
    [
        "2",
        [
            {
                "name": "2类型下的任务项...",
                "type": 2
            },
            {
                "name": "2类型下的任务项...",
                "type": 2
            },
            {
                "name": "2类型下的任务项...",
                "type": 2
            },
            {
                "name": "2类型下的任务项...",
                "type": 2
            },
            {
                "name": "2类型下的任务项...",
                "type": 2
            }
        ]
    ],
    [
        "1",
        [
            {
                "name": "1类型下的任务项...",
                "type": 1
            },
            {
                "name": "1类型下的任务项...",
                "type": 1
            },
            {
                "name": "1类型下的任务项...",
                "type": 1
            },
            {
                "name": "1类型下的任务项...",
                "type": 1
            },
            {
                "name": "1类型下的任务项...",
                "type": 1
            }
        ]
    ]
]

  • 之后遍历该处理的数组得到最后的处理结果

  • let finalArr = temptArr.reduce((prev, curr) => [...prev, ...curr[1]], [])

  • 这里本来想着用Object.fromEntries() 方法去将排序的数据还原回对象的，但还原的数据没有按照属性名进行排序，回到了之前的数据，因此行不通，于是想到了遍历Object.entries()处理的数组进行解决

用到的方法

Object.keys(obj)

  • 参数：要处理的对象

  • 返回值：返回该处理对象的属性名数组

  • 例如

  • // 对象方法
const a = {
    name: '小kun',
    age: 2.5,
    hobby: ['唱', '跳', 'rap', '篮球']
}

const b = [1, 2, 3]

const c = '爱你孤身走暗巷'

console.log('a.keys', Object.keys(a)) // a.keys (3) ['name', 'age', 'hobby']
console.log('a.values', Object.values(a)) // ["小kun",2.5,["唱","跳","rap","篮球"]]

console.log('b.keys', Object.keys(b)) // 返回索引 b.keys (3) ['0', '1', '2']
console.log('b.values', Object.values(b)) // 返回每一项的值 b.values (3) [1, 2, 3]

console.log('c.keys', Object.keys(c)) // 返回索引 c.keys (7) ['0', '1', '2', '3', '4', '5', '6']
console.log('c.values', Object.values(c)) // 返回每一项的值 c.values (7) ['爱', '你', '孤', '身', '走', '暗', '巷']

// Object.values(obj) 和Object.keys(obj)类似，参数是处理对象，返回该对象属性值所组成的数组
Object.entries(obj)

  • 参数：要处理的对象

  • 返回值：处理的对象自身可枚举属性的键值对数组

    • 通俗来说就是：返回值是一个数组，数组每一项是一个数组，每一项的第一项是对象的key, 第二项是对象的value

  • 例如

  • const a = {
    name: '小kun',
    age: 2.5,
    hobby: ['唱', '跳', 'rap', '篮球']
}
const b = [1, 2, 3]
const c = '爱你孤身走暗巷'

console.log('a.entries', Object.entries(a)) 
/*
	[
	    [ "name", "小kun" ],
    	[ "age", 2.5 ],
    	[ "hobby", [ "唱", "跳", "rap", "篮球" ] ]
	]
*/
console.log('b.entries', Object.entries(b))

/*
	[
	    [ "0", 1 ],
    	[ "1", 2 ],
    	[ "2", 3 ]
	]
*/
console.log('c.entries', Object.entries(c));
/*
	[
    	[ "0", "爱" ],
    	[ "1", "你" ],
    	[ "2", "孤" ],
    	[ "3", "身" ],
    	[ "4", "走" ],
    	[ "5", "暗" ],
    	[ "6", "巷" ]
	]
*/
Object.fromEntries(obj)

  • 和Object.entries(obj)相对应

  • 参数：要处理的数组（数组每一项是数组，每一项第一项是属性名，第二项是属性值）

  • 返回值：返回一个对象

Array.reduce(fn)
// prev 上一次调用回调时的返回值，或者初始值 init;
// cur 当前处理的数组元素 ，类似于forEach, map之类的item
// index 当前遍历项的索引
// arr 代表arr数组
arr.reduce((prev,cur,index,arr) => {
    ...
}, init);
1. 求和
let arr = [1, 2, 3, 4]

// 未指定初始值
let sum = arr.reduce((prev, cur) => {
    return prev + cur
}) // 10

// 指定了初始值
let sum = arr.reduce((prev, cur) => {
    return prev + cur
}, 10) // 20
2.求最大值
let max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
}); // 4
3.去重
  • 思路
    • 初始是空数组
    • 遍历每一项
    • prev中存在该项就保持prev不变
    • 否则就将当前遍历项添加到prev中
    • 遍历结束后prev就是最终去重的数组
    • 也就是reduce的返回值
const arr1 = [1, 2, 3, 4, 2, 1, 5]
const newArr = arr.reduce((prev, cur) => prev.indexOf(cur) ? [...prev, cur] : prev, []) 
console.log(newArr); // [1, 2, 3, 4, 5]
4.数组合并

  • 上面用到的就是数组合并的方法

  • 初始空数组

  • 每遍历一项就将该项数据合并到prev数组中，最终得到合并后的数组

  • let finalArr = temptArr.reduce((prev, curr) => [...prev, ...curr[1]], [])
不断蜕变灬青春
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
forEach如何修改原数组和sort排序经典场景
老司机的后备箱
05-27 1490
forEach() 介绍 forEach()方法需要一个回调函数（这种函数，是由我们创建但是不由我们调用的）作为参数 回调函数中传递三个参数： 第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组 代码举例： let myArr = ['王一', '王二', '王三']; myArr.forEach((item, index, arr) => { console.log('item:' + item); console.
ES6知识点：ES5数组的新方法，ES6中的变量、解构赋值、字符串、数组、includes、箭头函数以及对象
m0_46597922的博客
07-12 552
基本介绍 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法 javascript的诞生 1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做 Mosaic。这是人类历史上第一个浏览器，从
ES6 的数组新增常用方法
平安蜀黍的记事本
01-07 277
ES6 的数组新增常用方法 map(callback) 映射数组: 通过遍历的方式, 将原数组中每一个元素通过传入的回调函数处理后返回的值创建并返回一个新数组, map 方法不会对空数组进行检测, map 方法不会改变原数组 使用场景： map 是我们最常用到的一个数组方法, 没有之一。无论是在页面中的列表渲染还是对数组中的元素做一些计算, 都要用到它; /** * mapCallback * map方法用于对每一个数组元素做处理的回调函数 * @param {any} value 当前索
【JS提升】ES6/ES7数组方法
小管打天下的博客
05-22 504
目录1. JavaScript内置对象方法：1.1. Array.prototype.copyWithin（ES2015 ES6）概念写法描述拷贝对象/数组位移重写1.2. generator与iterator（ES2015 ES6）铺垫概念写法迭代器实现1.3. Array.prototype.entries（ES2015 ES6）概念写法迭代对象实现next运行实现二维数组排序1.4. Array.prototype.fill（ES2015 ES6）概念写法描述创建类数组方法重写1.5. Array.p
es6 队列_Javascript中常用数组方法总结（含es6）
weixin_33647940的博客
01-12 118
数组(Array)是javascript中非常重要的数据结构之一，在我们日常开发中能熟练使用数组的方法也是必须的，印象中数组的方法有很多，es5,es6也新增很多数组方法，今天就把这些零散的知识点都整理出来，和各位道友共同提高。数组中的每个元素对应一个索引(从0开始)，同时每个数组有自己的length属性(等于该数组的元素个数(0~2^32-1))，每个数组都指向Array构造函数的原型(Arra...
JavaScript 排序算法（ES6）
weixin_43762209的博客
03-01 1063
建议： 学习排序之前最好先看图解，这样可以更好的理解代码 本文中常使用 swap 函数，在这里提前列出来，以下就省略了。 function swap(arr, indexA, indexB) { //ES6 解构赋值 [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]]; } 冒泡排序 Bubble Sort （查看图解） 简...
还在傻傻分不清ES5、Es6数组方法？各大姿势来袭
蛙人的博客
04-01 307
前言 初衷： 在面试中，面试官经常问到说一下Es5和Es6的数组方法有哪些，有很多同学老是分不清楚，今天笔者就来分享一下。 适合人群： 前端初级开发 Es5系列 indexOf 用途： 用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1 let list = [1, 2, 3]; console.log(list.indexOf(2)) // 1 console.log(list.indexOf("蛙人")) // -1 map 用途： map是一个数组函数方法，接收三个参数，val
ES6笔记──工作中常用到的ES6语法
chaopingyao的博客
03-11 170
一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。 对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和var是类似的，...
工作中常用到的ES6语法
qq_38187583的博客
09-06 219
一、let和const   在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。 对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和...
浅谈ES6新增的数组方法和对象
08-29
下面小编就为大家带来一篇浅谈ES6新增的数组方法和对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript类数组对象转换为数组对象的方法实例分析
12-04
数组对象Array有很多方法：shift、unshift、splice、slice、concat、reverse、sort，ES6又新增了一些方法：forEach、isArray、indexOf、lastIndexOf、every、some、map、filter、reduce等。由于类数组不具有数组所...
JavaScript常用数组操作方法,包含ES6方法
12-10
该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] console.log(arr3); //[1, 2, 3, 4, 5] 二、...
es6 filter() 数组过滤方法总结
10-17
主要介绍了es6 filter() 数组过滤方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ES6+新特性
qq_37004501的博客
05-16 192
在原字符串填充指定的填充字符串直到目标长度所形成的新字符串，例子。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
js数组对象去重es6方法
08-12
在ES6中，可以使用Set数据结构来实现数组对象的去重。Set是一种集合数据结构，它只能存储唯一值，可以轻松去除重复项。下面是一种常见的方法： ```javascript const array = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 1, name: 'John' }, { id: 3, name: 'Bob' } ]; const uniqueArray = Array.from(new Set(array.map(JSON.stringify)), JSON.parse); ``` 上述代码中，我们首先使用`map`方法将数组中的对象转换为字符串，然后将这些字符串作为元素创建一个新的Set对象。这样，Set会自动去除重复项。最后，我们通过`Array.from`方法将Set对象转换回数组，并使用`JSON.parse`将字符串转换回对象。 现在，`uniqueArray`就是去重后的数组对象。 请注意，这种方法可能会导致对象顺序发生变化，因为Set对象不保持原始顺序。如果需要保持原始顺序，可以使用其他方法来实现去重，例如遍历数组对象并手动比较属性值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不断蜕变灬青春

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值