原生js通过splice()方法进行数组去重

本文详细解析了JavaScript数组splice()方法的使用技巧,包括参数意义、数组操作及实际应用案例,如数组去重等。通过实例代码展示了如何利用splice()进行数组元素的删除和插入。

首先看一下splice()这个方法,W3School是这么说的

再来看一下里面的参数

第一个参数一般为要操作项目对应的数组下标,第二个参数为删除的数量,例如splice(2,0)表示什么也不做,splice(2,1 )表示删除一个数组下标为2的内容,splice(2,,2)表示从数组下标2对应的内容开始,删除两个,即删除下标为2 和下标为3的所对应的内容,splice还可以传第三个参数,即表示向数组中添加的内容,例如splice(2,0,' Mary ' )表示在在下标为2的地方添加一个" Mary"的项目,再例如,splice(2,1," Mary")表示删除一个下标为2的项目,并用'Mary'替代它。所以这个方法的功能还是挺强大的

综上所述 :数组去重可以这么写

var arr = [1,3,4,5,6,5,6,6,6,4];
//定义一个数组
//想要进行数组去重,就是要通过循环遍历的方法,让每个数字都与他之后的数字进行比较,写出循环表达式
for(var i = 0 ; i < arr.length ; i++){
    for(var j = i+1 ; j < arr.length ; j++){
        //arr[j]需要从arr[i]后面的第一个数字开始进行比较,所以设置为j = i+1
            if(arr[i] == arr[j]){
                
                //调用splice方法,这个方法返回的就是修改之后的数组,所以不必再进行数组的其他操作
                arr.splice(j,1);
                //删除下标为j对应的元素,并且删除的个数只为1个
                j--;
                //删除操作完成后,如果不设置此操作,j开始执行下一次循环,值会加1,从而会跳过删除之后紧跟arr[j-1]的一个元素,避免多个元素相邻却无法实现去重的效果;
                
            }        
    }
}
console.log(arr);//[1,3,4,5,6]

若有不当之处,还请多多指教。

<think>首先,用户的问题是:“我想了解vue中数组操作是否会改变原数组 请问vue数组是否会改变原数组”。这是在询问Vue.js数组操作是否会改变原始数组。 用户提供了几个引用,我需要参考它们。引用是关于JavaScript数组方法的,不是直接关于Vue.js的。引用[1]讨论了使用splice方法,这可能会改变原数组。引用[2]是关于filter和reduce,它们不改变原数组。引用[3]是关于includes,使用push创建新数组,不改变原数组。引用[4]是关于splice方法的描述。 现在,Vue.js框架本身并没有提供特定的数组方法;它依赖于JavaScript原生数组方法。所以,问题的核心是取决于你使用哪种方法来实现。 关键点:在Vue.js中,响应性是核心特性。Vue使用响应式系统来跟踪数组变化。如果你直接修改数组(比如使用splice),Vue可以检测到改变并更新视图。但如果你创建一个新数组(比如使用filter),你需要确保Vue知道引用已改变。 回答结构: 1. **解释是否改变原数组取决于方法**:不是所有操作都改变原数组;它依赖于具体的实现。 2. **讨论Vue的响应性**:在Vue中,为了触发视图更新,常见做法是创建新数组以避免直接修改。 3. **参考提供的引用**:引用中提到的方法,如splice(改变原数组)和filter(不改变原数组)。 4. **给出示例**:提供一些Vue代码示例来展示。 系统级指令: - 使用中文回答。 - 行内数学使用$...$(但这里可能不需要数学)。 - 独立公式使用$$...$$(同样,可能不适用)。 - LaTeX语法正确(这里主要是代码)。 - 生成相关问题(在最后)。 - 引用的段落末尾添加引用标识,如[^1]。 回答结构: - 清晰解释。 - 参考引用。 - 生成相关问题。 最终输出: - 回答用户问题。 - §§相关问题§§部分。 核心回答: - Vue数组是否会改变原数组取决于你使用的方法。 - 如果使用splice等原地修改方法,会改变原数组。 - 如果使用filter、reduce等创建新数组方法,不会改变原数组。 - 在Vue中,推荐创建新数组以避免响应性问题。 参考引用: - 引用[1]:splice改变原数组。 - 引用[2]:filter不改变原数组。 - 引用[3]:includes和push创建新数组。 - 引用[4]:splice改变原数组。 在回答中自然地添加引用标识。 结束时生成相关问题。 </think>### Vue中数组是否会改变原数组? 在Vue.js中,数组操作是否会改变原数组,**完全取决于你使用的JavaScript方法**。Vue本身不提供专门的函数,而是依赖JavaScript原生数组操作(如`splice`、`filter`等)。以下是详细分析: 1. **如果使用原地修改的方法,会改变原数组**[^1][^4]: - 例如,使用`Array.splice()`方法实现时,会直接在原数组上删除复元素。这在Vue中是可行的,但需要小心处理响应式更新。 - 引用[1]中的示例演示了`splice`:它通过循环和`splice`删除复项,并修改索引(`i--`)。这直接改变了原数组。 - 在Vue中,这种做法会触发响应式更新,因为Vue能检测到数组的变异方法(如`splice`)。但直接修改原数组可能导致副作用,如视图渲染问题。 - 示例代码: ```javascript export default { data() { return { list: [8, 8, 1, 1, '你是最棒的4'] }; }, methods: { removeDuplicates() { for (let i = 0; i < this.list.sort().length; i++) { if (this.list[i] === this.list[i + 1]) { this.list.splice(i, 1); // 直接修改原数组 i--; } } console.log('数组:', this.list); // 原数组已改变 } } }; ``` 2. **如果使用创建新数组方法,不会改变原数组**[^2][^3]: - 例如,使用`Array.filter()`、`Array.reduce()`或`Array.includes()`结合`push`等方法实现时,会生成一个新数组,原数组保持不变。 - 引用[2]提到`filter`方法“不改变原数组”,而是返回一个新数组。 - 引用[3]中`includes`方法的示例也使用了`push`到新数组,避免了修改原数组。 - 在Vue中,这种做法更安全,因为它避免了直接修改响应式数据。你需要将新数组赋值给原数据属性,以触发视图更新。 - 示例代码: ```javascript export default { data() { return { list: [8, 8, 1, 1, '你是最棒的4'], newList: [] }; }, methods: { removeDuplicates() { const uniqueList = this.list.filter((item, index, self) => { return self.indexOf(item) === index; // 不改变原数组 }); this.newList = uniqueList; // 赋值到新属性,触发响应式更新 console.log('原数组未改变:', this.list); console.log('新数组:', this.newList); } } }; ``` #### 在Vue中的最佳实践 - **推荐创建新数组**:Vue的响应式系统对引用类型数据(如数组)的修改更敏感。使用`filter`、`reduce`或`Set`(如`[...new Set(array)]`)创建新数组,然后赋值给data属性(如`this.list = newArray`),能确保视图正确更新[^2][^3]。 - **避免直接修改原数组**:虽然`splice`等方法能被Vue检测到,但频繁修改可能导致性能问题或意外错误[^1][^4]。 - **Vue的变异方法**:Vue包装了数组的变异方法(如`splice`、`push`),使其响应式。但通常涉及更复杂逻辑,优先选择不变异的方法。 总之,在Vue中数组是否改变原数组,取决于你的代码实现:原地修改方法(如`splice`)会改变原数组;创建新数组方法(如`filter`)不会[^1][^2][^3][^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值