1. 90前端首页
  2. 前端开发
  3. JavaScript

JavaScript数组遍历方法

1:关于map遍历写法:

list.map((item)=>{
    console.log(\'item\',item)
})
list.map((item)=>(
    console.log(\'item1\',item)
))

这两种都会输出item.但是你在里面写jsx的话.会有区别.

list.map((item)=>{
    <div>123</div>
})
list.map((item)=>(
    <div>456</div>
))

你会发现页面上只有456,没有123.且没有任何报错信息.
()与{}的区别是:()相当于直接return了.{}里面是需要自己写return的.
正确的写法应该是:

list.map((item)=>{
    return(
    <div>123</div>
    )
})
list.map((item)=>(
    <div>456</div>
))

这样才会输出123456.

2:关于查找,筛选元素的八种方法.

      第一种方法:find

JavaScript数组遍历方法

    const arr = [1,2,3,4,5,6,7]
    const y = arr.find( (item ,index) => item === 1);
    console.log(\'yyyyy\',y)

JavaScript数组遍历方法
find方法是返回通过函数内判断的数组的第一个元素的值。
比如我上面定义了一个数组arr,find方法里面的item就是数组的每一个元素,index就是数组的下标.item === 1 是判断当数组内元素等于1的时候返回元素所在的下标.
可以去判断item 对应的下标,也可以去判断下标对应的元素.
例:

    const arr = [1,2,3,4,5,6,7]
    const y = arr.find( (item ,index)=> index === 1);
    console.log(\'yyyyy\',y)

JavaScript数组遍历方法
输出的2就是下标为1的时候.数组里的元素.

第二种:findIndex

JavaScript数组遍历方法
和find方法有异曲同工之效.用于查找元素位置,参数与find一致.

第三种:filter

JavaScript数组遍历方法

    const arr = [1,1,3,4,1,6,7];
    const y = arr.filter( (item ,index)=> item === 1);
    console.log(\'yyyyy\',y)

JavaScript数组遍历方法

filter方法返回的是arr数组里面所有包含条件元素的一个新的数组,参数与find一致.

  第三种:forEach
    const arr = [1,2,3,4,1,6,7];
    arr.forEach( (item ,index)=> {
      console.log(\'yyyyy\',item)
    });

JavaScript数组遍历方法

第四种:for
    const arr = [1,2,3,4,1,6,7];
    for(let i = 0 ; i < arr.length ; i++ ){
      console.log(\'object\',arr[i])
    }

JavaScript数组遍历方法

 第五种:every
    const arr = [1,2,3,4,1,6,7];
    let i = arr.every(item => item)
    console.log(\'i\',i)

JavaScript数组遍历方法

every() 方法使用指定函数检测数组中的所有元素:

  • 如果数组中检测到有一个元素不满足,则整个表达式返回_false_,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。
 第六种:some
   const arr = [1,2,3,4,1,6,7];
   let i = arr.some(item => {
     return item > 0
   })
   console.log(\'i\',i)

JavaScript数组遍历方法

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回_true_, 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意:some方法与every方法相反.some是一个元素满足条件则返回true,every是一个不满足,整体返回false.

第七种:includes
    const arr = [1,2,3,4,1,6,7];
    let i = arr.includes(9)
    console.log(\'i\',i)

JavaScript数组遍历方法

includes方法返回的也是布尔值.用于判断数组里是否存在该元素.
它的参数只有两个,一个item,一个index.

第八种:indexOf
    const arr = [1,2,3,4,1,6,7];
    let i = arr.indexOf(9)
    let j = arr.indexOf(1)
    console.log(\'i\',i)
    console.log(\'j\',j)

JavaScript数组遍历方法
indexOf返回的是第一个元素所在下标.不存在则返回-1.

写给自己看的.有时候敲久了.一些小问题看不出来... 当自己看不出来的时候.不要急躁.过来看看自己踩过的坑打过的转.或者去给自己冲杯咖啡再来继续敲.保持更新~

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022058108

展开阅读全文

发表评论

登录后才能评论