一、题目说明：
题目以及基本思路
1 | 表格中要点击删除按钮删除ID对应的那条数据，data中声明tabledata=[]存放表格中的数据，要将数
组中与对应删除数据相同的元素过滤掉，然后其余数据重新赋值给tabledata数组，这样，就可以删
除对应的那条数据。
2 | tabledata = [];（数组中的列表数据是通过后台列表接口数据赋值后的）
页面效果展示
表格示例图.png
页面代码展示
表格数据.png
点击删除 （运用 Filter() 方法比较）
delPartner(id, code) { //接受参数id 和 code
this.$confirm("此操作将永久删除该合作伙伴, 是否继续?", "提示", { //确定弹框
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => { //确定删除
del_partner({ //调用删除接口
id: id,
code: code
})
.then(response => { //删除成功的回调函数
const { code } = response;
if (code === CODE_Success) { //如果code为100000，表示接口成功
重点来了：运用 filter 过滤数组，判断要删除的数据 id 是否与数组中某个数据 id
相同 ，如果相同把它删除，然后把所有其余不相同的 id 的数据再赋值给 tabledata 数组，这样就把想
要删除的那条数据删除了
this.tableData = this.tableData.filter(item => item.id !== id);
this.$message({ message: "删除成功", type: "success" });
this.getPartners();
} else {
this.$message.warning({
message: `不存在伙伴数据`,
duration: 1000
});
}
})
.catch(error => {
console.log(error);
});
this.total = this.total - 1;
})
.catch(() => {
this.$message({
type: "info",
message: "已取消禁用"
});
});
}
数组过滤的方法其实还有很多，下面就给大家也一一展示出来，大家可以尝试着运用，下面的方法我并没有亲自实践过，大家有什么问题或意见就留言区一起讨论吧，不喜勿喷哦~~~
补充一个使用es6新增Set函数快速数组去重
使用new Set()快速数组去重：
let arr = [1, 2, 2, 3, 4, 5, 5, 5, 6]
let set = new Set([...arr])
console.log([...set]) //[1, 2, 3, 4, 5, 6]
function SetArr(array) {
return Array.from(new Set(array));
}
console.log(SetArr([1, 1, 2, 2, 3, 4, 4])) // [1, 2, 3，4]
一、JavaScript数组过滤相同元素的6种方法：
以下内容摘自原链接：https://www.jianshu.com/p/600bbb8cd1c1
1、题目说明
声明一个数组,将数组中的相同元素过滤掉,然后存入到一个新数组resultArr = []中;
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr = []//该数组的结果应该为1,2,3,4,5,6
2、基本思路
1、采用循环嵌套
2、外层循环将数组中的值赋给新的数组
3、内层循环通过if语句判断新数组中是否有该值,如果有,则在外层循环中通过if语句判断,让元素不赋给新数组.（查重）
二、方法解析
方法一:比较内层循环变量的值.
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr = [];
//外层循环进行赋值
for (i = 0; i < arr.length; i++) {
//内层循环进行重复判断
for (j = 0; j < resultArr.length; j++) {
if (resultArr[j] == arr[i]) {
break;//一旦有重复arr[i],跳出循环
}
}
//如果resultArr这个数组中没有arr[i],那么j经过内层循环后没有break,值应为resultArr.length
if (j == resultArr.length) {
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr); //1,2,3,4,5,6
方法二:计数法.
var arr = [1,2,2,3,4,5,5,6,5,6];
var count; //声明一个变量,用来计数
var resultArr = [];
for (i = 0; i < arr.length; i++) {
count = 0; //每次初始化计数变量
for (j = 0; j < resultArr.length; j++) {
if (resultArr[j] == arr[i]) {
count++; //一旦进入该if语句,则计数变量自加
break;
}
}
//如果count等于0 ,那么说明内层循环中没有进入if语句,则resultArr中没有和arr[i]重复的元素
if (count == 0) {
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr); //1,2,3,4,5,6
方法三:flag标志法(也叫假设成立法)
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr = []; //[1,2,3]
var flag; //声明一个变量,用来当做假设变量
for (var i = 0; i < arr.length; i++) {
flag = true; //每次初始化假设变量,假设result中没有和arr[i]重复的元素,赋值true,
for (j = 0; j < resultArr.length; j++) {
if (resultArr[j] == arr[i]) {
flag = false; //一旦进入该if语句,则表示resultArr中有重复的的arr[i],则假设不成立,赋值false
break;
}
}
//如果flag为ture,赋值给resultArr这个数组
if (flag) {
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr);//1,2,3,4,5,6
方法四:使用sort()方法排序后比较
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr = [];
//使用数组的sort()方法对arr进行排序,也可以使用冒泡排序
arr.sort(function (a, b) {
return a - b;
});
//排序后,arr变成了[1, 1, 2, 2, 3, 3, 4, 5, 5,6,6]
//使用for循环,从上面的数组可以看出,如果数组元素arr[i]和arr[i+1]不相等,则表示arr[i]之后不再有与arr[i]相等的重复元素
for (i = 0; i < arr.length; i++) {
if (arr[i] != arr[i + 1]) {
//将arr[i]赋值给resultArr数组.
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr); //1,2,3,4,5
方法五:使用filter()方法比较
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr;
//采用filter()方法过滤掉数组中重复的元素,filter()方法中传入一个过滤函数作为参数.
resultArr = arr.filter(function (item, index, self) {
//indexOf返回的是arr中的第一个元素的索引值,所以下面语句过滤掉了arr中重复的元素.
return self.indexOf(item) == index;
});
console.log(resultArr); //1,2,3,4,5,6
方法六:使用缓存对象方法比较
var arr = [1,2,2,3,4,5,5,6,5,6];
var resultArr = [];
var cache = {}; //声明一个缓存对象
for(var i = 0 ; i < arr.length; i ++){//循环数组arr
if(!cache[arr[i]]){//进行判断,如果缓存对象中没有这个属性名的话,我们就把该数组赋值给resultArr,并把该属性名赋值为true
cache[arr[i]] = true;
resultArr.push(arr[i]);
}
}
console.log(resultArr); // 1,2,3,4,5,6
网友评论