js数组两层遍历

已于 2022-11-23 12:45:17 修改
阅读量4.4k 收藏 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
    评论
专栏目录
thinkPHP中多维数组的遍历方法
10-22
这个模板代码将生成一系列的复选框，其中外层循环遍历`$drug`数组的键和值，内层循环则遍历每个药品的`ch_name`和`en_name`。这样的结构使得在前端页面上能展示出完整的多维数组信息，并允许用户选择特定的药品。 ...
用js写一个双循环数组
weixin_35749796的博客
12-21 653
在 JavaScript 中，可以使用两层 for 循环来实现双重循环遍历数组。 下面是一个示例： // 定义一个二维数组 var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // 使用双重循环遍历数组 for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].leng...
JS数组遍历的几种方法 ​
xiaoweids的博客
05-16 126
这三类都是为了对数组进行一个操作，然后得到目标结果的数组方法，从功能和语义上来讲，和 forEach 有区别的，不建议混用，尤其是 map 和 forEach。但是也能对数组进行遍历，详细可参考MDN。`for ... in` 是用来遍历对象（plain object）的，也可以用来遍历数组，但不建议。注意：return 和 break 无法中断遍历。
别再用双层遍历循环来做新旧数组对比，寻找新增元素了！
最新发布
RenGJ010617的博客
06-01 1628
这类问题的重点在于能不能突破基础思路，突破基础思路是从程序员入门变成中级甚至高级的第一步，如果所有需求都通过最基础的业务逻辑来做，是得不到成长的。
js遍历两个数组找出不同的元素
风如也的博客
08-04 3659
前提：有两个数组，数组A和数组B，假设数组B是数组A的子集，遍历这两个数组，然后把数组B中缺少的数组A的元素添加到数组B中 如： 数组A： let arrA = [ { id: 1, data: [ {times: 6, type: 1}, {times: 23, type: 2}, {times: 6, type: 3} ] }, { id: 2, data: [ {times: 3, type: 1}, {times: 8, type: 3
遍历双层循环嵌套的数组--使用 ... 扩展运算符
weixin_45392559的博客
08-30 694
遍历双层循环嵌套的数组--使用 ... 扩展运算符
前端JS使用双重遍历根据key对应value的形式对数组排序
m0_46577631的博客
11-18 428
【代码】前端JS使用双重遍历根据key对应value的形式对数组排序。
js常用方法之双重数组对象去重
qq_45600228的博客
09-23 301
js常用方法之双重数组对象去重
Javascript中二维数组的遍历
04-26
要遍历二维数组，我们可以使用两个嵌套的 `for` 循环。外层循环遍历每个元素，内层循环遍历每个元素的每个子元素。例如： ``` for (var i = 0; i ; i++) { var array32_TR = new Array(); array32_TR = array32[i]...
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
10-22
在JavaScript中，遍历数组和对象是两种不同的操作，因为它们的数据结构和访问方式有所区别。数组是一种有序的元素集合，通常用于存储一系列数值或对象，而对象则是一种键值对的集合，常用于表示复杂的数据结构。 1....
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
一：多层嵌套循环，二级数组遍历 小程序中的遍历循环类似于angularJS的遍历。 二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', ...
使用vue中的v-for遍历二维数组的方法
08-27
在Vue.js中，`v-for`指令用于循环遍历数据，并在模板中渲染多次。当处理的数据结构是二维数组时，即数组中的每个元素也是一个数组，`v-for`的使用方式会稍微复杂一些。本篇文章将详细介绍如何在Vue中利用`v-for`遍历...
js sort排序双层数组
myl_0808的博客
03-04 1156
js可以使用sort函数进行排序操作，例如可以对[1,3,5,6,7]进行排序 arr.sort((a,b) => a-b); 那么可否对双重数组，并根据双重数组的首元素进行排序呢？答案是可以的，利用sort的回调即可 例如对arr = [[2,6],[1,3],[8,10],[9,18]]数组排序，可以这么写： arr = arr .sort((a,b)=> { return a[0] - b[0]; }); 排序结果为 [[1,3],[2,6],[8,10],[9
Vue+Element合并单元格
小火车况且况且况且的博客
01-18 2290
Vue+Element合并单元格 Element中的例子和说明 效果图 说明: 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。[1,2] 也可以返回...
php二维数组实例_PHP中使用foreach()遍历二维数组的简单实例
weixin_33438788的博客
03-08 413
第一种类型想用foreach()遍历整个二维数组：$team = array('lk','ok');$book = array('linux服务器配置与管理',$team);foreach($book as $k=>$val) //for $book each $value( as )echo $k.'=>'.$val.'';输出结果是：0=>linux服务器配置与管理1=&gt...
遍历数组的方法
qq_53598683的博客
01-21 2718
遍历数组 1、forEach(最简单、最常用的数组遍历方法) 把数组的每一项都罗列出来，并不能返回东西； var array = [1,2,3,4,5]; var res = array.forEach(function(item) { if(item == 1){ return item; } }) console.log(res);//undefined 迭代数组并且将当前元素和元素的index扔到一个函数中 var arr = ['a','b',
JavaScript数组去重多种方案，利用双重遍历 for、定义新数组对比、集合性质set、filter过滤函数，易懂易操作
qq_41046662的博客
03-05 1513
第一种方法：(基础到不能再基础的js,适合初学者) var arr=[1,5,7,3,2,1,5,4,8,6,1]; // 方式一 for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ ...
vue如何调用data双重数组的数据(双重for循环)
lplovewjm的博客
03-29 2561
本节主要讲解的的是用双重v-for调用data中双重数组的数据
JAVA——二维数组遍历二维数组的三种方法
weixin_61638178的博客
07-13 5213
java二维数组遍历的三种方法
js的map函数遍历多层数组
08-19
在JavaScript中，map函数可以用于遍历多层数组。当数组的元素也是数组时，可以使用嵌套的map函数来实现遍历。以下是一个示例代码： ``` const arr = [[1, 2], [3, 4], [5, 6]]; const result = arr.map(innerArr =...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值