一起学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);

 

博客借鉴：http://www.klxxb.com/index.php/archives/5.html