快捷導(dǎo)航

Vue中foreach/map/filter的使用及說明

更新時(shí)間：2026年03月17日 08:59:57 作者：仰.

foreach、map和filter是JavaScript中用于數(shù)組操作的三個(gè)方法,foreach用于循環(huán)遍歷數(shù)組并對(duì)每個(gè)元素進(jìn)行操作,不會(huì)改變?cè)瓟?shù)組,沒有返回值,map也用于遍歷數(shù)組,但會(huì)返回一個(gè)新的數(shù)組,不會(huì)改變?cè)瓟?shù)組,每次遍歷都有返回值,filter用于過濾數(shù)組,根據(jù)條件返回一個(gè)新的數(shù)組

1.foreach—用來循環(huán)遍歷數(shù)組

(會(huì)改變?cè)瓟?shù)組，可以對(duì)每一個(gè)數(shù)據(jù)進(jìn)行同一個(gè)操作沒有返回值）不能直接循環(huán)數(shù)組包含對(duì)象。

<script>
export default {
  data() {
    return {
      Array: [1, 2, 3, 4, 5, 6],
    };
  },
  mounted() {
    let arr = [];
    this.Array.forEach((item, index, Array) => {
      //   console.log(arrayTest);
      console.log(item + "-" + index + "-" + Array);
      arr.push(item);
    });
    console.log(arr); //(6) [1, 2, 3, 4, 5, 6]0: 11: 22: 33: 44: 55: 6length: 6[[Prototype]]: Array(0)
  },
};
</script>

2.map ——循環(huán)遍歷數(shù)組

（會(huì)返回一個(gè)新的數(shù)組，不會(huì)改變?cè)瓟?shù)組，每一次遍歷都會(huì)有返回值，最后所有的返回值組合成為最終的結(jié)果）可以循環(huán)數(shù)組包含對(duì)象。其中三個(gè)參數(shù)也是（元素，下標(biāo)，原數(shù)組）。

<script>
export default {
  data() {
    return {
      Array: [1, 2, 3, 4, 5, 6],
    };
  },
  mounted() {
    let arrayTest = this.Array.map((item, index, array) => {
      return item - 1 + "-" + index + "-" + array;
    });
    console.log(arrayTest);
    let arrayTest2 = this.arrayObject.map((item) => {
      return item;
    });
    console.log(arrayTest2);
  },
};
</script>

3.filter是用來過濾篩選的。(有返回值)

<script>
export default {
  data() {
    return {
      Array: [1, 2, 3, 4, 5, 6],
      arrayObject: [
        { name: "zhangsan", age: "19" },
        { name: "lisi", age: "20" },
      ],
    };
  },
  mounted() {
    let result = this.Array.filter((item) => {
      return item > 2;
    });
    console.log(result);//3、4、5、6
  },
};
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue源碼中一些util函數(shù)
這篇文章主要介紹了Vue源碼中一些util函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能
在一個(gè)列表展示頁面上，使用了表格組件，原有組件本身不支持拖拽功能，需求要求在列表的基礎(chǔ)上支持行拖拽排序，因此引入了www.sortablejs.com插件，接下來通過本文給大家講解Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能,需要的朋友可以參考下
2022-10-10
vue使用recorder-core.js實(shí)現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實(shí)現(xiàn)錄音功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫一個(gè)童年經(jīng)典游戲—坦克大戰(zhàn)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧
2022-03-03
解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or
這篇文章主要給大家介紹了關(guān)于解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or?render?function的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
vite如何build時(shí)清除console.log()問題
這篇文章主要介紹了vite如何build時(shí)清除console.log()問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue中tinymce的使用實(shí)例詳解
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下
2022-11-11
SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
Vue Router動(dòng)態(tài)路由經(jīng)典問題next({?...to,?replace:?true?
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由經(jīng)典問題next({?...to,replace:true})解決方案的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue Router動(dòng)態(tài)路由具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2026-03-03