数组的几种遍历方法(forEach，map，filter)

最新推荐文章于 2024-08-09 19:45:00 发布

小旋风01234

最新推荐文章于 2024-08-09 19:45:00 发布

阅读量581

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43217258/article/details/107625855

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

数组的几种遍历方法(forEach，map，filter)

forEach方法单纯遍历
map方法遍历数组元素，可以操作元素，返回新数组
filter方法，遍历筛选每一个数组，返回筛选元素后的数组

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组遍历方法</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <h2>{{arr}}</h2>
    <h2>{{arr2}}</h2>
    <button @click='dian'>点击</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      name: '小明',
      arr: [1, 2, 3, 3, 2, 1, 5],
      arr2: []
    },
    methods: {
      dian() {
        // forEach方法单纯遍历
        // this.arr.forEach(item => {
        //   console.log(item+1);
        // });
        
        // map方法遍历数组元素，可以操作元素，返回新数组
        // this.arr2=this.arr.map(item=>{
        //   console.log(item);
        //   return item+1
        // })

        // filter方法，遍历筛选每一个数组，返回筛选元素后的数组
        this.arr2=this.arr.filter(item=>{
          console.log(item);
          return item>2
        })
      }
    }
  })
</script>

</html>