小工具知识网

当前位置: 首页 > 行业知识 > 关于Vue前端js循环遍历数组的几种方法:

行业知识

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

2026-11-07 09:28:52 来源:互联网转载

Vue中关于前端js循环遍历的几种方法:

1. for  遍历数组

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'},  { id: 'internal_app',name: '内网应用'}, ];var newArr = [];for (let i = 0; i   

2. for  of 遍历数组

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'},  { id: 'internal_app',name: '内网应用'}, ];for (const i of arr) {  console.log('i', i);}// i {id: 'internet_server', name: '互联网服务应用'}// i {id: 'internet_person', name: '互联网人员应用'}// i {id: 'outer_app', name: '外网应用'}// i {id: 'internal_app', name: '内网应用'}

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

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'},  { id: 'internal_app',name: '内网应用'}, ];var newArr = [];arr.forEach(item => {  newArr.push(item.name);});// ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

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

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'},  { id: 'internal_app',name: '内网应用'}, ];写法一:var newArr = [];arr.map(item => {  newArr.push(item.name);});写法二:var newArr = arr.map(item => {  return (item = item.name);});console.log(newArr);// ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

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

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'},  { id: 'internal_app',name: '内网应用'}, ];var newArr = arr.filter(item => {  return item.name !== '内网应用';});console.log(newArr);//[ { id: 'internet_server', name: '互联网服务应用'}, { id: 'internet_person', name: '互联网人员应用'}, {id: 'outer_app', name: '外网应用'},]

6.  Object.keys()遍历​​​​​​​   返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)

let arr = [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'}, ];方法一:var newArr = [];Object.keys(arr).forEach(item => {  newArr.push(arr[item]);  console.log(arr[item]);});方法二:console.log(Object.values(arr));console.log(newArr);// [  { id: 'internet_server', name: '互联网服务应用'},  { id: 'internet_person', name: '互联网人员应用'},  {id: 'outer_app', name: '外网应用'}, ];

上一篇:贪心算法介绍

下一篇:怎么打开维修服务器?