| 轻松掌握 JS 删除数组中指定的对象或者删除数组中某一项 | 您所在的位置：网站首页 › js删除一个元素怎么删 › 轻松掌握 JS 删除数组中指定的对象或者删除数组中某一项 |
轻松掌握 JS 删除数组中指定的对象或者删除数组中某一项
|
前言
关于 JS 删除数组中指定的对象或某一项的话题，它是在实际开发中经常会遇到的问题，也是需要掌握的基本技能。在这篇文章中，我们将深入探讨如何使用 JS 来删除数组中指定的对象或者删除数组中某一项。 删除数组中指定的对象 方法一：使用 filter这种方法使用了 vue 的 filter 方法，它会创建一个新的数组，其中不包含满足条件的对象。condition 是一个函数，用于判断对象是否满足条件。在这个方法中，我们遍历数组中的每个对象，如果对象满足条件，则不包含在新数组中，最后将新数组赋值给原数组。 代码实例 export default { data() { return { shztModel: "", optionsAudit: [ { value: "1", label: "初审通过", }, { value: "2", label: "初审不通过", }, { value: "3", label: "未上报", }, { value: "4", label: "复审通过", }, { value: "5", label: "复审不通过", }, ], }; }, mounted() { this.optionsAudit = this.optionsAudit.filter( (item) => !this.condition(item) ); console.log(this.optionsAudit); }, methods: { condition(item) { return item.value == "2"; }, }, }; 方法二：使用 splice 方法和 forEach这种方法使用了 vue 的 splice 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 splice 方法删除该对象。splice 方法的第一个参数是要删除的对象的索引，第二个参数是要删除的对象的数量。 代码实例 export default { data() { return { shztModel: "", optionsAudit: [ { value: "1", label: "初审通过", }, { value: "2", label: "初审不通过", }, { value: "3", label: "未上报", }, { value: "4", label: "复审通过", }, { value: "5", label: "复审不通过", }, ], }; }, mounted() { this.optionsAudit.forEach((item, index) => { if (this.condition(item)) { this.optionsAudit.splice(index, 1); } }); console.log(this.optionsAudit); }, methods: { condition(item) { return item.value == "2"; }, }, }; 方法三：使用 $delete 和 forEach这种方法使用了 vue 的 delete 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 delete 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 delete 方法删除该对象。$delete 方法的第一个参数是要删除的对象所在的数组，第二个参数是要删除的对象的索引。 代码实例 export default { data() { return { shztModel: "", optionsAudit: [ { value: "1", label: "初审通过", }, { value: "2", label: "初审不通过", }, { value: "3", label: "未上报", }, { value: "4", label: "复审通过", }, { value: "5", label: "复审不通过", }, ], }; }, mounted() { this.optionsAudit.forEach((item, index) => { if (this.condition(item)) { this.$delete(this.optionsAudit, index); } }); console.log(this.optionsAudit); }, methods: { condition(item) { return item.value == "2"; }, }, }; 方法四：使用 reduce这种方法使用了 vue 的 reduce 方法。我们遍历数组中的每个对象，如果对象不满足条件，则将其添加到一个累加器数组中。最后，将累加器数组赋值给原数组。reduce 方法的第一个参数是一个回调函数，该函数接受两个参数：累加器和当前对象。回调函数返回的值将作为下一次迭代的累加器的值。在这个方法中，我们使用一个空数组作为初始累加器的值。 代码实例 export default { data() { return { shztModel: "", optionsAudit: [ { value: "1", label: "初审通过", }, { value: "2", label: "初审不通过", }, { value: "3", label: "未上报", }, { value: "4", label: "复审通过", }, { value: "5", label: "复审不通过", }, ], }; }, mounted() { this.optionsAudit = this.optionsAudit.reduce((acc, item) => { if (!this.condition(item)) { acc.push(item); } return acc; }, []); console.log(this.optionsAudit); }, methods: { condition(item) { return item.value == "2"; }, }, }; 方法五：使用 findIndex（es6） 和 splice使用 findIndex 方法来查找数组中满足条件的对象的索引。判断对象的 value 属性值是否等于 2。如果等于，则使用 splice 方法删除它。 代码实例 export default { data() { return { shztModel: "", optionsAudit: [ { value: "1", label: "初审通过", }, { value: "2", label: "初审不通过", }, { value: "3", label: "未上报", }, { value: "4", label: "复审通过", }, { value: "5", label: "复审不通过", }, ], }; }, mounted() { let index = this.optionsAudit.findIndex((item) => item.value == "2"); if (index !== -1) { this.optionsAudit.splice(index, 1); } console.log(this.optionsAudit); }, };实现效果
使用 filter 方法可以创建一个新的数组，其中包含满足条件的项。这样就可以实现删除数组中指定项的效果。 filter() 方法通过检查指定数组中符合条件的所有元素，filter() 方法不会改变原始数组。 代码实例 mounted() { let arrList = ["周一", "周二", "周三", "周四", "周五"]; arrList = arrList.filter((item) => item !== "周三"); }, 方法二：使用 splicesplice 方法可以直接修改原始数组，通过指定要删除的项的索引和要删除的项的数量来实现删除。 代码实例 mounted() { let arrList = ["周一", "周二", "周三", "周四", "周五"]; const index = arrList.indexOf("周三"); if (index > -1) { arrList.splice(index, 1); } }, 方法三：使用 reducereduce 方法可以遍历数组并返回一个累加的结果。我们可以使用 reduce 方法来创建一个新的数组，其中不包含满足条件的项。 代码实例 mounted() { let arrList = ["周一", "周二", "周三", "周四", "周五"]; arrList = arrList.reduce((acc, item) => { if (item !== "周三") { acc.push(item); } return acc; }, []); }, 方法四：computed 属性在这种方法中，我们可以创建一个 computed 属性，例如 filteredArray，它会根据条件过滤数组中的项，并返回一个新的数组，当数组发生变化时，computed 属性会自动更新，因此无需手动调用删除方法。只需在模板中使用 computed 属性即可获取过滤后的数组。 代码实例 computed: { filteredArray() { let arrList = ["周一", "周二", "周三", "周四", "周五"]; return arrList.filter((item) => item !== "周三"); }, }, 方法五：逆序遍历在这个方法中，我们使用了一个逆序的 for 循环，从数组的最后一项开始遍历，直到第一项。在每次循环中，我们判断当前项是否等于要删除的指定项，如果是，则使用 splice 方法删除该项。 逆序遍历的优点是可以避免在删除数组项时对数组索引的影响。由于我们是从最后一项开始遍历，因此删除当前项不会影响后面项的索引，保证了删除操作的准确性。 然而，需要注意的是，逆序遍历会改变数组的顺序。如果需要保持数组的顺序不变，可以使用其他方法，如前面提到的 filter 方法或 slice 方法。 总之，逆序遍历是一种实现根据条件删除数组中指定项的方法，它可以避免对数组索引的影响，但会改变数组的顺序。根据具体需求选择合适的方法来实现删除功能。 代码实例 mounted() { let arrList = ["周一", "周二", "周三", "周四", "周五"]; for (let i = arrList.length - 1; i >= 0; i--) { if (arrList[i] === "周三") { arrList.splice(i, 1); } } },打印结果
|
【本文地址】