JavaScript中遍历数组的方法

JavaScript中遍历数组的方法

在前端的日常工作中对数组的操作是无时不在的！下面的方法我都会以数组对象作为例子进行演示【为什么用数组对象作为例子，因为我们大部分做的table表格都是用数组对象加上循环弄出来的！比如我们熟知的elementUI的{el-table}】!

数组对象源文件

const arr = [
  {
    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:08:08',
    updateBy: null,
    updateTime: null,
    remark: '吃串串',
    params: {},
    id: '017660edbb0641998d5a0b0063f6df8a',
    companyName: '深圳好玩互动网络信息技术有限公司',
    registStatus: '存续',
    legalPerson: '刘琪',
    registCapital: '3000万元人民币',
    setupDate: '2016-08-30',
    approvalDate: '2018-10-19',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '13488666543',
    morePhoneNumber: '18616513453',
    organizationCode: 'MA5DK2LT-3',
    contributors: 58,
    organizationType: '有限责任公司',
    industryInvolved: '互联网和相关服务',
    address: '深圳市宝安区福永街道宝安大道6099号星港同创汇天枢座6楼',
    longitude: '113.805194',
    latitude: '22.671684',
    isVisit: '1',
    visitPerson: '初心',
    visitTime: '2021-09-02 10:16:19',
    visitResult: '是多少',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:19:08',
    updateBy: null,
    updateTime: null,
    remark: '啊实打实的',
    params: {},
    id: '96751741517e42148974ca1141503aac',
    companyName: '深圳市不见不散电子有限公司',
    registStatus: '存续',
    legalPerson: '廖敏慧',
    registCapital: '500万元人民币',
    setupDate: '2008-01-16',
    approvalDate: '2020-03-18',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '13823566179',
    morePhoneNumber: '0755-61181399；15989541871；13823561261；13659653170；0775-8663763；0755-29101982；13413157108',
    organizationCode: '67187152-8',
    contributors: 224,
    organizationType: '有限责任公司',
    industryInvolved: '制造业',
    address: '深圳市宝安区航城街道三围社区航空路32号同富裕工业园B栋1层、2层、3层、5层',
    longitude: '113.995050',
    latitude: '22.674335',
    isVisit: '1',
    visitPerson: 'erhuo',
    visitTime: '2021-09-02 11:11:53',
    visitResult: '萨达萨达a',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:19:31',
    updateBy: null,
    updateTime: null,
    remark: 'zxcczxczcx',
    params: {},
    id: '9899fc35507e41e487054282d21cf5e4',
    companyName: '深圳市致翰达科技有限公司',
    registStatus: '存续',
    legalPerson: '朱志平',
    registCapital: '100万元人民币',
    setupDate: '2013-10-31',
    approvalDate: '2020-04-27',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '13570092650',
    morePhoneNumber: '13823143380；17722675310；0755-82737345；18938672380',
    organizationCode: '08247652-X',
    contributors: 126,
    organizationType: '有限责任公司',
    industryInvolved: '信息传输、软件和信息技术服务业',
    address: '深圳市宝安区航城街道三围社区航城大道176号华创达科技园E座301',
    longitude: '113.833879',
    latitude: '22.601521',
    isVisit: '1',
    visitPerson: 'lvhanghmm',
    visitTime: '2021-09-02 11:13:20',
    visitResult: 'z\'x\'c\'z\'x\'cz\'x',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:20:13',
    updateBy: null,
    updateTime: null,
    remark: '啊实打实的',
    params: {},
    id: 'a12cf7f400b04935890b52c519304b77',
    companyName: '深圳品网科技有限公司',
    registStatus: '存续',
    legalPerson: '唐华',
    registCapital: '1000万元人民币',
    setupDate: '2010-03-12',
    approvalDate: '2021-03-30',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '0755-2954602',
    morePhoneNumber: '0755-85259260；13510406471',
    organizationCode: '55210558-0',
    contributors: 110,
    organizationType: '有限责任公司(自然人独资)',
    industryInvolved: '批发业',
    address: '深圳市宝安区西乡街道盐田社区银田工业区侨鸿盛文化创意园写字楼A栋四层北侧(在深圳市宝安区航城街道鹤洲社区洲石路739号恒丰工业城C5栋8层设有经营场所从事生产经营活动)',
    longitude: '113.862310',
    latitude: '22.586673',
    isVisit: '1',
    visitPerson: 'admin',
    visitTime: '2021-09-02 11:11:11',
    visitResult: '撒啊是大',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:26:16',
    updateBy: null,
    updateTime: null,
    remark: '联系不上管理员，进不去',
    params: {},
    id: 'b57dff12e44f4f14b8165bf026b922e4',
    companyName: '深圳市牧泰莱电路技术有限公司',
    registStatus: '存续',
    legalPerson: '陈兴农',
    registCapital: '900万元人民币',
    setupDate: '2005-06-27',
    approvalDate: '2021-05-19',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '0755-33934688',
    morePhoneNumber: '13760487822',
    organizationCode: '77715847-2',
    contributors: 411,
    organizationType: '有限责任公司(法人独资)',
    industryInvolved: '计算机、通信和其他电子设备制造业',
    address: '深圳市宝安区福永街道桥塘路福源工业区第六幢',
    longitude: '113.808065',
    latitude: '22.697496',
    isVisit: '1',
    visitPerson: '盘福喜',
    visitTime: '2021-09-03 10:38:53',
    visitResult: '无效客户',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:10:51',
    updateBy: null,
    updateTime: null,
    remark: 'sdfasdf',
    params: {},
    id: 'b701f63931fa40bcb66c51b92e5b22cf',
    companyName: '深圳插画师创意有限公司',
    registStatus: '存续',
    legalPerson: '杨蕙桢',
    registCapital: '500万元人民币',
    setupDate: '2015-11-26',
    approvalDate: '2019-12-11',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '前湾一路',
    phoneNumber: '0755-85295066',
    morePhoneNumber: '18316723836；0755-27211574；0755-85244082；18565678986',
    organizationCode: '35447783-4',
    contributors: 54,
    organizationType: '有限责任公司(台港澳自然人独资)',
    industryInvolved: '软件和信息技术服务业',
    address: '深圳市前海深港合作区前湾一路1号A栋201室(入驻深圳市前海商务秘书有限公司)经营场所:深圳市宝安区航城街道固戍开发区泰华梧桐工业园10B号建筑6层',
    longitude: '113.903417',
    latitude: '22.515046',
    isVisit: '1',
    visitPerson: 'admin',
    visitTime: '2021-09-02 10:13:58',
    visitResult: 'asdfsad',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:19:23',
    updateBy: null,
    updateTime: null,
    remark: '在大城市的自行车',
    params: {},
    id: 'db11cdbc4bc84328b8acaaa8a966dceb',
    companyName: '深圳市深美通电子有限公司',
    registStatus: '存续',
    legalPerson: '杨志科',
    registCapital: '300万元人民币',
    setupDate: '2006-09-19',
    approvalDate: '2020-06-05',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '13699096115',
    morePhoneNumber: '0755-85223911；13713893518',
    organizationCode: '79386771-1',
    contributors: 110,
    organizationType: '有限责任公司',
    industryInvolved: '批发业',
    address: '深圳市宝安区航城街道黄田社区东望洋工业区3号厂房4栋2层',
    longitude: '113.845198',
    latitude: '22.632833',
    isVisit: '1',
    visitPerson: 'admin',
    visitTime: '2021-09-02 11:41:43',
    visitResult: '都在发生的',
    isStart: '0',
    isManual: '0'

  },
  {

    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:16:38',
    updateBy: null,
    updateTime: null,
    remark: '自行车自行车',
    params: {},
    id: 'e50a1c77bb984499abb45dd2f9bb4c23',
    companyName: '四川威振保安服务有限公司深圳分公司',
    registStatus: '存续',
    legalPerson: '李强',
    registCapital: '-',
    setupDate: '2014-04-22',
    approvalDate: '2017-09-30',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '13928443338',
    morePhoneNumber: '-',
    organizationCode: '30599600-5',
    contributors: 83,
    organizationType: '有限责任公司分公司',
    industryInvolved: '其他服务业',
    address: '深圳市宝安区航城街道广深公路黄田路段金达花园7栋101A',
    longitude: '113.836481',
    latitude: '22.635359',
    isVisit: '1',
    visitPerson: 'lvhanghmm',
    visitTime: '2021-09-02 11:13:09',
    visitResult: '自行车自行车',
    isStart: '0',
    isManual: '0'

  },
  {
    searchValue: null,
    createBy: null,
    createTime: '2021-08-11 10:16:00',
    updateBy: null,
    updateTime: null,
    remark: '啊实打实',
    params: {},
    id: 'f5c009581a654d9f88bcc67272f64397',
    companyName: '深圳市特明照明技术有限公司',
    registStatus: '存续',
    legalPerson: '马颜华',
    registCapital: '50万元人民币',
    setupDate: '2013-07-01',
    approvalDate: '2020-11-17',
    province: '广东',
    city: '深圳市',
    county: '宝安区',
    street: '[]',
    phoneNumber: '0755-28173385',
    morePhoneNumber: '13164730256；0755-27894095；0755-26837230',
    organizationCode: '07251278-5',
    contributors: 98,
    organizationType: '有限责任公司',
    industryInvolved: '制造业',
    address: '深圳市宝安区航城街道鹤洲社区鹤洲南片工业区2层(2-3号阳光工业园A栋厂房B段)',
    longitude: '113.860620',
    latitude: '22.621041',
    isVisit: '1',
    visitPerson: 'erhuo',
    visitTime: '2021-09-02 11:12:02',
    visitResult: '啊实打实的',
    isStart: '0',
    isManual: '0'

  }
]

1、for 循环遍历

const arr = require('./testF1')
const res = arr.arr
console.log(res)

for (let i = 0; i < res.length; i++) {
  console.log(res[i].companyName)
}

2、forEach 遍历

const arr = require('./testF1')
const res = arr.arr
console.log(res)
//
// for (let i = 0; i < res.length; i++) {
//   console.log(res[i].companyName)
// }

res.forEach((item, index, array) => {
  // index 是索引 array 是原数组
  console.log(item.address)
})

3、map 遍历

// map 遍历
res.map((item, index, array) => {
  console.log(item.id)
})

4、for...of 遍历

// for of 循环
for (let item of res) {
  console.log(item.city)
}

5、filter 遍历

// filter 遍历
res.filter(item => {
    console.log(item.approvalDate)
})

6、some 遍历

// some 遍历
res.some( function( item, index, array ){
  console.log(item.industryInvolved)
})

7、keys，values，entries

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let item of res.values()) {
  console.log(item.address)
}