遍历数组操作

在一步一步的学习中我们会发现在处理数据时所用到的方法随之增多
下面我真理一些数组操作:

数组操作

1、forEach
2、map
3、filter
4、reduce
5、every、some

传统的for循环与for...in、for...on在这里就不多做介绍了,有需要了解的可以自行百度
  • forEach
    -被传递给foreach的函数会在数组的每个元素上执行一次,元素作为参数传递给该函数
     /* 
      forEach可以用来替代for循环
      forEach不存在返回值
    */
    const arr = [1,2,3,4,5]
    /* 
      for (let i = 0;i < arr.length; i++){
      console.log(arr[i])
    } */

    console.log(arr.forEach((value, index, arr) => {
    console.log(value, index, arr)
  • map
/*
    arr.map((value, index, arr) => {
      return 返回值
    })
    返回值会变成一个新的数据作为arr.map的返回值
    map操作的返回值为一个数组
    
    map用来对已知数据进行数据筛选,得到一个新的类型的数组
*/
    /* const arr = [1, 2, 3, 4, 5, 6]
    console.log(arr.map((value, index, arr) => {
      // console.log(value, index, arr)
      return value + 10
    })) */
    const students = [
      {
        name: '张三',
        age: 18
      }, {
        name: '李四',
        age: 12
      }, {
        name: '王五',
        age: 14
      }, {
        name: '赵六',
        age: 16
      }
    // ["张三", '李四', '王五', '赵六']
      
    /* const newarr = []
    for(let i = 0; i < students.length; i++){
      newarr.push(students[i].name)
    } */

    // const newarr = students.map(student => student.name)
    const newarr = students.map(student => student.age)
    console.log(newarr)
  • filter
 /* 
      filter的作用是过滤
      将数组中符合条件的数据过滤出来形成一个新的数组

      arr.filter(() => {
        // 只要返回值为true,那么对应的遍历到的内容就会被添加到新的数组中

      })  
      arr.filter 最后返回的结果也是数组
      filter最终的结果还是原本的数组结构,只不过,数组中的值少了    */
    /* const arr = [1,2,3,4,5]
      
    const newarr = arr.filter(num => true)
    console.log(newarr) */
    const students = [
      {
        name: '张三',
        age: 18,
        sex: '男'
      }, {
        name: '李四',
        age: 12,
        sex: '女'        
      }, {
        name: '王五',
        age: 14,
        sex: '男'        
      }, {
        name: '赵六',
        age: 16,
        sex: '女'        
      }
    ]
    /* var arr = []
    for(var i = 0; i< students.length;i++){
      if(students[i].sex === "女"){
        arr.push(students[i])
      }
    } */

    // const arr = students.filter(student => student.sex === "女")
   /*  const arr = students.filter(function(student){
      return student.sex === "女"
    })
    console.log(arr) */

    const arr = students.filter(student => student.age >= 14)
    console.log(arr)//输出结果就是age>=14 学生信息
  • reduce
    every() 当数组中的每一个元素在callback上被返回true时就返回true(注意:要求每一个单元项都返回true时才为true)
/* 
      用于数组中内容的计算
     */
    const arr = [1,2,3,4,5]
    
    /* 
      reduce的回调函数中有四个
      num 
        在第一次遍历是reduce的第二个参数   
        之后的遍历是上一次执行回调时的返回值 
      value 遍历数组对应的数据
      index 下标
      arr 调用reduce方法的数组
     */
    /* const sum = arr.reduce((num, value, index, arr) => {
      console.log(num, value, index, arr)
      return 1
    }, 2) */

    /* const sum = arr.reduceRight((num, value) => {
      console.log(num, value)
      return num + value
    }, 0) */

    // const 

    // console.log(sum)
    const students = [
      {
        name: '张三',
        age: 18,
        sex: '男',
        score: 100
      }, {
        name: '李四',
        age: 12,
        sex: '女',
        score: 98          
      }, {
        name: '王五',
        age: 14,
        sex: '男',
        score: 67              
      }, {
        name: '赵六',
        age: 16,
        sex: '女',
        score: 89              
      }
    ]

    const sum = students.reduce((sumscore, student) => sumscore + student.score, 0)
    console.log(sum)

  • every、some
    every()与some()的区别是:前者要求所有元素都符合条件才返回true,后者要求只要有符合条件的就返回true
  /*
    some表示数组中只要有一个符合对应条件则返回true

    every表示数组中全局符合条件才返回true

    some和every调用后得到的都是布尔值
  */
 
    const arr = [1, 2, 3, 4, 5]
    // 判断数组中是否含有大于2的数字
    console.log(arr.some(num => num > 2))

    // 判断数组中的数字是否全部大于2
    console.log(arr.every(num => num > 2))

有兴趣的朋友可以浏览一下渣渣熊的博客

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,102评论 0 13
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,705评论 0 38
  • 如需转载, 请咨询作者, 并且注明出处.有任何问题, 可以关注我的微博: coderwhy, 或者添加我的微信: ...
    coderwhy阅读 17,499评论 17 133
  • 数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。 JavaScript...
    劼哥stone阅读 1,124评论 6 20
  • 你只管请求和谐、快乐、友爱的关系,宇宙会替你找到完美的另一半——无论他们是谁。
    琴语阅读 133评论 0 0