Vue push() pop() shift().....

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

eg:数组中添加新元素

new Vue({data:{arr:  ['苹果','香蕉','橙子']},methods:{addData(){this.arr.push("石榴");}}})

运行结果为：
苹果，香蕉，橙子，石榴

pop() 方法用于删除并返回数组的最后一个元素。

eg:移除最后一个数组元素

new Vue({data:{arr:  ['苹果','香蕉','橙子']},methods:{moveData(){this.arr.pop();}}})

运行结果为：
苹果，香蕉

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

eg:从数组中移除元素

new Vue({data:{arr:  ['苹果','香蕉','橙子']},methods:{moveData(){this.arr.shift();}}})

运行结果为：
香蕉，橙子

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

eg:将新项添加到数组起始位置

new Vue({data:{arr:  ['苹果','香蕉','橙子']},methods:{addData(){this.arr.unshift("石榴","枇杷");}}})

运行结果：
石榴,枇杷,苹果，香蕉，橙子

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

splice(　index,　len,　[item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变原始数组）。

参数：index：数组开始下标

len：替换/删除的长度

item：替换的值，删除操作的话item为空

删除：

//删除起始下标为1，长度为1的一个值（len设置1，如果为0，则数组不变）

eg:删除

new Vue({data:{arr:  ['a','b','c','d']},methods:{moveData(){this.arr.splice(1,1);}}})

运行结果：
【‘a’,‘c’,‘d’】

替换：

new Vue({data:{arr:  ['a','b','c','d']},methods:{replaceData(){this.arr.splice(1,1,'ttt');}}})

运行结果：
[‘a’,‘ttt’,‘c’,‘d’]

添加：

new Vue({data:{arr:  ['a','b','c','d']},methods:{addData(){this.arr.splice(1,0,'ttt');}}})

运行结果：
[‘a’,‘ttt’,‘b’,‘c’,‘d’]

sort() 方法用于对数组的元素进行排序。
eg:排序

new Vue({data:{arr: [{"id":0,"title":"11111","cont":"99999"},{"id":1,"title":"22222","cont":"22222"},{"id":2,"title":"33333","cont":"33333"},{"id":3,"title":"44444","cont":"44444"},{"id":4,"title":"55555","cont":"55555"},{"id":5,"title":"66666","cont":"66666"},{"id":6,"title":"77777","cont":"77777"},{"id":7,"title":"77777","cont":"88888"}]},methods:{sortData(){this.list.sort((a,b)=>a.cont-b.cont);     }}})

运行结果：

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

new Vue({data:{arr: [{"id":0,"title":"11111","cont":"99999"},{"id":1,"title":"22222","cont":"22222"},{"id":2,"title":"33333","cont":"33333"},{"id":3,"title":"44444","cont":"44444"},{"id":4,"title":"55555","cont":"55555"},{"id":5,"title":"66666","cont":"66666"},{"id":6,"title":"77777","cont":"77777"},{"id":7,"title":"77777","cont":"88888"}]},methods:{reverserData(){this.list.reverse();}}})

运行结果：
翻转前：

翻转后：

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

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

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

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

Vue push() pop() shift().....相关推荐

Vue push() pop() shift().....
Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. eg:数组中添加新元素 new Vue({data:{arr: ['苹果','香蕉','橙子']},metho ...
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会 ...
vue2实现数组push/pop/shift/unshift方法重写
// 获取数组原型 const orginalPrototype = Array.prototype// 备份用来重新操作 const arrPrototype = Object.create(org ...
vue之push() pop() shift() unshift() splice() sort() reverse()等等
一.变更方法 Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. let arr = ['a', 'b', ' ...
java数组如何pop_Js数组的操作push,pop,shift,unshift等方法详细介绍
js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部 ...
push计算机语言,数组的操作push,pop,shift,unshift详解
JS中的数组提供了四个操作,以便让我们实现队列与堆栈! 小理论: 队列:先进先出堆栈:后进先出实现队列的方法: shift:从集合中把第一个元素删除,并返回这个元素的值. unshift: 在集合 ...
javascript学习之数组的使用一 push pop shift unshift 方法
push() 向数组的末尾添加一个或多个元素,返回数组的当前长度 pop() 从数组的末尾删除一个元素,返回删除的元素的值 unshift() 向数组的前端添加一个或多个元素,返回数组的当前长度 sh ...
js数组操作(push,pop,shift,unshift,slice,splice,concat,sort)
js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部 ...
js 数组操作的push pop shift unshift 等方法
1.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度. var arr = [1,2,3,4,5] arr.push(6)//添加一个元素 arr.push(7,8)//可以一次 ...

Vue push() pop() shift().....

Vue push() pop() shift().....相关推荐

最新文章

热门文章