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.js實現被選中狀態(tài)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊引用信息。引用信息會被注冊在父組件上的$refs對象上，下面來看看文章的詳細內容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
ElementPlus的el-upload組件使用方式(圖片上傳)
文章詳細介紹了ElementPlus的el-upload組件,涵蓋了基本用法、關鍵屬性、文件限制、顯示設置以及常見問題的解決方案,通過示例和最佳實踐建議,幫助開發(fā)者實現靈活的圖片上傳功能2026-01-01
這篇文章主要為大家詳細介紹了vue選項卡切換登錄方式小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
文章介紹了四種在Vue中實現復制文本到剪貼板的方法：1.使用navigator.clipboard.writeText（需要在安全域下使用）；2.使用即將廢棄的execCommand方法；3.通過引入vue-clipboard2庫；4.使用clipboard.js庫,推薦使用第一種或第三種方法2025-10-10
Vue 3的data()函數是選項式 API 中聲明響應式數據的入口,核心是通過返回對象配合 Proxy 實現響應式,接下來通過本文介紹VUE3 data()函數的相關知識,感興趣的朋友跟隨小編一起看看吧2025-12-12
本篇文章主要介紹了Vue 2.0的數據依賴實現原理代碼簡析，主要從初始化的數據層面上分析了Vue是如何管理依賴來到達數據的動態(tài)響應，有興趣的可以了解一下2017-07-07
vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03