17個vue常用的數(shù)組方法總結(jié)與實(shí)例演示

更新時間：2022年12月10日 15:11:13 作者：小刺猬_0421

這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下

1. join()

join（’參數(shù)‘）把數(shù)組的元素以傳入的參數(shù)為分割符，轉(zhuǎn)換成字符串。

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

2.push()和pop()

push(): 可以接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組末尾，并返回修改后數(shù)組的長度。
pop()：數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的 length 值，然后返回移除的項(xiàng)。

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

3.shift() 和 unshift()

shift()：刪除原數(shù)組第一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined 。
unshift:將參數(shù)添加到原數(shù)組開頭，并返回?cái)?shù)組的長度。

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

4.reverse();

將數(shù)組的數(shù)據(jù)進(jìn)行反轉(zhuǎn)，并且返回反轉(zhuǎn)后的數(shù)組，會改變原數(shù)組

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]

5.sort();

對數(shù)組內(nèi)的數(shù)據(jù)進(jìn)行排序(默認(rèn)為升序)，并且返回排過序的新數(shù)組，會改變原來的數(shù)組

let arr = [12,2,43,5,2,5];
console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5]
// 注意：通過上面的案例，你會發(fā)現(xiàn) 打印的數(shù)組和原數(shù)組比較還是有變化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有沒有達(dá)到我們想要的結(jié)果，這是為什么呢？
// 因?yàn)榕判蚴轻槍ψ址呐判?，先使用?shù)組的toString()方法轉(zhuǎn)為字符串，再逐位比較，3是大于12的，因?yàn)槭孜?>1，不要與Number型的數(shù)據(jù)排序混淆。
5.1那如果需要數(shù)值排序怎么辦呢？
 
// 如果需要數(shù)值排序，sort(callback) 需要傳入一個回調(diào)涵數(shù)，該函數(shù)應(yīng)該具有兩個參數(shù)，比較這兩個參數(shù)，然后返回一個用于說明這兩個值的相對順序的數(shù)字（a-b）；
例如：
let arr = [12,2,43,5,2,5];
console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

6.slice();

截取指定位置的數(shù)組，并且返回截取的數(shù)組，不會改變原數(shù)組

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

7.splice();

向數(shù)組中添加，或從數(shù)組刪除，或替換數(shù)組中的元素，然后返回被刪除/替換的元素。

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

8.toString();

將數(shù)組轉(zhuǎn)換成字符串，類似于沒有參數(shù)的join()。該方法會在數(shù)據(jù)發(fā)生隱式類型轉(zhuǎn)換時被自動調(diào)用，如果手動調(diào)用，就是直接轉(zhuǎn)為字符串。不會改變原數(shù)組

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

9.indexOf();

根據(jù)指定的數(shù)據(jù)，從左向右，查詢在數(shù)組中出現(xiàn)的位置，如果不存在指定的數(shù)據(jù)，返回-1，找到了指定的數(shù)據(jù)返回該數(shù)據(jù)的索引

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

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

11.map()；

1.同forEach功能；
2.map的回調(diào)函數(shù)會將執(zhí)行結(jié)果返回，最后map將所有回調(diào)函數(shù)的返回值組成新數(shù)組返回。

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

12.filter();

1.同forEach功能；2.filter的回調(diào)函數(shù)需要返回布爾值，當(dāng)為true時，將本次數(shù)組的數(shù)據(jù)返回給filter，最后filter將所有回調(diào)函數(shù)的返回值組成新數(shù)組返回（此功能可理解為“過濾”）。

// 注意：filter(callback);callback默認(rèn)有三個參數(shù)，分別為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]

13.find();

數(shù)組的循環(huán)，查找到符合條件的值并且打斷循環(huán)返回找到的值；

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

14.findIndex();

數(shù)組的循環(huán)，查找到符合條件的索引并且打斷循環(huán)返回找到的索引值

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

15.every();

判斷數(shù)組中每一項(xiàng)是否都滿足條件，只有所有項(xiàng)都滿足條件，才會返回true。

// 注意： every()接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)需要有返回值，every(callback);callback默認(rèn)有三個參數(shù)，分別為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;

16.some();

判斷數(shù)組中是否存在滿足條件的項(xiàng)，只要有一項(xiàng)滿足條件，就會返回true。否側(cè)就會返回false

//注意： some()接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)需要有返回值，some(callback);callback默認(rèn)有三個參數(shù)，分別為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;

17.reduce();

數(shù)組的第一項(xiàng)開始，逐個遍歷到最后，迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個最終返回的值。

// 注意：　參數(shù)：reduce()接收一個或兩個參數(shù)：第一個是回調(diào)函數(shù)，表示在數(shù)組的每一項(xiàng)上調(diào)用的函數(shù)；第二個參數(shù)（可選的）作為歸并的初始值，被回調(diào)函數(shù)第一次執(zhí)行時的第一個參數(shù)接收。 reduce(callback,initial);callback默認(rèn)有四個參數(shù)，分別為prev，now，index，self。 callback返回的任何值都會作為下一次執(zhí)行的第一個參數(shù)。 如果initial參數(shù)被省略，那么第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上，因此callback的第一個參數(shù)是數(shù)組的第一項(xiàng)，第二個參數(shù)就是數(shù)組的第二項(xiàng)。
 
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)

本文為大家講解了17個vue常用的數(shù)組方法總結(jié)與實(shí)例演示，包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過濾，VUE數(shù)組查詢等功能，更多關(guān)于VUE數(shù)組操作請查看下面的相關(guān)鏈接

您可能感興趣的文章: