关于Vue前端js循环遍历数组的几种方法：

Vue中关于前端js循环遍历的几种方法：
1. for  遍历数组

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6.   { id: 'internal_app',name: '内网应用'},
7. ];
8. var newArr = [];
9. for (let i = 0; i < arr.length; i++) {
10.   newArr.push(arr[i].name);
11.   console.log(newArr);
12. }
13. //  ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

复制代码

2. for  of 遍历数组

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6.   { id: 'internal_app',name: '内网应用'},
7. ];
8. for (const i of arr) {
9.   console.log('i', i);
10. }
11. // i {id: 'internet_server', name: '互联网服务应用'}
12. // i {id: 'internet_person', name: '互联网人员应用'}
13. // i {id: 'outer_app', name: '外网应用'}
14. // i {id: 'internal_app', name: '内网应用'}

复制代码

3. forEach() 遍历遍历数组    没有返回值    原数组不会改变

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6.   { id: 'internal_app',name: '内网应用'},
7. ];
8. var newArr = [];
9. arr.forEach(item => {
10.   newArr.push(item.name);
11. });
12. // ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

复制代码

4. map() 遍历数组   有返回值,返回一个新的数组  但不改变原数组的值

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6.   { id: 'internal_app',name: '内网应用'},
7. ];
9. 写法一：
10. var newArr = [];
11. arr.map(item => {
12.   newArr.push(item.name);
13. });
16. 写法二：
17. var newArr = arr.map(item => {
18.   return (item = item.name);
19. });
20. console.log(newArr);
21. // ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

复制代码

5. filter() 遍历过滤数组 有返回值,返回一个新的数组  但不改变原数组的值

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6.   { id: 'internal_app',name: '内网应用'},
7. ];
9. var newArr = arr.filter(item => {
10.   return item.name !== '内网应用';
11. });
12. console.log(newArr);
13. //
14. [
15. { id: 'internet_server', name: '互联网服务应用'},
16. { id: 'internet_person', name: '互联网人员应用'},
17. {id: 'outer_app', name: '外网应用'},
18. ]

复制代码

6.  Object.keys()遍历​​​​​​​   返回一个数组,包罗对象自身的(不含继承的)全部可罗列属性(不含Symbol属性)

1. let arr =
2. [
3.   { id: 'internet_server', name: '互联网服务应用'},
4.   { id: 'internet_person', name: '互联网人员应用'},
5.   {id: 'outer_app', name: '外网应用'},
6. ];
8. 方法一：
9. var newArr = [];
10. Object.keys(arr).forEach(item => {
11.   newArr.push(arr[item]);
12.   console.log(arr[item]);
13. });
15. 方法二：
16. console.log(Object.values(arr));
18. console.log(newArr);// [
19.   { id: 'internet_server', name: '互联网服务应用'},
20.   { id: 'internet_person', name: '互联网人员应用'},
21.   {id: 'outer_app', name: '外网应用'},
22. ];

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。