JavaScript 数组遍历方法的对比
一些数组的遍历方法
for
for循环是最传统的语句，定义一个变量i为索引，用来遍历找到位置
var arr = [1, 2, 3, 4]
for(var i = 0, length = arr.length; i < length; i++){
console.log(arr[i])
}
// 得到: 1 2 3 4
forEach
是一个数组方法，把一个函数套用在一个数组中的每个元素上，为每个数组元素执行callback函数,只能用于数组,遍历一个数组让数组每个元素做一件事情
var arr = [1, 2, 3, 4]
arr.forEach(function(item) {
console.log(item);
})
// 得到: 1 2 3 4
for in
一般会用for in来遍历对象属性的,使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下
var obj = {
name: 'zs',
age: 20,
height: 185,
like: 'apple'
}
for (var key in obj) {
console.log(obj[key])
}
// 得到: zs 20 185 apple
filter
filter是一个内置的数组迭代方法，它接受一个（指代一个过滤条件的函数），该“函数”针对每个值进行调用，并返回一个符合该条件的数组。
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.filter(function (number) {
// 条件:大于 2 的数
return number > 2
})
console.log(newArr);
// 得到:[4, 5, 6]
map
map接收两个参数：callback 函数，会在 map 执行之后被触发。map 会返回一个新数组,如果你想基于一个原数组返回一个新数组，可以选择map
var arr = [1, 2, 3]
// 计算: 数组里每一项乘 2
var newArr = arr.map(a => a * 2)
console.log(newArr);
// 得到: 2 4 6
练习题
一、
var arr = [{ label: '男', value: 1 }, { label: '女', value: 0 }]
需求: {value:label}
function f(arr) {
const newObj = {} // 创建一个新对象存数据
// forEach方法循环数组,毁掉函数中的参数代表数组中的每一项
arr.forEach(obj => {
newObj[obj.value] = obj.label
})
}
var obj = f(arr);
console.log(obj)
// 得到: {0: '女', 1: '男'}
二、
var arr = [{ label: '男', value: 1 }, { label: '女', value: 0 }]
需求: arr2 = ['男', '女']
// 方法一:
function fn(arr) {
// 写代码，得到
return arr.map(obj => { // 回调函数中的参数代表数组中的每一项
return obj.label // 将每一项中的label值返回
})
}
// 方法二:
// function fn(arr) {
// // 写代码，得到
// const newArr = [] // 创建一个新数组
// arr.forEach(obj => { // forEach 遍历数组
// newArr.push(obj.label) // 将原数组中的每一个label值添加到新数组中
// })
// return newArr
// }
var arr2 = fn(arr);
console.log(arr2)
// 得到:['男', '女']
三、
pid为同级职位,pid为空""是第一级职位, "01"为第二级别,以此类推....
var data = [
{ id: "01", name: "张大大", pid: "", job: "项目经理" },
{ id: "02", name: "小亮", pid: "01", job: "产品leader" },
{ id: "03", name: "小美", pid: "01", job: "UIleader" },
{ id: "04", name: "老马", pid: "01", job: "技术leader" },
{ id: "05", name: "老王", pid: "01", job: "测试leader" },
{ id: "06", name: "老李", pid: "01", job: "运维leader" },
{ id: "07", name: "小丽", pid: "02", job: "产品经理" },
{ id: "08", name: "大光", pid: "02", job: "产品经理" },
{ id: "09", name: "小高", pid: "03", job: "UI设计师" },
{ id: "10", name: "小刘", pid: "04", job: "前端工程师" },
{ id: "11", name: "小华", pid: "04", job: "后端工程师" },
{ id: "12", name: "小李", pid: "04", job: "后端工程师" },
{ id: "13", name: "小赵", pid: "05", job: "测试工程师" },
{ id: "14", name: "小强", pid: "05", job: "测试工程师" },
{ id: "15", name: "小涛", pid: "06", job: "运维工程师" }
]
需求1. 返回一个数组, 找出与 小刘 处于统一领导下的同事(同事以对象形式填入数组中)
function fn(data, name) {
// 完成代码
const ind = data.findIndex(obj => {
return obj.name === name
})
const pid = data[ind].pid
const newArr = data.filter(obj => {
return obj.pid === pid
})
return newArr
}
var newArr = fn(data, '小刘')
console.log(newArr)
// 得到:
// [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
// {id:"11", name: "小华", pid:"04", job: "后端工程师"},
// {id:"12", name: "小李", pid:"04", job: "后端工程师"}]
需求2. 找出 小亮 的所有下属 (下属以对象形式)
function fn2(data, name) {
// 完成代码
const newArr = []
data.forEach(obj => {
if (obj.name === name) {
let id = obj.id
data.forEach(obj => {
if (obj.pid === id) {
newArr.push(obj)
}
})
}
})
return newArr
}
const arr = fn2(data, '小亮')
console.log(arr)
// 得到:
// {id:"07", name: "小丽", pid:"02", job: "产品经理"},
// {id:"08", name: "大光", pid:"02", job: "产品经理"},
四、
var obj = { label: '男', value: 1, age: 18 }
需求: arr = ['男', '1', '18']
function fn(obj) {
// 写代码位置
let arr = []
for (key in obj){
arr.push(obj[key])
}
return arr
}
var arr = fn(obj);
console.log(arr) // 所有的属性值取出来，保存在数组中
// 得到: ['男', '1', '18']
- 如有做的不好的地方,欢迎大家指出,下面是小巨人的仓库地址:
