数组中第n项与第n+1项交换位置及删除某一项

一、数组中第 n 项与第 n+1 项交换位置

不推荐这样写：

const arr = [
    {
        name: "张三",
        age: "18"
    },
    {
        name: "李四",
        age: "19"
    }
]
const temporary = arr[0]
arr[0] = arr[1]
arr[1] = temporary

不推荐这样写是因为，有时候通过数组下标修改了数组的值，数据并未及时更新。

推荐：

1、ES6

const a = [1,2,3];
[a[0],a[2]] = [a[2],a[0]];
a; // [3,2,1];

2、splice

const arr = ["a", "b", "c"];
const current = arr[0]
arr.splice(0, 1, arr[1])
arr.splice(1, 1, current)
arr; // ["b", "a", "c"]

vue项目中还可以使用 this.$set

• 使用 $set 尽量避免重绘页面，也就是说，该数组的数据的更新不会导致页面视图的更新；
• 使用 $set 最好保证当前项目只有一个 vue 实例。

拓展：Vue.set() this.$set()引发的视图更新思考及注意事项。

语法：

const arr = ['a', 'b', 'c']
const current = arr[0]
this.$set(arr, 0, arr[1])
this.$set(arr, 1, current)
arr; // ['b', 'a', 'c']

二、数组中删除某一项

推荐：

splice:

const arr = ["a", "b", "c"];
arr.splice(1, 1)
arr; // ["a", "c"]

vue项目中还可以使用 this.$delete

• 使用 $delete 尽量避免重绘页面，也就是说，该数组的数据的更新不会导致页面视图的更新；
• 使用 $delete 最好保证当前项目只有一个 vue 实例。

const arr = [
    {
        name: "张三",
        age: "18"
    },
    {
        name: "李四",
        age: "19"
    }
]
this.$delete(arr,1)
arr; // [{ name: "张三", age: "18" }]