9 vue.js 被观察数组的变异方法

vue.js 包装了被观察数组的变异方法

它们能触发视图更新 

demo=====

默认data中默认数组为 myArr=[1,2,3]

针对以下方法,返回值为对应展示:

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

 console.log('返回值是' + this.myArr.push(4))

==>返回值是4 , 原始数组改为[1,2,3,4]

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

  console.log('返回值是' + this.myArr.pop(4))

   console.log('返回值是' + this.myArr.pop())

==>返回值是3   ,原始数组改为[1,2]

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

   console.log('返回值是' + this.myArr.shift())

==> 返回值是1  , 原始数组改为[2,3]

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

console.log('返回值是' + this.myArr.unshift())

==> 返回值是3 , 原始数组是 [1,2,3]

   console.log('返回值是' + this.myArr.unshift(4))

==> 返回值是4 , 原始数组改为 [4,1,2,3]

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

splice( index, num , value)可通俗这么理解,splice有3个参数,第一个是index值 , 从0到n 【添加或者删除项目的位置,使用负数可从数组结尾处规定位置】, 第二个位置是要删除的项目数量。如果设置为 0,则不会删除项目。,第三个是需要添加的值

 console.log('返回值是' + this.myArr.splice(2,0,'ceshi'))  ,从index值为2开始, 删除 0个项目,添加ceshi

==>返回值是 '' ,空, 原始数组改为 [1,2,'ceshi' ,3]

   console.log('返回值是' + this.myArr.splice(2,1,'ceshi')) ,从index值为2 开始,删除1个项目,添加‘ceshi’

==》返回值是3 (被删除的值) , 原始数组改为[1 ,2, 'ceshi']

  console.log('返回值是' + this.myArr.splice(1,2,'ceshi'))  , 从index值为1 开始,删除2个项目,添加‘ceshi’

==>返回值是 2,3  (被删除的值) ,原始数组改为[1, 'ceshi']

 console.log('返回值是' + this.myArr.splice(1,2))  ,从index值为1 开始,删除2个项目,不添加任何 

==》返回值是 2,3(被删除的值) ,原始数组改为[1]

   console.log('返回值是' + this.myArr.splice(-1,1)) ,从倒数第几位开始,不是按照index值计算,比如删除第一个就是-1 ,删除倒数第二个就是 -2  ,  删除1个项目,不添加,

==》返回值是3 (被删除的值) 原始数组改为[1,2]

比如原始数组 arr =[ 1,2,3,4,5]

arr.splice (-1,3 ) ,当前倒数第一位开始,删除3个。 但是从当前位置开始,不够3 个。 则,只删除最后一个。 

返回值情况是

如果是从第三位开始删

arr =[ 1,2,3,4,5]

arr.splice (-3,3 ) 

 返回值是 [3,4,5 ],被删除的3个值。 这种情况我们不是太常见 。 通常都是删除最后一个。 

arr =[ 1,2,3,4,5]

arr.splice (-1,1 )

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

arr =[7,6,4, 1,3,3,5,8]
(8) [7, 6, 4, 1, 3, 3, 5, 8]
arr.sort((a,b) =>{ return a , b})
(8) [8, 5, 3, 3, 1, 4, 6, 7]
arr.sort((a,b) =>{ return b -a })
(8) [8, 7, 6, 5, 4, 3, 3, 1]
arr.sort((a,b) =>{ return a-b})
(8) [1, 3, 3, 4, 5, 6, 7, 8]

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

arr=[3,2,4,1,9]
(5) [3, 2, 4, 1, 9]
arr.reverse()
(5) [9, 1, 4, 2, 3]

 

其他

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

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

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

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

原文地址:https://www.cnblogs.com/maomao-Sunshine/p/11679844.html