Vue操作數(shù)組的幾種常用方法小結(jié)
一、map方法 （返回一個新的數(shù)組 新數(shù)組中的元素是經(jīng)過map函數(shù)內(nèi)部代碼塊處理過的數(shù)據(jù)）
代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?return item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}結(jié)果：
注意點：map函數(shù)內(nèi)部必須要有return 將數(shù)據(jù)返回 否則默認返回 undefined如果不加 return 如下：
代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}結(jié)果：
還有種省略寫法 箭頭函數(shù)省略return （不推薦這種寫法）代碼示例：
testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=> item += 1 );
?? ??? ?console.log(newArray);
?? ?}結(jié)果：
可以看到和第一種帶return的相比 item=>{return item += 1; }
少了大括號 和 return 即 item=> item += 1
不推薦這種省略寫法
二、filter方法 （返回 符合過濾條件的元素組成的新數(shù)組）
代碼示例：
testFilter() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.filter(item=>{
?? ??? ?return item > 2 ;
?? ??? ?});
?? ??? ?console.log(newArray);結(jié)果：
類似于map函數(shù) 也需要有返回值 否則會返回一個空數(shù)組
例：
testFilter() {
let array = [1, 2, 3, 4];
let newArray = array.filter(item=>{
item > 2 ;
});
console.log(newArray);
}結(jié)果：
三、forEach方法 （無返回值 遍歷數(shù)組的每一個元素 適用于不處理數(shù)組下標或者不需要使用break的情況）
代碼示例：
結(jié)果：
注意 改變item值 并不會改變原數(shù)組中的元素值
例如：
testForEach() {
let array = [1, 2, 3, 4];
array.forEach(item => {
item = item +1;
});
console.log(array);
}結(jié)果：
并且forEach函數(shù)內(nèi) 不支持 continue 和 break 操作 （普通for 循環(huán)支持這兩個操作）
直接語法校驗不通過
如果想在forEach中使用 continue 操作 可以 使用return 即可 （注意這里的return 功能和 continue一樣 是結(jié)束本次循環(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);
}結(jié)果：
四、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);
}結(jié)果：
五、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);
}結(jié)果：
六、includes方法
參數(shù)：數(shù)值 -------- 返回值：true/falseincludes()方法------是查看數(shù)組中是否存在這個元素，存在就返回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()方法
作用：將一個類數(shù)組對象或者可遍歷對象轉(zhuǎn)換成一個真正的數(shù)組
類數(shù)組對象：最基本的要求就是具體length屬性的對象；
類數(shù)組對象中必須具有l(wèi)ength屬性，用于指定數(shù)組的長度。如果沒有l(wèi)ength屬性，那么類數(shù)組轉(zhuǎn)換后的數(shù)組是一個空數(shù)組;
類數(shù)組對象的屬性名必須為數(shù)值型或者是字符串型的數(shù)字
Array.from還可以接收第二個參數(shù)，作用類似于數(shù)組的map方法，用來對數(shù)組中每個元素進行處理，然后再將處理后的值放入返回一個新的數(shù)組
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結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換為真正的數(shù)組
let arr = [2,4,5,6,1,7]; let set = new Set(arr); console.log(Array.from(set));// [2,4,5,6,1,7]
將字符串轉(zhuǎn)換為數(shù)組
let str = “hello world!” console.log(Array.from(str));//[“h”, “e”, “l(fā)”, “l(fā)”, “o”, " ", “w”, “o”, “r”, “l(fā)”, “d”, “!”]
函數(shù)可接受3個參數(shù)（后兩個參數(shù)可以沒有）：
第一個表示將被轉(zhuǎn)換的可迭代對象(如果只有一個參數(shù)就是把形參轉(zhuǎn)變成數(shù)組)
第二個是回調(diào)函數(shù)，將對每個數(shù)組元素應(yīng)用該回調(diào)函數(shù)，然后返回新的值到新數(shù)組，
第三個是回調(diào)函數(shù)內(nèi)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))
到此這篇關(guān)于Vue操作數(shù)組的幾種常用方法小結(jié)的文章就介紹到這了,更多相關(guān)Vue操作數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用vue.js實現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實現(xiàn)被選中狀態(tài)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊引用信息。引用信息會被注冊在父組件上的$refs對象上，下面來看看文章的詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
ElementPlus的el-upload組件使用方式(圖片上傳)
文章詳細介紹了ElementPlus的el-upload組件,涵蓋了基本用法、關(guān)鍵屬性、文件限制、顯示設(shè)置以及常見問題的解決方案,通過示例和最佳實踐建議,幫助開發(fā)者實現(xiàn)靈活的圖片上傳功能2026-01-01
這篇文章主要為大家詳細介紹了vue選項卡切換登錄方式小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
文章介紹了四種在Vue中實現(xiàn)復(fù)制文本到剪貼板的方法：1.使用navigator.clipboard.writeText（需要在安全域下使用）；2.使用即將廢棄的execCommand方法；3.通過引入vue-clipboard2庫；4.使用clipboard.js庫,推薦使用第一種或第三種方法2025-10-10
Vue 3的data()函數(shù)是選項式 API 中聲明響應(yīng)式數(shù)據(jù)的入口,核心是通過返回對象配合 Proxy 實現(xiàn)響應(yīng)式,接下來通過本文介紹VUE3 data()函數(shù)的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2025-12-12
Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達數(shù)據(jù)的動態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07
vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03