javascript 中的那些遍历方法

老生常谈的问题，在面试和实战中都是高频点，我也是为了回忆和巩固才写这篇文章

数组中相关的：

for循环

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
for(let i = 0, len = objs.length; i<len; i++) {
  console.log(`obj[${i}]:`, objs[i])
}
//结果：
obj[0]: {name: "mary", age: 12}
obj[1]: {name: "lisa", age: 13}
obj[2]: {name: "luck", age: 14}

for of

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
for(let obj of objs) {
  console.log(obj)
}
//output:
{ name: 'mary', age: 12 }
{ name: 'lisa', age: 13 }
{ name: 'luck', age: 14 }

for in

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
for(let idx in objs) {
  console.log(idx, objs[idx])
}
//output:
0 { name: 'mary', age: 12 }
1 { name: 'lisa', age: 13 }
2 { name: 'luck', age: 14 }
和for of 不同的是 遍历的是索引

forEach

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
objs.forEach((obj, idx, arr)=>{
  console.log(obj, idx, arr)
})
//output:
{ name: 'mary', age: 12 } 0 [
  { name: 'mary', age: 12 },
  { name: 'lisa', age: 13 },
  { name: 'luck', age: 14 }
]
{ name: 'lisa', age: 13 } 1 [
  { name: 'mary', age: 12 },
  { name: 'lisa', age: 13 },
  { name: 'luck', age: 14 }
]
{ name: 'luck', age: 14 } 2 [
  { name: 'mary', age: 12 },
  { name: 'lisa', age: 13 },
  { name: 'luck', age: 14 }
]

map

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
const res = objs.map((obj, idx, arr)=>obj)
console.log('res: ', res)
//output:
res:  [
  { name: 'mary', age: 12 },
  { name: 'lisa', age: 13 },
  { name: 'luck', age: 14 }
]
返回一个计算后的数组

filter

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
const res = objs.filter((obj, idx, arr)=>obj.name === 'mary')
console.log('res: ', res)
//output:
res:  [ { name: 'mary', age: 12 } ]
返回一个数组，数组中包含所有满足条件的对象

some

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
const res = objs.some((obj, idx, arr)=>obj.age >= 13)
console.log('res: ', res)
//output:
res:  true
数组中只要有1个对象满足条件就会返回

every

数组中每个对象都满足条件才会返回true

• find

查找出数组中第一个满足条件的对象，并返回

• findIndex

查找出数组中第一个满足条件的对象索引，并返回

reduce/reducPrev/reduceNext

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
const res = objs.reduce((prev, cur, curIdx)=>{
  return prev + cur.age
}, 0)
console.log(res)
//output:
39
//用于累计的用法

var objs = [
  {name: 'mary', age: 12},
  {name: 'lisa', age: 13},
  {name: 'luck', age: 14},
]
const res = objs.reduce((prev, cur, curIdx)=>{
  prev[cur.name] = cur
  return prev
}, {})
console.log(res)
//output:
{
  mary: { name: 'mary', age: 12 },
  lisa: { name: 'lisa', age: 13 },
  luck: { name: 'luck', age: 14 }
}
//用于构造map的用法

reduce((prev, cur, curIdx)=>{}, initV)
initV未prev的初始值

对象相关

for in

var obj = {
  name: 'mary',
  age: '14',
  sex: 'male',
  job: 'student',
  hobby: 'reading'
}
for(let attr in obj) {
  console.log(attr, obj[attr])
}
//output:
name mary
age 14
sex male
job student
hobby reading

for in 可以遍历可遍历对象的所有属性

Object.keys()

var obj = {
  name: 'mary',
  age: '14',
  sex: 'male',
  job: 'student',
  hobby: 'reading',
  xxx: null
}
console.log(Object.keys(obj))
//output:
[ 'name', 'age', 'sex', 'job', 'hobby', 'xxx' ]

返回一个对象所有索引组成的数组

Object.values()

var obj = {
  name: 'mary',
  age: '14',
  sex: 'male',
  job: 'student',
  hobby: 'reading',
  xxx: null
}
console.log(Object.values(obj))
//output:
[ 'mary', '14', 'male', 'student', 'reading', null ]
返回一个对象所有索引值组成的数组

Object.entrys()

var obj = {
  name: 'mary',
  age: '14',
  sex: 'male',
  job: 'student',
  hobby: 'reading',
  xxx: null
}
console.log(Object.entries(obj))
//output:
[
  [ 'name', 'mary' ],
  [ 'age', '14' ],
  [ 'sex', 'male' ],
  [ 'job', 'student' ],
  [ 'hobby', 'reading' ],
  [ 'xxx', null ]
]
返回一个给定对象自身可枚举属性的键值对数组

以上就是笔者所掌握和平常使用的，有遗漏的地方可以补充哦