前端開發：Vue中forEach() 的使用

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在前端開發中，經常會遇到一些通過遍歷循環來獲取想要的內容的情形，而且這種情形在開發中無所不在，那麼本篇博文就來分享一個比較常用又經典的知識點：forEach() 的使用。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"forEach() 是前端開發中操作數組的一種方法，主要功能是遍歷數組，其實就是for循環的升級版，該語句需要有一個回調函數作爲參數。回調函數的形參依次爲：1、value：遍歷數組的內容；2、index：對應數組的索引，3、array：數組自身。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#F5222D","name":"red"}}],"text":"在Vue項目中，標籤裏的循環使用v-for，方法裏面的循環使用forEach。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"一、forEach() 使用原理","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"forEach() 方法主要是用於調用數組的每個元素，並將元素傳遞給回調函數。需要注意的是: forEach() 方法對於空數組是不會執行回調函數的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"forEach：即Array.prototype.forEach，只有數組纔有的方法，相當於for循環遍歷數組。用法：arr.forEach(function(item,index,array){...}),其中回調函數有3個參數，item爲當前遍歷到的元素，index爲當前遍歷到的元素下標，array爲數組本身。forEach方法不會跳過null和undefined元素。比如數組[1，undefine，null，，2]中的四個元素都將被遍歷到，注意與map的區別。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"二、forEach() 語法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"array.forEach(function(currentValue, index, array), thisValue)","attrs":{}}],"attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"例子：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"array.forEach(function(item,index,array){ ... })","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"三、forEach() 其他相關內容","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"1、forEach()的continue和break：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"forEach() 自身不支持continue和break語句的，但是可以通過some和every來實現。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"2、forEach()與map的區別: ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"forEach()沒有返回值，性質上等同於for循環，對每一項都執行function函數。即map是返回一個新數組，原數組不變，而forEach是改變原數組。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"3、forEach()與for循環的對比：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"for循環步驟多比較複雜，forEach循環比較簡單好用，不易出錯。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"4、forEach()例子：","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"實例一：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"let array = [1, 2, 3, 4, 5, 6, 7];\n\narray.forEach(function (item, index) {\n\n    console.log(item); //輸出數組的每一個元素\n\n});","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"實例二：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"var array=[1, 2, 3, 4, 5];\n\narray.forEach(function(item, index, array){\n\n    array[index]=4 * item;\n\n});\n\nconsole.log(array);    //輸出結果：修改了原數組元素，爲每個元素都乘以4","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"實例三：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" \n\n            {{item.value}}{{item.checked}}\n\n          \n\n  handle(index, row) {\n\n        this.selectedCheck=[];\n\n        let a = this;\n\n        this.jurisdiction = true;\n\n        this.roleId = row.id;\n\n        this.$http.get(“/user/resources\", {\n\n            params: {userId: this.userId}\n\n          }).then((response) => {\n\n          a.searchContent = response.body;\n\n          a.searchContent.forEach(function (b) {\n\n            if(b[‘checked']){\n\n              a.selectedCheck.push(b.id);\n\n            }\n\n          })\n\n        })","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" ","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"實例四：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"var userList = new Array();\n\n        var data = {};\n\n        if (response.data.userList != null && response.data.userList.length > 0) {\n\n          response.data.userList.forEach((item, index) => {\n\n            data.a = item.a;\n\n            data.b = item.b;\n\n            data.arr1 = new Array();\n\n            data.arr1[0] = item.c;\n\n            data.arr1[1] = item.d;\n\n            data.e = item.e;\n\n            data.f = item.f;\n\n            data.arr2 = new Array();\n\n            data.arr2[0] = item.j;\n\n            data.arr2[1] = item.h;\n\n            userList.push(data);\n\n          });\n\n        }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"實例五：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"searchDept(keyWord, callback) {\n\n       if (keyWord) {\n\n        this.$service.data\n\n          .searchDepts({ data: { full_name: keyWord } })\n\n          .then(r => {\n\n            if (r.Success) {\n\n              let arr = [];\n\n              r.Data.Result.forEach(element => {\n\n                arr.push({\n\n                  id: element.work_id,\n\n                  value: element.full_name,\n\n                  dept: element\n\n                });\n\n              });\n\n              callback(arr);\n            }\n         });\n      }\n    },\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7d/7d35d2ef85431032c6d8425f9c6988e2.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上就是本章全部內容，歡迎關注三掌櫃的微信公衆號“程序猿by三掌櫃”，三掌櫃的新浪微博“三掌櫃666”，歡迎關注！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"三掌櫃的微信公衆號：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/63/631a648dce6d128e7d4a60e0051a53d3.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"三掌櫃的新浪微博：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2e/2e8b9aa98d7844456a61767cca826a9f.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}