一起學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