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

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 < arr.length; i++) {
  newArr.push(arr[i].name);
  console.log(newArr);
}
//  ['互联网服务应用', '互联网人员应用', '外网应用', '内网应用']

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: '外网应用'},
 ];