1、数组:
① for循环
:
let arr=[1,2,3,4,5,6]
for(let i =0;i <arr.length;i++) {
console.log('正向遍历',arr[i])
}
for(let i =arr.length-1;i >=0;i--) {
console.log('反向遍历',arr[i])
}
② forEach
:与for循环相比,更适用于遍历次数未知的情况。
没有返回值,不会改变原始数组
let arr=[1,2,3,4,5,6]
arr.forEach((item,index,originArr)=>{
console.log('元素,索引 ---》',item,index)
console.log('原始数组',originArr)
})
③ map
:有返回值,返回的是新数组,不会改变原始数组
let arr=[1,2,3,4,5,6]
let a = arr.map((item,index,originArr)=>{
console.log('元素,索引 ---》',item,index)
console.log('原始数组',originArr)
// 默认返回的是 undefined
return 'haha'+item
})
console.log('得到的新数组a',a)
④ for- of
:用来遍历可迭代对象
let arr = ['张三','李四','王五','赵六','钱七','孙八','周九','吴十']
for(let value of arr) {
console.log('元素-->', value) // 张三...
}
2、类数组:
当我们想要获取多个
DOM节点
,并对每一个DOM节点
都进行操作时,就需要使用类数组的遍历。
① for循环
:比较耗性能,一般不用
② slice和call将类数组转化为数组
[ ]表示数组的实例,[ ].slice表示将数组整个进行返回,call表示将作用域提升到
document.getElementsByClassName(“modify__quarter-date”)
这个类数组中。
③ ES6中的...
(扩展运算符)
④ for- of
:用来遍历可迭代对象
3、对象:
① for- in
:
for-in
会遍历数组里的原型链中的属性,需要使用Object.hasOwn
或者hasOwnProperty
来检测属性是否来自原型链。
let obj = {
name:'张三',
age: 52,
address: '家庭住址'
}
for(let key in obj) { // key表示对象的键名
console.log(obj[key]) // 得到对象的键值
}
② Object.keys()
:得到一个以对象的索引组成的数组
let obj = {
name:'张三',
age: 52,
address: '家庭住址'
}
console.log(Object.keys(obj)) // ['name', 'age', 'address']
③ Object.values()
:得到一个以对象的值组成的数组
let obj = {
name:'张三',
age: 52,
address: '家庭住址'
}
console.log(Object.values(obj)) // ['张三', 52, '家庭住址']
④ Object.getOwnPropertyNames()
:得到一个以对象的索引组成的数组(包括原型上的属性)
let obj = {
name:'张三',
age: 52,
address: '家庭住址'
}
console.log(Object.keys(obj)) // ['name', 'age', 'address']
4、对象数组:
① for循环
:
class Person {
constructor(name,age) {
this.name=name
this.age=age
}
}
let arr=[
new Person('张三',20),
new Person('李四',40),
new Person('王五',60),
]
for(let i =0;i <arr.length;i++) {
let age = arr[i].age
if (age>50) {
console.log('年龄大于50的人',arr[i])
}
}
② forEach
:与for循环相比,更适用于遍历次数未知的情况。
没有返回值,不会改变原始数组
class Person {
constructor(name,age) {
this.name=name
this.age=age
}
}
let arr=[
new Person('张三',20),
new Person('李四',40),
new Person('王五',60),
]
arr.forEach((item,index,originArr)=>{
console.log('元素,索引 ---》',item,index)
console.log('原始数组',originArr)
})
③ map
:有返回值,返回的是新数组,不会改变原始数组
class Person {
constructor(name,age) {
this.name=name
this.age=age
}
}
let arr=[
new Person('张三',20),
new Person('李四',40),
new Person('王五',60),
]
let a = arr.map((item,index,originArr)=>{
console.log('元素,索引 ---》',item,index)
console.log('原始数组',originArr)
// 默认返回的是 undefined
return 'haha'+item.name
})
console.log('得到的新数组a',a)
④ for- of
:用来遍历可迭代对象
class Person {
constructor(name,age) {
this.name=name
this.age=age
}
}
let arr=[
new Person('张三',20),
new Person('李四',40),
new Person('王五',60),
]
for(let value of arr) {
console.log('元素--》',value)
}