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