JS数组中删除另一个数组

一、JS数组中删除另一个数组

1.实例：

必选元素与可选元素用一个下拉框数据，
但是必选元素比可选元素的优先级高，
即必选一定不可选。
必选元素拥有所有元素的下拉框，
可选元素只有去掉必选元素内容的下拉框。

2.视频演示

https://www.bilibili.com/video/BV1HB4y137ab?spm_id_from=333.999.0.0&vd_source=86d2da9060e7f2692f22974d1b05784e

3.代码实现：

      this.elementList1 = this.elementList.filter((item) => {
        return name.mustElementIds.every((item2) => {
          return item.id != item2
        })
      })
      name.optionalElementIds = name.optionalElementIds.filter((item) => {
        return name.mustElementIds.every((item2) => {
          return item != item2
        })
      })
1
2
3
4
5
6
7
8
9
10

4.字段解释：

elementList：必选元素下拉框
elementList1 ：可选元素下拉框
mustElementIds：必选元素已选元素
optionalElementIds ：可选元素已选元素

5.代码基础框架：

      const arrList = List1.filter((item) => {
        return List2.every((item2) => {
          return item.Id != item2.Id;
        });
      });
1
2
3
4
5

字段解释：

arrList :需要的数据
List1：数组1
List2：数组2

数组数据类型：

list：[{
id:0,
name:'数组',
}]
1
2
3
4

6.学习延申

菜鸟教程：TypeScript 循环

for 循环

for ( 初始化; 条件; 增量){
    //语句 
}
1
2
3

for…in 循环

for (var val in list) { 
    //语句 
}
1
2
3

for…of循环

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
1
2
3
4
5

forEach循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});
1
2
3
4
5
6

every 循环

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false 将会停止此次循环
});
1
2
3
4
5
6
7
8

some 循环

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return false; // Continues
    // Return true 将会停止此次循环
});
1
2
3
4
5
6
7
8

map 循环

const arr2 = list.map((item) => { return item * 2 })
1

while 循环

while(condition)
{
   statement(s);
}
1
2
3
4

do…while 循环

do
{
   statement(s);
}while( condition );
1
2
3
4

二、两个数组中根据相同的部分找出需要的部分

1.简单案例

在数组中找出name='张三'

        var list = [{
            name: '张三',
            age: '19',
            class: '数学'
        }, {
            name: '李四',
            age: '22',
            class: '语文'
        }, {
            name: '赵六',
            age: '14',
            class: '生物'
        }]
        var data = list.find((item) => item.name === '张三')
        console.log(data)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.找出数组1中对应数组2的内容

        var list = [{
            name: '张三',
            age: '19',
            class: '数学'
        }, {
            name: '李四',
            age: '22',
            class: '语文'
        }, {
            name: '赵六',
            age: '14',
            class: '生物'
        }]
        var list2 = [{
            name: '张三',
            score: 90,
        }, {
            name: '李四',
            score: 92,
        },]
        var data = list.map((item) => {
            return {
                ...item,
                score: this.list2.find((_item) => _item.name = item.name).score,
            }
        })
        console.log(data)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、目标字符串经过变化，最后成为一个无杂数据的数组

1.实例

目标字符串192.168.10\n192.168.99\n\n\n
最终需要的结果：Array [ "192.168.10", "192.168.99" ]

想法，最开始想要一步解决，但是试过很多，都不太行，最后倒了两次才出来结果，感觉有点麻烦了，有优秀算法欢迎指出。

        var formEditTask = {};
        formEditTask.filterRules = "192.168.10\n192.168.99\n\n\n"
        //首先对字符串进行分割
        formEditTask.filterRule = formEditTask.filterRules.split("\n");
        var arr = [];
        //对获取到的数组进行筛选，将空数据剔除，这个是当时难住我的地方，最开始想要一步剔除，发现并不行
        for (var i = 0; i < formEditTask.filterRule.length; i++) {
            if (formEditTask.filterRule[i] !== '') {
                arr.push(formEditTask.filterRule[i])
            }
        }
        formEditTask.filterRule = arr
        console.log(arr)
        console.log(formEditTask)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最终结果：
filterRule就是最后需要的数组。

问题：

1. this.$refs[name].resetFields();为什么有时候使用表单，在关闭之际会出现验证问题，有时候反倒是直接关闭，不会暴露验证问题？

四、获取到的返回数据是Promise类型的怎么办

解决：将获取方法加上async，await，此时再次获取数据即为常用的数据类型。

    async getOwningCityDataList() {
      const res = await ajax.get('api/gradingArea/queryProvinceList', 'sp_alarm')
      if (res.status == 200) {
        this.owningProvinceData = res.data
      } else {
        this.$Message.error(res)
      }
    },
1
2
3
4
5
6
7
8

五、路由跳转常用的三种携带参数的方式

1.第一种，参数会拼接在url中，获取参数用this.$route.query

this.$router.push('/multilevelReport?percent='+'xxx' )
1

2.第二种，参数也会拼接在url中，获取参数用this.$route.query

this.$router.push({
          path:'/multilevelReport',
          query:{ percent: 'xxx' },
        })
1
2
3
4

3.第三种，参数不会暴露在url地址中，获取参数用this.$router.params

例：this.$router.params.row

this.$router.push({
          name:'multilevelReport',
          params:{ percent: 'xxx' },
        })
1
2
3
4

推荐1（very）：https://www.jianshu.com/p/77fe88ccd757
推荐2：https://blog.csdn.net/weixin_46453039/article/details/125757430