vue数组遍历

1. forEach

2.filter

3. findIndex()

4.some()

  ①.语法: arr.some(fn[, thisArg])

参数fn是用来测试每个元素的函数,接受三个参数:

 item: 数组中正在处理的元素

     index: 数组中正在处理的元素的索引值

     array: 被调用的数组

thisArg:执行callback时使用的this值

②.描述

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

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。
• 注意： some() 不会对空数组进行检测。

• 注意： some() 不会改变原始数组。

③.实例

   检测数组中是否有元素大于18

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

// true

实例: 在vue的data中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能

<template>
  <div class="wrap">
     <label style="float: left;">
      搜索关键字：
      <input type="text" class="form-control" v-model="keyword">
    </label>
    <el-table
      :data="search(keyword)"
      size="small"
      :stripe="true"
      :border="true"
      @select="select"
      @select-all="select"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="网站名:" prop="name" width="200">
        <template slot-scope="slot">
          <a href="slot.row.url" target="_blank">{{ slot.row.name }}</a>
        </template>
      </el-table-column>
      <el-table-column label="网站" prop="url"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="国家" prop="country"></el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="slot">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="del(slot.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider content-position="left">表格操作</el-divider>
    <el-button
      @click="batchDelete"
      type="danger"
      icon="el-icon-delete"
      size="small"
      >批量删除</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      selections: [],
      urls: [
        {
          name: "新浪",
          url: "http://www.sina.com",
          type: "资讯",
          country: "中国",
        },
        {
          name: "腾讯",
          url: "http://www.tencent.com",
          type: "聊天",
          country: "中国",
        },
        {
          name: "谷歌",
          url: "http://www.google.com",
          type: "资讯",
          country: "美国",
        },
        {
          name: "韬睿",
          url: "http://www.5li-star.com",
          type: "教育",
          country: "中国",
        },
      ],
    };
  },
  methods: {
    del(row) {
      this.$confirm("确定要删除吗?", "删除").then((action) => {
        var index = this.urls.findIndex((item) => {
          if (item.name == row.name) {
            return true;
          }
        });
        this.urls.splice(index, 1);
      });
    },
    select(selections, row) {
      this.selections = selections;
    },
    batchDelete() {
      this.$confirm("确定要删除吗?", "删除")
        .then((action) => {
          for (var i = this.urls.length - 1; i >= 0; i--) {
            for (var j = this.selections.length - 1; j >= 0; j--) {
              if (this.urls[i].name == this.selections[j].name) {
                this.urls.splice(i, 1);
                break;
              }
            }
          }
        })
        .catch((error) => {
          alert(error);
          this.$message("删除取消");
        });
    },
    search(keyword) {
      return this.urls.filter((item) => {
        if (item.name.includes(keyword)) {
          return item;
        }
      });
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 90%;
  height: 100%;
}
</style>