前端开发：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}}]}