current position:Home>Vue push() pop() shift() unshift() splice() sort() reverse(), etc

Vue push() pop() shift() unshift() splice() sort() reverse(), etc

2022-01-26 23:02:02 wangwei830

One 、 Change method

Vue Wrapped the change method of the array being listened on , So they will also trigger view updates

push() Method to add one or more elements to the end of an array , And returns the new length .

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.push('new')) //6
console.log(arr) // ["a", "b", "c", "d", "new"]
1234

pop() Method deletes the last element of the array and returns the last element of the array .

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.pop()) //d
console.log(arr) // ["a", "b", "c"]
1234

shift() Method is used to remove the first element of an array , And returns the value of the first element .

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.shift()) //a
console.log(arr) // ["b", "c", "d"]
1234

unshift() Method to add one or more elements to the beginning of an array , And returns the new length .

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.unshift('new')) //6
console.log(arr) // ["new","a", "b", "c", "d"]
1234

splice(index,howmany,item1, …, itemX) Method direction / Add from the array / Delete the project , Then return the deleted item
The first parameter : Indicates from which index position (index) add to / Remove elements
The second parameter : Number of items to delete . If set to 0, The item will not be deleted .
The third parameter : Optional . New items added to array .

example :splice(1); Keep all deletions after the previous element ,splice(2); Keep all deletion after the first two elements

let arr = ['a', 'b', 'c', 'd']
arr.splice(2)
console.log(arr) //["a", "b"]
123

example :splice(2, 1) From index location (index:2) Delete , Delete an element

let arr = ['a', 'b', 'c', 'd']
arr.splice(2, 1)
console.log(arr) // ["a", "b", "d"]
123

example :splice(1,2,‘a’,‘b’) From index location (index:1) Delete , Delete 2 Elements , And add 2 A new element to replace the deleted element

let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 2, '1', '2')
console.log(arr) // ["a", "1", "2", "d"]
123

example :splice(1,0,‘a’) From index location (index:1) add to , Add two elements

let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 0, '1', '2')
console.log(arr) // ["a", "1", "2", "b", "c", "d"]
123

sort() Method to sort the original list , If you specify parameters , Then use the comparison function specified by the comparison function .
arr.sort(sortby) Optional . Set the sort order . It has to be a function .

example : Sort alphabetically

let arr = ['e', 'a', 'c', 'b', 'd']
arr.sort()
console.log(arr) //["a", "b", "c", "d", "e"]
123

example : Size sorting

function sortNumber (a, b) {
    
  return a - b
}
let arr = [10,5,40,25,1000,1]
arr.sort(sortNumber)
console.log(arr) // [1, 5, 10, 25, 40, 1000]
123456

reverse() Method to reverse the order of the elements in the array .

let arr = ['a', 'b', 'c', 'd']
arr.reverse()
console.log(arr) // ["d", "c", "b", "a"]
123

Two 、 Replace array

They don't change the original array , And always returns a new array . When using the non change method , You can replace the old array with a new array :

example1.items = example1.items.filter(function (item) {
    
  return item.message.match(/Foo/)
})
123

filter() Method to create a new array , The elements in the new array are checked by checking all the eligible elements in the specified array .

concat() Method to connect two or more arrays .

slice() Method to return selected elements from an existing array .

3、 ... and 、 other
split() Method is used to split a string into an array of strings .

Four 、 comprehensive : List search and sorting

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> List search and sorting </title>
</head>

<body>
  <div id="demo">
    <div><input type="text" v-model="searchKey" placeholder=" Please enter search keywords "></div>
    <ul>
      <li v-for="(v, k) in filtersList" :key="k">
        {
    {
    v.name}}-{
    {
    v.age}}
      </li>
    </ul>
    <button @click="sortType = 1"> In ascending order of age </button>
    <button  @click="sortType = 2"> In descending order of age </button>
    <button  @click="sortType = 0"> Age defaults to </button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    new Vue({
    
      el: '#demo',
      data () {
    
        return {
    
          searchKey: '',
          sortType: 0, // 0 Represents the default  1 Represents ascending order  2 In descending order 
          list: [
            {
     name: 'Tom', age: 18 },
            {
     name: 'Body', age: 12 },
            {
     name: 'Lily', age: 25 },
            {
     name: 'Boss', age: 35 },
            {
     name: 'Dive', age: 28 }
          ]
        }
      },
      computed: {
    
        filtersList () {
    
          const {
    searchKey, list, sortType} = this
          let arr
          arr = list.filter(v => v.name.indexOf(searchKey) > -1)
          if (sortType !==0) {
    
            arr.sort(function (v1, v2) {
    
              if (sortType === 2) {
    
                return v2.age-v1.age
              } else {
    
                return v1.age-v2.age
              }
            })
          }
          return arr
        }
      }
    })
  </script>
</body>

</html>

copyright notice
author[wangwei830],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262301595907.html

Random recommended