数据结构学习笔记-Set的封装及项目中的应用

bysun
101 阅读1分钟

Set封装

function Set() {
    // 属性
    this.items = {};
}

是否有该元素

Set.prototype.has = function (value) {
    return this.items.hasOwnProperty(value);
}

添加元素

Set.prototype.add = function (value) {
    if (this.has(value)) return false; // 有则不添加
    this.items[value] = value;
    return true;
}

删除

Set.prototype.remove = function (value) {
    if (!this.has(value)) return false; // 没有则不删除
    delete this.items[value];
    return true;
}

清空

Set.prototype.clear = function () {
    this.items = {};
}

长度

Set.prototype.size = function () {
    return Object.keys(this.items).length;
}

转数组

Set.prototype.values = function () {
    return Object.keys(this.items);
}

并集

 Set.prototype.union = function (otherSet) {
    // this   集合A
    // otherSet  集合B
    let unionSet = new Set(); // 创建新的集合
    let values = this.values();
    for (let i = 0; i < values.length; i++) {
        unionSet.add(values[i]); //A集合添加到unionSet
    }
    values = otherSet.values();
    for (let i = 0; i < values.length; i++) {
        unionSet.add(values[i]); //B集合添加到unionSet
    }
    return unionSet;
}

交集

Set.prototype.interSection = function (otherSet) {
    // this   集合A
    // otherSet  集合B
    let interSection = new Set(); // 创建新的集合
    let values = this.values();
    for (let i = 0; i < values.length; i++) {
        if (otherSet.has(values[i])) {
            interSection.add(values[i]); // 相同的元素添加到interSection
        }
    }
    return interSection;
}

差集

Set.prototype.difference = function (otherSet) {
    // this   集合A
    // otherSet  集合B
    let differenceSet = new Set(); // 创建新的集合
    let values = this.values();
    for (let i = 0; i < values.length; i++) {
        if (!otherSet.has(values[i])) {
            differenceSet.add(values[i]); // 不同的元素添加到interSection
        }
    }
    return differenceSet;
}

子集

Set.prototype.subSet = function (otherSet) {
    // this   集合A
    // otherSet  集合B
    let values = this.values();
    for (let i = 0; i < values.length; i++) {
        if (!otherSet.has(values[i])) { // 没有找到直接false，说明不是子集
            return false;
        }
    }
    return true;
}

 // =============================================================================================
        let setA = new Set();
        setA.add(11);
        setA.add(12);
        setA.add(13);
        setA.add(14);

        let setB = new Set();
        setB.add(11);
        setB.add(122);
        setB.add(133);
        setB.add(144);

        let arr = setA.union(setB);
        console.log(arr.values()) // ['11', '12', '13', '14', '122', '133', '144']

        // ==============================================================================================

        let setC = new Set();
        setC.add(1);
        setC.add(2);
        setC.add(3);
        setC.add(4);

        let setD = new Set();
        setD.add(11);
        setD.add(12);
        setD.add(1);
        setD.add(3);

        let list = setC.interSection(setD);
        console.log(list.values()) // ['1', '3']

        let list1 = setC.difference(setD);
        console.log(list1.values()) // ['2', '4']
        // ==============================================================================================

        let setE = new Set();
        setE.add(1);
        setE.add(2);
        setE.add(3);
        setE.add(4);

        let setF = new Set();
        setF.add(1);
        setF.add(36);
        let flag = setE.subSet(setF);
        console.log(flag) // false

        // ==============================================================================================

项目中的应用

<!--  -->
<template>
  <div class="home-page">
    <div class="btn-search-box">
      <div class="btn-box">
        <el-button type="primary" v-if="startAbled">启动</el-button>
        <el-button type="primary" v-if="stopAbled">停止</el-button>
        <el-button type="primary" v-if="initAbled">初始化</el-button>
        <el-button type="primary" v-if="editAbled">编辑</el-button>
        <el-button type="primary" v-if="detAbled">删除</el-button>
      </div>
      <div class="search-box">
        <el-input v-model="inputVal" placeholder="请输入数字状态">
          <i
            class="el-icon-close el-input__icon"
            slot="suffix"
            v-if="inputVal"
            @click="delInputVal"
          ></i>
          <i
            class="el-icon-search el-input__icon"
            slot="suffix"
            @click="searchStatus"
          ></i>
        </el-input>
      </div>
    </div>
    <div class="table-page-box">
      <div class="table-box">
        <el-table
          border
          ref="multipleTable"
          :data="viewData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="enStatus" label="中文状态"> </el-table-column>
          <el-table-column prop="status" label="数字状态" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>

      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      detAbled: false,
      startAbled: false,
      stopAbled: false,
      initAbled: false,
      editAbled: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      inputVal: "",
      tableData: [
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "2", enStatus: "发布中" },
        { date: "2020-10-10 12:12:30", status: "2", enStatus: "发布中" },
        { date: "2020-10-10 12:12:30", status: "3", enStatus: "发布异常" },
        { date: "2020-10-10 12:12:30", status: "3", enStatus: "发布异常" },
        { date: "2020-10-10 12:12:30", status: "4", enStatus: "待启动" },
        { date: "2020-10-10 12:12:30", status: "4", enStatus: "待启动" },
        { date: "2020-10-10 12:12:30", status: "5", enStatus: "手工停止" },
        { date: "2020-10-10 12:12:30", status: "5", enStatus: "手工停止" },
        { date: "2020-10-10 12:12:30", status: "6", enStatus: "已完成" },
        { date: "2020-10-10 12:12:30", status: "6", enStatus: "已完成" },
        { date: "2020-10-10 12:12:30", status: "7", enStatus: "待发布" },
        { date: "2020-10-10 12:12:30", status: "7", enStatus: "待发布" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "2", enStatus: "发布中" },
        { date: "2020-10-10 12:12:30", status: "2", enStatus: "发布中" },
        { date: "2020-10-10 12:12:30", status: "3", enStatus: "发布异常" },
        { date: "2020-10-10 12:12:30", status: "3", enStatus: "发布异常" },
        { date: "2020-10-10 12:12:30", status: "4", enStatus: "待启动" },
        { date: "2020-10-10 12:12:30", status: "4", enStatus: "待启动" },
        { date: "2020-10-10 12:12:30", status: "5", enStatus: "手工停止" },
        { date: "2020-10-10 12:12:30", status: "5", enStatus: "手工停止" },
        { date: "2020-10-10 12:12:30", status: "6", enStatus: "已完成" },
        { date: "2020-10-10 12:12:30", status: "6", enStatus: "已完成" },
        { date: "2020-10-10 12:12:30", status: "7", enStatus: "待发布" },
        { date: "2020-10-10 12:12:30", status: "7", enStatus: "待发布" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
        { date: "2020-10-10 12:12:30", status: "1", enStatus: "运行中" },
      ],
      viewData: [],
      searchData: [],
      multipleSelection: [],
    };
  },
  watch: {
    inputVal(val) {
      if (!val) {
        this.initData();
      }
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleSelectionChange(val) {
      console.log("val", val);
      this.multipleSelection = val;
      if (val && val.length) {
        // 编辑每一行只针对一个
        if (val.length == 1) {
          this.editAbled = true;
        } else {
          this.editAbled = false;
        }
        let obj = {
          startAbled: {
            show: ["4", "5", "6", "7"],
            hidden: ["1", "2", "3"],
          },
          stopAbled: {
            show: ["1", "2", "3", "4", "7"],
            hidden: ["5", "6"],
          },
          initAbled: {
            show: ["1", "3", "5", "6"],
            hidden: ["2", "4", "7"],
          },
          detAbled: {
            show: ["2", "3", "5", "6", "4", "7"],
            hidden: ["1"],
          },
        };
        //获取所有旋转的状态，并除重
        let status = new Set(this.multipleSelection.map((v) => v.status));
        Object.keys(obj).forEach(v=>{
          let hiddenSet = new Set(obj[v].hidden);
          //取公共交集
          let resArr = new Set([...status].filter(x=> hiddenSet.has(x)))
          this[v] = [...resArr].length ? false : true;
        })
      } else {
        this.startAbled = false
        this.stopAbled = false
        this.initAbled = false
        this.detAbled = false
        this.editAbled = false
      }
    },
    //第一页多少数据 10 20 30 ...
    handleSizeChange(val) {
      this.pageSize = val;
      this.initData();
    },
    //点击某一页  1 2 3...
    handleCurrentChange(val) {
      this.currentPage = val;
      let data = this.inputVal
        ? this.searchData
        : JSON.parse(JSON.stringify(this.tableData));
      let star = (val - 1) * this.pageSize;
      let end = val * this.pageSize;
      let length = data.length;
      if (length < end) {
        this.viewData = data.slice(star, length);
      } else {
        this.viewData = data.slice(star, end);
      }
    },
    initData() {
      let data = this.inputVal
        ? this.searchData
        : JSON.parse(JSON.stringify(this.tableData));
      this.viewData = data.slice(0, this.pageSize);
      this.total = data && data.length ? data.length : 0;
    },
    //搜索数据
    searchStatus() {
      let inputVal = this.inputVal.toString();
      let data = JSON.parse(JSON.stringify(this.tableData));
      let arr = [];
      data.forEach((v) => {
        if (v.status.indexOf(inputVal) != -1) {
          arr.push(v);
        }
      });
      this.searchData = JSON.parse(JSON.stringify(arr));
      this.viewData = arr.slice(0, this.pageSize);
      this.total = arr && arr.length ? arr.length : 0;
    },
    //删除
    delInputVal() {
      this.pageSize = 10;
      this.currentPage = 1;
      this.inputVal = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.home-page {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  .btn-search-box {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-box {
      height: 40px;
    }
    .search-box {
      height: 40px;
      padding-right: 40px;
    }
  }
  .table-page-box {
    border: 1px solid #ededed;
    padding: 10px;
    height: calc(100% - 80px);
    .table-box {
      height: calc(100% - 40px);
      overflow: auto;
    }
    .page-box {
      height: 40px;
      padding-top: 6px;
    }
  }
}
</style>

数据构造以及算法

let obj = {
  startAbled: {
    show: ["4", "5", "6", "7"],
    hidden: ["1", "2", "3"],
  },
  stopAbled: {
    show: ["1", "2", "3", "4", "7"],
    hidden: ["5", "6"],
  },
  initAbled: {
    show: ["1", "3", "5", "6"],
    hidden: ["2", "4", "7"],
  },
  detAbled: {
    show: ["2", "3", "5", "6", "4", "7"],
    hidden: ["1"],
  },
};
//获取所有旋转的状态，并除重
let status = new Set(this.multipleSelection.map((v) => v.status));
Object.keys(obj).forEach(v=>{
  let hiddenSet = new Set(obj[v].hidden);
  //取公共交集
  let resArr = new Set([...status].filter(x=> hiddenSet.has(x)))
  this[v] = [...resArr].length ? false : true;
})
avatar
文章
阅读
粉丝