在vue中操作数组

怼烎@ 2024-04-17 20:31 72阅读 0赞

# 1. 前言 #

--------------------

vue 中对数组简单的新增和删除

# 2. 新增 #

--------------------

## 2.1 push 添加到最后一位 ##

### 2.1.1 代码 ###

// 数组
    var arr = ['java', 'javascript'];
    console.log('============ 当前数组 ============')
    console.log(arr)
    console.log('============ 当前数组 ============')
    // 添加到最后一个
    arr.push('vue')
    console.log('============ push -> "vue" ============')
    console.log(arr)
    console.log('============ push -> "vue" ============')

### 2.1.2 运行结果 ###

============ 当前数组 ============
    (2) ["java", "javascript"]
    ============ 当前数组 ============
    ============ push -> "vue" ============
    (3) ["java", "javascript", "vue"]
    ============ push -> "vue" ============

## 2.2 unshift 添加到第一位 ##

### 2.2.1 代码 ###

// 数组
    var arr = ['java', 'javascript'];
    console.log('============ 当前数组 ============')
    console.log(arr)
    console.log('============ 当前数组 ============')
    // 添加到第一个
    arr.unshift('c')
    console.log('============ unshift -> "c" ============')
    console.log(arr)
    console.log('============ unshift -> "c" ============')

### 2.2.2 运行结果 ###

============ 当前数组 ============
    (2) ["java", "javascript"]
    ============ 当前数组 ============
    ============ unshift -> "c" ============
    (3) ["c", "java", "javascript"]
    ============ unshift -> "c" ============

# 3. 删除 #

--------------------

## 3.1 splice 按指定索引删除 ##

## 3.1.1 代码 ##

// 数组
    var arr = ['java', 'javascript', 'vue'];
    console.log('============ 当前数组 ============')
    console.log(arr)
    console.log('============ 当前数组 ============')
    // 删除第二个
    arr.splice(1, 1)
    console.log('============ splice -> 1 ============')
    console.log(arr)
    console.log('============ splice -> 1 ============')

注：这里 splice(1, 1) 方法中，第一个参数为要删除元素的索引，第二个参数为要删除元素的数量（从索引开始）

### 3.1.2 运行结果 ###

============ 当前数组 ============
    (3) ["java", "javascript", "vue"]
    ============ 当前数组 ============
    ============ splice -> 1 ============
    (2) ["java", "vue"]
    ============ unshift -> 1 ============

## 3.2 按指定元素删除 ##

### 3.2.1 代码 ###

// 数组
    var arr = ['java', 'javascript', 'vue'];
    console.log('============ 当前数组 ============')
    console.log(arr)
    console.log('============ 当前数组 ============')
    // 删除指定元素
    arrayDelete(arr, 'java')
    console.log('============ splice -> "java" ============')
    console.log(arr)
    console.log('============ splice -> "java" ============')
            
    function arrayDelete(arr, item) {
      var index = arr.indexOf(item);
      if (index > -1) {
        arr.splice(index, 1);
      }
    }

### 3.2.2 运行结果 ###

============ 当前数组 ============
    (3) ["java", "javascript", "vue"]
    ============ 当前数组 ============
    ============ splice -> "java" ============
    (2) ["javascript", "vue"]
    ============ splice -> "java" ============

# 4. 结语 #

--------------------

长期更新

# 5. 扩展 #

--------------------

**欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947