ToB企服应用市场:ToB评测及商务社交产业平台

标题: 关于Vue前端js循环遍历数组的几种方法： [打印本页]
作者: 反转基因福娃    时间: 2024-6-13 03:27
标题: 关于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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4