变更方法

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']

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']

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']

unshift() 方法可以向数组的开头添加一个或多个元素，并返回新的长度。

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

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']

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

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

例：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']

例：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']

sort() 方法对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。

arr.sort(sortby)可选。规定排列顺序。必须是函数。

例：按字母顺序进行排列

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

例：大小排列

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]

reverse() 方法颠倒数组中元素的顺序。

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

数组替换

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

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

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>

玖叶教程网

前端编程开发入门

Vue 之 push、pop、shift、unshift、splice、sort、reverse

变更方法

数组替换

其他

综合：列表搜索和排序