vue之push() pop() shift() unshift() splice() sort() reverse()等等

一、变更方法Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。let arr = ['a', 'b', 'c', 'd']console.log(arr)// ["a", "b", "c", "d"]console.log(arr.push('new')) //6console.log(arr) // ["a"

wangwei830

10165人浏览 · 2021-12-16 16:27:36

wangwei830 · 2021-12-16 16:27:36 发布

一、变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

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() 方法数组最后一位元素删除并返回数组的最后一个元素。

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() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

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() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

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) 方法向/从数组中添加/删除项目，然后返回被删除的项目
第一个参数：表示从哪个索引位置（index）添加/删除元素
第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。
第三个参数：可选。向数组添加的新项目。

例:splice(1);保留前一个元素之后的全部删除，splice(2);保留前两个元素之后的全部删除

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

例:splice(2, 1) 从索引位置(index:2)删除，删除一个元素

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

例:splice(1,2,‘a’,‘b’) 从索引位置(index:1)删除，删除2个元素，并添加2个新元素来替代被删除的元素

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

例:splice(1,0,‘a’)从索引位置(index:1)添加，添加两个元素

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

sort() 方法对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。
arr.sort(sortby) 可选。规定排序顺序。必须是函数。

例:字母顺序进行排序

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

例:大小排序

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() 方法颠倒数组中元素的顺序。

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

二、替换数组

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

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

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 方法用于连接两个或多个数组。

slice() 方法可从已有的数组中返回选定的元素。

三、其他
split() 方法用于把一个字符串分割成字符串数组。

四、综合：列表搜索和排序

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表搜索和排序</title>
</head>

<body>
  <div id="demo">
    <div><input type="text" v-model="searchKey" placeholder="请输入搜索关键字"></div>
    <ul>
      <li v-for="(v, k) in filtersList" :key="k">
        {{v.name}}-{{v.age}}
      </li>
    </ul>
    <button @click="sortType = 1">年龄升序</button>
    <button  @click="sortType = 2">年龄降序</button>
    <button  @click="sortType = 0">年龄默认</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代表默认 1代表升序 2代表降序
          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>