vue调用数组_一起学Vuejs（八）----- 数组的方法

不积跬步，无以至千里；不积小流，无以成江海。

Vuejs语言基础

vue操作数组：

变异方法：会改变被调用的原始数组

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

let arrayPush = []

arrayPush.push(1)

arrayPush.push(3)

arrayPush.push(2)

console.log(arrayPush) //=> [1,3,2]

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

let arrayPop = [1, 2, 3, 6]

arrayPop.pop()

let arrayPopb = arrayShift.pop()

console.log(arrayPopb) //=> 6

console.log(arrayPop) //=> [1, 2, 3]

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

let arrayShift = [1, 2, 3, 6]

arrayShift.shift()

let b = arrayShift.shift()

console.log(b) //=> 2

console.log(arrayShift) //=> [2, 3, 6]

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

let arrayUnshift = [3, 6]

arrayUnshift.unshift(1)

console.log(arrayUnshift) //=> [1,3,6]

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

// splice(index,len,[item])

// index:数组开始下标

// len: 替换/删除的长度

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

// 删除：

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

var arrD = ['a', 'b', 'c', 'd'];

arrD.splice(1, 1);

console.log(arrD); //['a','c','d'];

//删除起始下标为1，长度为2的一个值(len设置2)

var arrD2 = ['a', 'b', 'c', 'd']

arrD2.splice(1, 2);

console.log(arrD2); //['a','d']

// 替换：

//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

var arrR = ['a', 'b', 'c', 'd'];

arrR.splice(1, 1, 'ttt');

console.log(arrR); //['a','ttt','c','d']

//替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

var arrR2 = ['a', 'b', 'c', 'd'];

arrR2.splice(1, 2, 'ttt');

console.log(arrR2); //['a','ttt','d']

// 添加：

//在下标为1处添加一项'ttt'

var arrA = ['a', 'b', 'c', 'd'];

arrA.splice(1, 0, 'ttt');

console.log(arrA); //['a','ttt','b','c','d']

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

let arrayReverse = [1, 9, 4, 2]

arrayReverse.sort()

console.log(arrayReverse) //=> [1, 2, 4, 9]

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

let arrayReverse = [1, 9, 4, 2]

arrayReverse.reverse()

console.log(arrayReverse) //=> [2, 4, 9, 1]

替换数组 ： 不会改变被调用的原始数组

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

let arrayFilter = [1, 9, 4, 2]

let arrayFilter2 = arrayFilter.filter(function (arrayFilter) {

return arrayFilter >= 2;

})

console.log(arrayFilter2); //[9, 4, 2]

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

let arrayConcat = [1, 9, 4, 2]

let arrayConcat2 = [6, 7, 8, 3]

let arrayConcat3 = arrayConcat.concat(arrayConcat2)

arrayConcat3.sort(function (a, b) {

return a - b;

})

console.log(arrayConcat3); //[1, 2, 3, 4, 6, 7, 8, 9]

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

//slice()接受一个或两个参数，即要返回项的起始和结束位置。当只给slice()传递一个参数时，该方法返回从该参数指定位置开始到当前数组末尾的所有项。

let arraySlice = [1, 2, 3, 4, 6, 7, 8, 9]

let arraySlice1 = arraySlice.slice(4)

let arraySlice2 = arraySlice.slice(3,6)

console.log(arraySlice); //[1, 2, 3, 4, 6, 7, 8, 9]

console.log(arraySlice1); //[6, 7, 8, 9]

console.log(arraySlice2); //[4, 6, 7]

其他

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

let stringNum = '1,2,3,4,5,6,7,8'

let arrayNum = stringNum.split(',')

console.log(arrayNum); // ["1", "2", "3", "4", "5", "6", "7", "8"]

set() 方法用于修改指定位置(索引)的值。

//set(要修改的对象，索引值，修改后的值)

let array = [1, 2, 3]

Vue.set(array, 0, 4)

console.log(array);