Vue包含一组观察数组变异的方法，使用它们改变数组也会触发视图更新:
push() pop() shift() unshift()splice() sort() reverse()
不变异的方法:
filter() concat() slice()
原理:
-- Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染， 因此可以大胆的用新数组来替换旧数组，不用担心性能问题。
两个问题都可以用splice来解决：
第一个问题 还可以用 set方法 this.$set(this.books,3,{...})
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的- 为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)- 你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)- 为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)- 对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})- 你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)- 你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)数组API总结：
/* concat()
1.不会改变现有的数组
2.连接两个或多个数组，返回被连接后的新数组 */
let a = [1,2,3];
let b = [4,5,6];
let c = [7,8,9];
let d = a.concat(b,c) //[1,2,3,4,5,6,7,8,9]
/*slice(start,end)
1.不会改变现有的数组
2.截取数组中的部分元素，并返回一个新的数组
3.start : 必填，起始下标（包含）；
end : 可选，结束下标（不包含），当结束小标不存在时，默认最后
*/
let a = [1,2,3,4,5,6]
let b = a.slice(2,4) //[3,4]
let c = a.slice(4) //[5,6]
/*push()
1.改变现有的数组(包括长度)
2.末尾添加一个或多个元素，并返回新的长度。*/
let a = [1,2,3]
let l = a.push(4,5,6,7) // 7 返回新的长度
console.log(a) //[1,2,3,4,5,6,7]
/*unshift()
1.改变现有的数组(包括长度)
2.开头添加一个或多个元素，并返回新的长度。*/
let a = [3,4,5]
let l = a.unshift(1,2) // 5 返回新的长度
console.log(a) //[1,2,3,4,5]
/*splice(index,howMany,item1,...itemN)
1.改变现有的数组(包括长度)
2.数组中添加/删除项目，然后返回被删除的‘元素组成的新数组’。
3.index : 必填，添加/删除元素的下标
howMany : 必填，要删除元素的数量，为0，不会删除元素
item.. : 选填，向数组的index下标处添加新的元素*/
let a = [1,2,3,4,5]
let b = a.splice(2,2,'ss')
console.log(b) // [3,4] 返回被删除的元素组成的新数组
console.log(a) // [1,2,'ss',5]
/*pop()
1.改变现有的数组(包括长度)
2.删除数组的最后一个元素，并返回其值*/
let a = [1,2,3]
let b = a.pop() // 3
console.log(a) // [1,2]
let c = a.pop() // 2
console.log(a) //[1]
let d = a.pop() //1
console.log(a) //[]
let e = a.pop() // undefined （这时数组已经空了，不会改变数组，返回undefined值）
console.log(a) //[]
/*shif()
1.改变现有的数组(包括长度)
2.删除数组的第一个元素，并返回其值*/
let a = [1,2,3]
let b = a.shift() // 1
console.log(a) // [2,3]
let c = a.shift() // 2
console.log(a) //[3]
let d = a.shift() //3
console.log(a) // []
let e = a.shift() //undefined （这时数组已经空了，不会改变数组，返回undefined值）
console.log(a) // []
/*sort(sortby)
1.改变现有的数组(不包括长度)
2.仅仅是对数组的元素进行排序，是对数组的引用，返回的还是原数组；
3.sortby : 可选，规定排序规则，必须是函数，该函数接收两个参数a和b
注意：@1.如果使用时没有传入sortby,将按照字符编码顺序对数组中的元素进行排序，且元素都应该转换成字符串
@2.sortby使用，比较a和b，如果a < b ,返回小于0的值，a排在b前，a = b ,返回0，a>b 返回 大于0的值*/
//数字排序
let a = [3,2,6,7,1,4,5]
let sortNumber = function(a,b){
return a-b
}
a.sort(sortNumber) //[1,2,3,4,5,6,7]
//默认字符编码排序 (排的是字符串的首字母)
let a = ['s','aa','ddy','hello','world']
a.sort() //["aa", "ddy", "hello", "s", "world"]
/*reverse()
1.改变现有的数组（不包括长度）
2.颠倒数组中元素的顺序*/
let a = [1,2,3,4,5,6,7]
a.reverse() //[7,6,5,4,3,2,1]
/*join(separator)
1.不会改变现有的数组
2.不带separaor参数时，仅仅是将数组中的所有元素放入一个字符串中，并返回结果
3.带有separaor参数时，同时会通过指定的separator(分隔符)分隔元素，在返回结果*/
let a = [1,2,3,4,5,6]
let b = a.join() // "1,2,3,4,5,6"
let c = a.join('-') // "1-2-3-4-5-6"
let d = a.join(' ') // "1 2 3 4 5 6" 空格符
console.log(a) // [1,2,3,4,5,6]
/*toString()
1.不会改变现有的数组
2.把数组转换为字符串，并返回结果*/
let a = [1,2,3,4,5]
let b = a.toString() // 1,2,3,4,5
let c = a.join();
console.log(b === c) //true
//========================================================
const arr = [
{name : 'name1',author:'aaa'},
{name : 'name2',author:'abb'},
{name : 'javascript shishi',author:'acc'},
{name : 'javascript 金翠',author:'add'},
];
/*forEach()
arr.filter(function(item){
return item.name.match(/javascript/)
})
1.*/
/*map()
1.*/
/*filter()
1.*/
/*reduce()
1.*/
/*indexOf()
1.*/
作者：DonyK
链接：https://www.jianshu.com/p/dc99985e1d30
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。