[JavaScript] ---- Move up, down, and top of array elements

1. Implement preview

2. Implementation analysis

1. The implementation is to change the position of the array elements;
2. Implementation method 1, use a variable to receive an element at a position, then change the current position, and use the received variable to replace the value at the changed position;
3. Implementation method 2, using the splice method of the array;
4. Implementation method three, use es6 destructuring assignment.

3. html infrastructure

1. v-if="index != 0" judges that the first row of data is already at the top, so it cannot be moved up and topped;
2. v-if="index != nums.length - 1" judges that the last line of data is already at the bottom, so it cannot be moved down and bottomed.

<div class="rui-flex-ac" v-for="item,index in nums" :key="item">
    <div class="rui-fg">{
   
   {item}}</div>
    <div class="rui-fa" v-if="index != 0" @click="moveUp(index)">上移</div>
    <div class="rui-fa" v-if="index != nums.length - 1" @click="moveDown(index)">下移</div>
    <div class="rui-fa" v-if="index != 0" @click="moveTop(index)">置顶</div>
</div>

4. Method 1: variable reception

1. Moving up or down is to use the temp variable to get the element at the current position;
2. The current position obtains the element that needs to be moved in the direction [the element in the previous or next position];
3. Obtain the value of the temp variable in the moving direction position to complete the element replacement;
4. The top uses the variable temp to get the current position element, and other to get the value of other position elements;
5. Splicing temp and other can be achieved by using unshift, concat, etc. here.

    // 上移
    moveUp(index){
      let nums = this.nums;
      let temp = nums[index]
      nums[index] = nums[index - 1]
      nums[index - 1] = temp;
      this.nums = [...nums];
    },
    // 下移
    moveDown(index){
      let nums = this.nums;
      let temp = nums[index]
      nums[index] = nums[index + 1]
      nums[index + 1] = temp;
      this.nums = [...nums];
    },
    // 置顶
    moveTop(index){
      let nums = [...this.nums]
      let temp = nums[index]
      let other = nums.filter((item,idx) => index != idx)
      this.nums = [temp,...other]
    },

5. Method 2: Double splice to realize element replacement

1. The first step is nums.splice(index - 1, 1, nums[index]), replace the element at index - 1 with nums[index];
2. Note: splice will return a list of replaced elements , so replacing the returned element with the index position can realize the exchange of element positions;
3. The second step nums.splice(index, 1, ...nums.splice(index - 1, 1, nums[index])), replace the return value in the first step with the element at the index position;
4. Get the value returned by splice at the top, and put it at position 0 of the array.

    // 上移
    moveUp(index){
      let nums = this.nums;
      nums.splice(index, 1, ...nums.splice(index - 1, 1, nums[index]))
      this.nums = [...nums];
    },
    // 下移
    moveDown(index){
      let nums = this.nums;
      nums.splice(index, 1, ...nums.splice(index + 1, 1, nums[index]))
      this.nums = [...nums];
    },
    // 置顶
    moveTop(index){
      let nums = [...this.nums]
      this.nums = [...nums.splice(index,1),...nums]
    },

6. Method 3: Single splice to achieve element exchange

The difference between this method and method 2 is to go further. Method 2 uses splice for the second replacement value, while method 3 directly assigns the return value of the first splice to the current position.

    // 上移
    moveUp(index){
      let nums = this.nums;
      nums[index] = nums.splice(index - 1, 1, nums[index])[0]
      this.nums = [...nums];
    },
    // 下移
    moveDown(index){
      let nums = this.nums;
      nums[index] = nums.splice(index + 1, 1, nums[index])[0]
      this.nums = [...nums];
    },
    // 置顶
    moveTop(index){
      let nums = [...this.nums]
      this.nums = [...nums.splice(index,1),...nums]
    },

7. Method 4: ES6 destructuring assignment

1. Directly through the destructuring assignment, the elements in the two positions are exchanged.

    // 上移
    moveUp(index){
      let nums = this.nums;
      [nums[index], nums[index - 1]] = [nums[index - 1], nums[index]]
      this.nums = [...nums];
    },
    // 下移
    moveDown(index){
      let nums = this.nums;
      [nums[index], nums[index + 1]] = [nums[index + 1], nums[index]]
      this.nums = [...nums];
    },
    // 置顶
    moveTop(index){
      let nums = [...this.nums]
      this.nums = [...nums.splice(index,1),...nums]
    }

8. Induction

     move(type, nums, index, row={}){
      if(!Array.isArray(nums)){
        return nums
      }
      switch(type){
        case 'up':
          [nums[index], nums[index - 1]] = [nums[index - 1], nums[index]]
          break;
        case 'down':
          [nums[index], nums[index + 1]] = [nums[index + 1], nums[index]]
          break;
        case 'top':
          nums = [...nums.splice(index,1), ...nums]
          break;
        case 'bottom':
          let val = nums.splice(index,1)[0]
          nums = [...nums, val]
          break;
      }
      return [...nums]
    },
    // 上移[up]、下移[down]、置顶[top]
    moveRow(type, index, item = {}){
      this.nums = this.move(type, this.nums, index, item)
    },

9. Summary

1. Concentrate operations such as move up, move down, top, bottom and add, delete, etc. into one tool function to facilitate centralized operations;
2. There are many ways to achieve this, and here is a summary of the methods I often use in my work.