js数组两层遍历

已于 2022-11-23 12:45:17 修改
阅读量4.3k 收藏 1
点赞数
分类专栏： 网站前端 elementUI vue 文章标签： javascript vue.js 开发语言
于 2020-01-10 15:43:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/103925729
版权
网站前端 同时被 3 个专栏收录
75 篇文章 1 订阅
订阅专栏
vue
11 篇文章 0 订阅
订阅专栏
elementUI
9 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element-ui</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                unlockType: [{
                        code: "A",
                        name1: "APP开门"
                    },
                    {
                        code: "F",
                        name1: "人脸识别"
                    },
                    {
                        code: "P",
                        name1: "语音对讲"
                    },
                    {
                        code: "C",
                        name1: "刷卡开门"
                    },
                    {
                        code: "V",
                        name1: "APP对讲"
                    },
                    {
                        code: "S",
                        name1: "物业开门"
                    },
                    {
                        code: "R",
                        name1: "人证开门"
                    },
                    {
                        code: "B",
                        name1: "小程序开门"
                    },
                    {
                        code: "H",
                        name1: "海X小程序开门"
                    },
                    {
                        code: "W",
                        name1: "手环开门"
                    },
                    {
                        code: "T",
                        name1: "二维码开门"
                    }
                ],

                list: [{
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "APP开门",
                    unlockTypeId: "A",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "小程序开门",
                    unlockTypeId: "B",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "刷卡开门",
                    unlockTypeId: "C",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "人脸识别",
                    unlockTypeId: "F",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "海X小程序开门",
                    unlockTypeId: "H",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "语音对讲",
                    unlockTypeId: "P",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "人证开门",
                    unlockTypeId: "R",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "物业开门",
                    unlockTypeId: "S",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "二维码开门",
                    unlockTypeId: "T",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "APP对讲",
                    unlockTypeId: "V",

                }, {
                    num: 0,
                    fdate: "2020-01-04",
                    unlockType: "手环开门",
                    unlockTypeId: "W",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "APP开门",
                    unlockTypeId: "A",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "小程序开门",
                    unlockTypeId: "B",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "刷卡开门",
                    unlockTypeId: "C",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "人脸识别",
                    unlockTypeId: "F",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "海X小程序开门",
                    unlockTypeId: "H",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "语音对讲",
                    unlockTypeId: "P",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "人证开门",
                    unlockTypeId: "R",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "物业开门",
                    unlockTypeId: "S",

                }, {
                    num: 0,
                    fdate: "2020-01-05",
                    unlockType: "二维码开门",
                    unlockTypeId: "T",

                }],
                series: []
            },
            created() {
                //第一次遍历
                this.unlockType.forEach((item, index) => {
                    //先在数组中建几个对象
                    this.series.push({
                        date: [],
                        data: []
                    });
                    //遍历里再遍历
                    this.list.forEach(i => {
                        //将合适
                        if (item.code === i.unlockTypeId) {
                            this.series[index].date.push(i.fdate);
                            this.series[index].data.push(i.num)
                        }
                    })
                });
                console.log(this.series);
            }
        })
    </script>
</body>

</html>

弗兰克的天空
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
双指针法---将序列双层遍历问题优化为单层
Sakura_lht
01-31 449
1. 双指针算法介绍 1.1 什么是双指针法 狭义上的双指针法是指利用两个指针去遍历序列（通常为数组或字符串），一个放首，一个放尾，同时向中间遍历，直到两个指针碰撞，完成遍历。 0 1 2 3 4 5 6 i --> <-- j [x x x x x x x] i j [i = 0, j = 6] i j [i = 1, j = 6] i j
thinkPHP中多维数组的遍历方法
10-22
这个模板代码将生成一系列的复选框，其中外层循环遍历`$drug`数组的键和值，内层循环则遍历每个药品的`ch_name`和`en_name`。这样的结构使得在前端页面上能展示出完整的多维数组信息，并允许用户选择特定的药品。 ...
JavaScript的两种数组遍历
dancheng1的博客
08-07 327
沿着一定的顺序对数组内部的元素做一次切仅做一次访问，就是遍历。 for循环 遍历 for-in遍历 var color = ['red', 'blue', 'green']; color['jinse'] = 'gold'; color[10] = 'pink'; //1、for循环遍历，为了遍历效果更好，数组下标最好为0/1/2... for(v
前端JS使用双重遍历根据key对应value的形式对数组排序
m0_46577631的博客
11-18 423
【代码】前端JS使用双重遍历根据key对应value的形式对数组排序。
JS遍历数组的十种方法总结
大圣归来圣骑士清欢的博客
05-11 994
JS遍历数组的十种方法
js常用方法之双重数组对象去重
qq_45600228的博客
09-23 295
js常用方法之双重数组对象去重
两层for循环优化成一层for循环，时间复杂度直接降一个量级！
清晨qc的博客
04-30 2089
当存在两个嵌套的 for 循环时，时间复杂度将取决于循环嵌套的层数和循环内部执行的操作。如果内部操作的时间复杂度是 O(1)，则两个 for 循环的时间复杂度为 O(n^2)，其中 n 是集合中元素的数量。以下是两个list的嵌套循环，它计算了两个集合的笛卡尔积：
别再用双层遍历循环来做新旧数组对比，寻找新增元素了！
最新发布
RenGJ010617的博客
06-01 1596
这类问题的重点在于能不能突破基础思路，突破基础思路是从程序员入门变成中级甚至高级的第一步，如果所有需求都通过最基础的业务逻辑来做，是得不到成长的。
Javascript中二维数组的遍历
04-26
要遍历二维数组，我们可以使用两个嵌套的 `for` 循环。外层循环遍历每个元素，内层循环遍历每个元素的每个子元素。例如： ``` for (var i = 0; i ; i++) { var array32_TR = new Array(); array32_TR = array32[i]...
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
一：多层嵌套循环，二级数组遍历 小程序中的遍历循环类似于angularJS的遍历。 二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', ...
JS数组属性去重并校验重复数据
10-15
我们可以使用两层嵌套的`for`循环来完成这个任务。外层循环遍历主数组，内层循环则遍历子数组。如果在内层循环中找到相同的`identityid2`值（且索引不相等），则表示存在重复，此时可以弹出警告信息并返回`false`...
JavaScript数组去重的6个方法
10-20
本文将介绍6种不同的方法来实现JavaScript数组去重，这些方法适用于不同的场景和需求。 1. **基础方法（O(n^2)**： 这是最直观的方法，通过两层循环检查元素是否存在。首先，创建一个新的空数组`res`，然后遍历原...
两层数组广度优先数据遍历
weixin_30569033的博客
04-24 120
　　当需要轮训取多个分类数据的时候，每个分类一个数组，每个分类取一个再取下一个。 遍历方式总结如下： 　　 List<List<String>> list = new ArrayList<List<String>>(); int jLeng = 0; for (int i = 0; i < skuList.si...
通过js把一个数组修改成多层嵌套多个数组的几种方法
a13145211的博客
03-19 9082
1、首先一级与二级相同的嵌套 let arr = [ { date: '2020-01-06', age: '18'}, { date: '2020-01-06', age: '25'}, { date: '2020-01-07', age: '34'}, { date: '2020-01-07', age: '18'}, { date: '202...
Python遍历二重数组
lewis_zhou的博客
01-08 1112
if __name__ == '__main__': listM=[[1,2,3],[4,5,6],[7,8,9],['恭喜发财','一定暴富']] print(f'listM二重列表:{listM}') for i in listM: print (f'第{listM.index(i)+1}个:{i}',end=':') for j in i: print (j,end=' ') print() 最简单的遍.
javascript 方法
Ching_cl的博客
10-25 733
1.双重for循环: 1.双重for循环语法: for(var i=0;i<10;i++)//前面的for控制行 { for(var j=0;j<10;j++)//后面的for控制列{ 语句1; } } 语句2; 2.数组: 定义数组:2种方法 1.var arr
4、JS之双重循环跳转及数组
陈福国的博客
12-19 1972
1、什么是双重循环 双重循环就是一个循环体里面包含另外一个完整的循环，一个循环里面套着另外一个循环，即双重循环 2、双重循环语法结构 1、for的双重循环 语法： for(循环条件1){ 循环操作1； for(循环条件2){ 循环操作2 } } 循环条件1的for循环我们称之为外层循环，循环条件2的循环我们称为内层循环。 特点： 外层循环运行一次，内层循环循环一轮。 2、...
js中foreach嵌套遍历两个数组并输出
Afterwade的博客
10-21 9038
今天对接口的时候发现一个需求，需要将两个数组中的每一项拼凑在一起成为一条记录，然后再将每一条记录push进一个新数组，再发请求。之后用两个foreach嵌套遍历解决了这个需求 <script> let arrA=['1','2','3','4','5'] let arrB =['2020-10-1','2020-10-2','2020-10-3'] let arrC=[] arrA.forEach(item1=>{ arrB.forEach(
js遍历两数组找出不同的元素、相同元素以及数组去重的实现方法
自由&不束缚的博客
10-21 1168
// 取两数组中不同元素 /** * @description 原理:array为合并后的数组 indexof为从前往后查找，索引从0开始，lastIndexOf为从后往前查找，索引仍然从开始算起（仍然为0）这是关键 */ function handleDoubleArrayDifferenceParams(arr1,arr2){ return arr1.concat(arr2).filter((result,idx,array) => { return array.index.
js的map函数遍历多层数组
08-19
在JavaScript中，map函数可以用于遍历多层数组。当数组的元素也是数组时，可以使用嵌套的map函数来实现遍历。以下是一个示例代码： ``` const arr = [[1, 2], [3, 4], [5, 6]]; const result = arr.map(innerArr => { return innerArr.map(num => num * 2); }); console.log(result); ``` 在上述中，我们有一个包含多个内部数组的外部数组。通过使用map函数，我们可以遍历外部数组的每个内部数组。然后，对于每个内部数组，我们再次使用map函数来遍历其中的每个元素，并将其乘以2。最终，我们得到一个新的数组result，其中包含原始数组中每个元素的两倍值。 所以，通过嵌套的map函数，我们可以非常方便地遍历多层数组。这样可以在每个元素上执行自定义的操作，并返回一个新的数组作为结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [js用递归遍历多维数组_js面试题更新之40](https://blog.csdn.net/weixin_39634132/article/details/111050345)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [js用递归遍历多维数组_JS数组的遍历上 (含forEach等方法源码)](https://blog.csdn.net/weixin_39812577/article/details/110287876)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值