17個vue常用的數組方法總結與實例演示

let arr = [1,2,3,4,5];
let str = arr.join(',');
console.log(str) // -> '1,2,3,4,5';

let arr = ['張三','李四','王五'];
let count = arr.push('馬六');
console.log(arr) // -> ['張三','李四','王五','馬六']
console.log(count) // -> 4
 
let item = arr.pop();
console.log(item) // -> 馬六;

let arr = ['張三','李四','王五'];
let item = arr.shift();
console.log(arr) // -> ['李四','王五']
console.log(item); // -> 張三
 
let count = arr.unshift('馬六');
 
console.log(arr) // -> ['馬六','李四','王五']
console.log(count) // -> 3

let arr = [1,2,3,4,5];
let arr1 = arr.reverse();
console.log(arr1) // -> [5,4,3,2,1]
console.log(arr) // -> [5,4,3,2,1]

let arr = [12,2,43,5,2,5];
console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5]
// 註意：通過上面的案例，你會發現 打印的數組和原數組比較還是有變化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有沒有達到我們想要的結果，這是為什麼呢？
// 因為排序是針對字符的排序，先使用數組的toString()方法轉為字符串，再逐位比較，3是大於12的，因為首位3>1，不要與Number型的數據排序混淆。
5.1那如果需要數值排序怎麼辦呢？
 
// 如果需要數值排序，sort(callback) 需要傳入一個回調涵數，該函數應該具有兩個參數，比較這兩個參數，然後返回一個用於說明這兩個值的相對順序的數字（a-b）；
例如：
let arr = [12,2,43,5,2,5];
console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

// 註意：slice（startIndex, endIndex）可以有兩個參數，startIndex為必選，表示從第幾位開始；endIndex為可選，表示到第幾位結束(不包含endIndex位)，省略表示到最後一位；startIndex和endIndex都可以為負數，負數時表示從最後一位開始算起，如-1表示最後一位。
let arr =  ['張三','李四','王五','馬六'];
console.log(arr.slice(1,3)); // -> ['李四', '王五']
console.log(arr) // -> ['張三','李四','王五','馬六']; 原數組是沒有改變的。

// 註意：splice(start,num,val1,val2,...); 所有參數全部可選。和 slice 相比 splice 是會改變原數組的。
// start 是開始位置,可以為負數，-1就代表從最後一位開始，num代表要刪除或者替換的長度，不能為負數。
let arr = ['張三','李四','王五','馬六'];
console.log(arr.splice(2,1)) // -> ['王五']
console.log(arr) // -> ['張三','李四','馬六']
 
let arr = ['張三','李四','王五','馬六'];
console.log(arr.splice(2,1,'七郎')) // -> ['王五'] 
console.log(arr) // -> ['張三', '李四', '七郎', '馬六']

let arr = [1,2,3,4,5,6];
console.log(arr.toString()) // -> '1,2,3,4,5,6'
// 註意：沒有參數。

// 註意：indexOf(value, start);value為要查詢的數據；start為可選，表示開始查詢的位置，當start為負數時，從數組的尾部向前數；如果查詢不到value的存在，則方法返回-1
 
let arr = ['張三','李四','王五','馬六'];
console.log(arr.indexOf('李四')) // -> 1
console.log(arr.indexOf('李四',2)) // -> -1
10.forEach()
ES5新增的方法，用來遍歷數組，沒有返回值，

// 註意：forEach(callback);callback默認有三個參數，分別為value(遍歷到的數組的數據)，index(對應的索引)，self(數組自身)。
let arr = ['張三','李四','王五','馬六']
let a = arr.forEach((item,index,self)=>{
    console.log(value + "--" + index + "--" + (arr === self));
})
// 打印結果為：
// 張三--0--true
// 李四--1--true
// 王五--2--true
// 馬六--3--true
console.log(a);  // -> undefined---forEach沒有返回值
//該方法為遍歷方法，不會修改原數組

//註意：map(callback);callback默認有三個參數，分別為value，index，self。跟上面的forEach()的參數一樣
let arr = ['張三','李四','王五','馬六'];
let arr1 = arr.map(item => {
    return '你好：'+item
})
console.log(arr1) // -> ['你好：張三', '你好：李四', '你好：王五', '你好：馬六']

// 註意：filter(callback);callback默認有三個參數，分別為value，index，self。
let arr = [1,2,3,4,5,6];
let arr1 = arr.filter((value,index,self)=>{
    console.log(item) // -> 1,2,3,4,5,6
    console.log(index) // -> 0,1,2,3,4,5
    console.log(self) // -> [1,2,3,4,5,6]
    return item > 3
})
 
console.log(arr1) // -> [4,5,6]

let arr = ['張三','李四','王五','馬六'];
let str = arr.find(item => item == '李四');
console.log(str); // -> '李四'

let arr = ['張三','李四','王五','馬六'];
let index = arr.findIndex(item => item == '李四');
console.log(index); // -> 1;

// 註意： every()接收一個回調函數作為參數，這個回調函數需要有返回值，every(callback);callback默認有三個參數，分別為value，index，self。
let arr = [1,2,3,4,5,6];
let bool = arr.every(item => item > 0);
console.log(bool); // -> true;
 
let bool = arr.every(item => item > 3);
console.log(bool); // -> false;

//註意： some()接收一個回調函數作為參數，這個回調函數需要有返回值，some(callback);callback默認有三個參數，分別為value，index，self。
let arr = [1,2,3,4,5,6];
let bool = arr.some(item => item > 3);
console.log(bool) // -> true;
 
let bool = arr.some(item => item > 6);
console.log(bool) // -> false;

// 註意：　參數：reduce()接收一個或兩個參數：第一個是回調函數，表示在數組的每一項上調用的函數；第二個參數（可選的）作為歸並的初始值，被回調函數第一次執行時的第一個參數接收。 reduce(callback,initial);callback默認有四個參數，分別為prev，now，index，self。 callback返回的任何值都會作為下一次執行的第一個參數。 如果initial參數被省略，那麼第一次迭代發生在數組的第二項上，因此callback的第一個參數是數組的第一項，第二個參數就是數組的第二項。
 
let arr = [10,20,30,40,50];
let sum = arr.reduce((prev,now) => prev+now)
 
console.log(sum); // -> 150;
 
let sum = arr.reduce((prev,now) => prev+now,110)
 
console.log(sum)