Vue操作數組的幾種常用方法小結
一、map方法 （返回一個新的數組 新數組中的元素是經過map函數內部代碼塊處理過的數據）
代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?return item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}結果：
注意點：map函數內部必須要有return 將數據返回 否則默認返回 undefined如果不加 return 如下：
代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}結果：
還有種省略寫法 箭頭函數省略return （不推薦這種寫法）代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=> item += 1 );
?? ??? ?console.log(newArray);
?? ?}結果：
可以看到和第一種帶return的相比 item=>{return item += 1; }
少了大括號 和 return 即 item=> item += 1
不推薦這種省略寫法
二、filter方法 （返回 符合過濾條件的元素組成的新數組）
代碼示例：
testFilter() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.filter(item=>{
?? ??? ?return item > 2 ;
?? ??? ?});
?? ??? ?console.log(newArray);結果：
類似于map函數 也需要有返回值 否則會返回一個空數組
例：
testFilter() {
let array = [1, 2, 3, 4];
let newArray = array.filter(item=>{
item > 2 ;
});
console.log(newArray);
}結果：
三、forEach方法 （無返回值 遍歷數組的每一個元素 適用于不處理數組下標或者不需要使用break的情況）
代碼示例：
結果：
注意 改變item值 并不會改變原數組中的元素值
例如：
testForEach() {
let array = [1, 2, 3, 4];
array.forEach(item => {
item = item +1;
});
console.log(array);
}結果：
并且forEach函數內 不支持 continue 和 break 操作 （普通for 循環(huán)支持這兩個操作）
直接語法校驗不通過
如果想在forEach中使用 continue 操作 可以 使用return 即可 （注意這里的return 功能和 continue一樣 是結束本次循環(huán)開始下一次循環(huán)）
testForEach() {
let array = [1, 2, 3, 4];
let newArray = [];
array.forEach(item => {
if(item ===2 ){
return;
}
newArray.push(item);
});
console.log(newArray);
}結果：
四、find方法 （返回符合條件的第一個元素 如果沒有符合條件的 返回undefined） findIndex方法（返回符合條件的第一個元素位置 如果沒有符合條件的返回 -1）
testFindAndFindIndex() {
let array = [1, 2, 3, 4];
let item1 = array.find(item=> item > 3);
console.log(item1);
let index1 = array.findIndex(item=> item > 3);
console.log(index1);
let item2 = array.find(item=> item > 4);
console.log(item2);
let index2 = array.findIndex(item=> item > 4);
console.log(index2);
}結果：
五、some方法 （如果有任何一個符合條件的元素 返回true 否則返回fasle） every方法（所有元素都符合條件才返回true 否則返回false）
代碼示例：
testSomeAndEvery() {
let array = [1, 2, 3, 4];
let flagSome = array.some(item=> item > 3);
console.log(flagSome);
let indexEvery = array.every(item=> item > 3);
console.log(indexEvery);
}結果：
六、includes方法
參數：數值 -------- 返回值：true/falseincludes()方法------是查看數組中是否存在這個元素，存在就返回true,不存在就返回false
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//對象合并，把后面對像合并到第一個對象，對象里相同的屬性會覆蓋
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}七、Array.from()方法
作用：將一個類數組對象或者可遍歷對象轉換成一個真正的數組
類數組對象：最基本的要求就是具體length屬性的對象；
類數組對象中必須具有l(wèi)ength屬性，用于指定數組的長度。如果沒有l(wèi)ength屬性，那么類數組轉換后的數組是一個空數組;
類數組對象的屬性名必須為數值型或者是字符串型的數字
Array.from還可以接收第二個參數，作用類似于數組的map方法，用來對數組中每個元素進行處理，然后再將處理后的值放入返回一個新的數組
let arr = [2,4,5,6,1,7]; let set = new Set(arr); console.log(Array.from(set,item=>item+1));// [3,5,6,7,2,8]
將Set結構的數據轉換為真正的數組
let arr = [2,4,5,6,1,7]; let set = new Set(arr); console.log(Array.from(set));// [2,4,5,6,1,7]
將字符串轉換為數組
let str = “hello world!” console.log(Array.from(str));//[“h”, “e”, “l(fā)”, “l(fā)”, “o”, " ", “w”, “o”, “r”, “l(fā)”, “d”, “!”]
函數可接受3個參數（后兩個參數可以沒有）：
第一個表示將被轉換的可迭代對象(如果只有一個參數就是把形參轉變成數組)
第二個是回調函數，將對每個數組元素應用該回調函數，然后返回新的值到新數組，
第三個是回調函數內this的指向。
let arr = [1, 2, 3];
let obj = {
double(n) {
return n * 2;
}
}
console.log(Array.from(arr, function (n){
return this.double(n);
}, obj)); // [2, 4, 6]//拿到選中的去重 hasMulitIds = Array.from(new Set(hasMulitIds))
到此這篇關于Vue操作數組的幾種常用方法小結的文章就介紹到這了,更多相關Vue操作數組內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章為大家詳細主要介紹了如何基于Vue實現本地消息隊列MQ, 讓消息延遲消費或者做緩存,文中的示例代碼講解詳細,需要的可以參考一下2024-02-02
這篇文章主要為大家詳細介紹了Vue3如何結合Vite4對項目進行性能優(yōu)化的相關配置,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
本篇文章主要介紹了vue.js實現單選框、復選框和下拉框示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
最近得到一個新需求，需要在Vue項目的移動端頁面上加上左右滑動效果，經過一番折騰，最終決定四月vue-touch。下面小編把實現代碼分享給大家，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05
關于Vue中的全局導航守衛(wèi)(beforeEach、afterEach)
這篇文章主要介紹了關于Vue中的全局導航守衛(wèi)(beforeEach、afterEach)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue實現按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3的vue-router超詳細使用,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue3+Vue-cli4項目中使用騰訊滑塊驗證碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11