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

最新推荐文章于 2024-11-18 12:10:44 发布
最新推荐文章于 2024-11-18 12:10:44 发布
阅读量158 收藏
点赞数 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]], [])
不断蜕变灬青春
关注
专栏目录
数组对象提取_复杂场景下的 typescript 类型锚定 （1） ----- 对象索引提取
weixin_33532301的博客
01-15 622
前言：在编写 typescript 应用的时候，有时候我们会希望复用或者构造一些特定结构的类型，这些类型只从 typescript 靠内建类型和 interface、class 比较难以表达，这时候我们就需要用到类型推导。keyof在 typescript 我们可以用 keyof 关键字来提取对象的索引标记.// obj 是一个对象, typeof 得到了其类型 keyof (typeof obj...
forEach如何修改原数组和sort排序经典场景
老司机的后备箱
05-27 1548
forEach() 介绍 forEach()方法需要一个回调函数（这种函数，是由我们创建但是不由我们调用的）作为参数 回调函数中传递三个参数： 第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组 代码举例： let myArr = ['王一', '王二', '王三']; myArr.forEach((item, index, arr) => { console.log('item:' + item); console.
【JS提升】ES6/ES7数组方法
小管打天下的博客
05-22 579
目录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 的数组新增常用方法
平安蜀黍的记事本
01-07 310
ES6 的数组新增常用方法 map(callback) 映射数组: 通过遍历的方式, 将原数组中每一个元素通过传入的回调函数处理后返回的值创建并返回一个新数组, map 方法不会对空数组进行检测, map 方法不会改变原数组 使用场景： map 是我们最常用到的一个数组方法, 没有之一。无论是在页面中的列表渲染还是对数组中的元素做一些计算, 都要用到它; /** * mapCallback * map方法用于对每一个数组元素做处理的回调函数 * @param {any} value 当前索
es6 队列_Javascript中常用数组方法总结（含es6）
weixin_33647940的博客
01-12 133
数组(Array)是javascript中非常重要的数据结构之一，在我们日常开发中能熟练使用数组的方法也是必须的，印象中数组的方法有很多，es5,es6也新增很多数组方法，今天就把这些零散的知识点都整理出来，和各位道友共同提高。数组中的每个元素对应一个索引(从0开始)，同时每个数组有自己的length属性(等于该数组的元素个数(0~2^32-1))，每个数组都指向Array构造函数的原型(Arra...
JavaScript 排序算法（ES6）
weixin_43762209的博客
03-01 1167
建议： 学习排序之前最好先看图解，这样可以更好的理解代码 本文中常使用 swap 函数，在这里提前列出来，以下就省略了。 function swap(arr, indexA, indexB) { //ES6 解构赋值 [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]]; } 冒泡排序 Bubble Sort （查看图解） 简...
ES6知识点：ES5数组的新方法，ES6中的变量、解构赋值、字符串、数组、includes、箭头函数以及对象
m0_46597922的博客
07-12 599
基本介绍 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法 javascript的诞生 1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做 Mosaic。这是人类历史上第一个浏览器，从
还在傻傻分不清ES5、Es6数组方法？各大姿势来袭
蛙人的博客
04-01 353
前言 初衷： 在面试中，面试官经常问到说一下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 192
一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。 对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和var是类似的，...
ES5+ES6
weixin_47450807的博客
05-01 567
1、es6中箭头函数 1、基本语法 ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子： // 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函数体 return `Hello ${name} !`; }; 可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了functi
js代码-打乱数组，随机产生一组重新排列的数组
07-16
- **Array.from()** 和 **Array.of()**：这两个静态方法可以用来从其他数据结构创建数组，有时在处理随机化数据时会用到。 - **ES6 的扩展运算符** (`...`)：可用于复制数组，也可以在打乱数组时结合使用，如`const ...
ES6面试题
秋城落叶的博客
04-25 4059
1.箭头函数中的this指向定义时当前周围的作用域； 2.如果使用标记模板字面量，第一个参数的值总是字符串的数组。其余的参数获取的是传递的表达式的值； 3. es6中和原型一样用来继承的class和继承是怎么实现的？ 贴上 class Point { // ... } typeof Point // "function"，类的数据类型就是函数 Point === Point.p...
(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数
zyz博客
11-14 1044
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
es6和es5的区别
Python私教
11-18 380
ECMAScript 6（ES6）和ECMAScript 5（ES5）是JavaScript语言的两个不同版本，ES6在2015年发布，引入了许多新特性和改进，旨在使JavaScript开发更加简洁、强大和易于维护。这些是ES6和ES5之间的一些主要区别。ES6的引入极大地丰富了JavaScript的功能，使得代码更加简洁、模块化和易于维护。随着现代浏览器和JavaScript运行环境对ES6特性的支持越来越广泛，ES6已经成为前端开发中不可或缺的一部分。
ES6进阶知识二
m0_64455070的博客
11-14 1185
本文详细阐述了Promise方法的应用实例、模板字符串的高级技巧、尾调用优化的原理、模块化进阶中的动态导入机制以及循环依赖的处理方法。
前端入门一之ES6--递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
weixin_74085818的博客
11-14 1047
大括号 量词符 重复次数中括号 字符集合 任选一小括号 优先级// 中括号// 大括号// 它只是让c 重复3次 abccc// 小括号//它是让 abc 重复3次在线测试正则表达式：https://c.runoob.com/一项脚本语言的标准。
网页作业9
小派蒙的博客
11-15 669
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 1154
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
阶乘递归javascript
最新发布
2401_83905000的博客
11-18 95
【代码】阶乘递归javascript。
js数组对象去重es6方法
08-12
在ES6中，可以使用Set数据结构来实现数组对象的去重。Set是一种集合数据结构，它只能存储唯一值，可以轻松去除重复项。下面是一种常见的方法： ```javascript const array = [ { id: 1, name: 'John' }, { id: 2,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不断蜕变灬青春

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

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

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

打赏作者

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

抵扣说明：

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

余额充值