一. 更新数组
注
以下API最大的好处是可以被Vue的watch和计算属性监视到,可以方便在watch或者computed的操作。
1. push(Element): 向数组末尾添加元素(更新原数组),并且会返回更新后数组的长度
例
let arr = ['first','second','third','last']
arr.push('new');
console.log(arr);
result----->Array(5)
0: "first"
1: "second"
2: "third"
3: "last"
4: "new"
length: 5
2.,pop(Element): 删除数组的最后一个元素(更新原数组),并且会返回更新后数组的长度
例
let arr = ['first','second','third','last']
arr.pop();
console.log(arr);
result------Array(3)
['first', 'second', 'third']
0: "first"
1: "second"
2: "third"
length: 3
3. shift(Element): 删除数组的第一个元素(更新原数组),并且会返回更新后数组的长度。
例
let arr = ['first','second','third','last']
arr.shift('newFirst');
console.log(arr);
result------Array(3)
['second', 'third', 'last']
0: "second"
1: "third"
2: "last"
length: 3
shift(Element)也可以用在数组对象上,可以删除数组中第一个对象(pop可以删除数组中最后一个对象)
例
let arr = [{name:'张三',age:18},{name:'李四',age:20}]
arr.shift();
console.log(arr);
result------ [{…}]
0: {name: '张三', age: 18}
length: 1
4 unshift(Element):向数组的开头添加一个或多个元素(更新原数组),并且会返回更新后数组的长度。注意这里的添加可以是多种类型的!
例
let arr = ['first','second','third','last']
arr.unshift(4,[1,2,1],' ','char');
console.log(arr);
result------ Array(8)
0: 4
1: (3) [1, 2, 1]
2: " "
3: "char"
4: "first"
5: "second"
6: "third"
7: "last"
length: 8
5.splice(start,count,newElement):从指定索引号对应元素开始删除count个元素,并在删除元素的后面添加新元素。
例
let arr = ['first','second','third','last']
arr.splice(2,1,'newEle');
console.log(arr);
result------ Array(4)
0: "first"
1: "second"
2: "newEle"
3: "last"
length: 4
6. reverse():颠倒原数组元素位置(更新原数组),并且会返回更新后数组的长度。我个人用的时候理解就是升序变降序,降序变升序,大佬们勿喷qaq
例
let arr = ['first','second','third','last']
arr.reverse();
console.log(arr);
result------ Array(4)
(4) ['last', 'third', 'second', 'first']
0: "last"
1: "third"
2: "second"
3: "first"
length: 4
7.Vue.set(target,propertyName/index,value); 修改或添加data中的元素也可以写成vm.$set(target,propertyName/index,value);
例
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
student: {
name: '小王',
age: 18,
}
},
mounted() {
Vue.set(this.student, 'age', '20')
}
});
result------>
学生姓名:小王
学生年龄:20