JS 遍历的方法

目录

1、forEach : 不会改变原数组，没有返回值

2、map：不会改变原数组，有返回值

3、filter：过滤数组，有返回值（返回包含符合条件的元素的数组）

4、for...of: 返回是数组的元素，对象的属性值。不能遍历普通的对象

5、reduce：接收一个函数，作为一个累加器

         6、for...in 遍历对象，获取对象的键名

         7、for...of 和 for...in 的区别

---

1、forEach : 不会改变原数组，没有返回值

var arr = [1,2,3,4,5]
var arr2 = []
// 三个参数：遍历值，索引值，数组本身
arr.forEach((item,index,arr)=>{
    arr2[index] = item+1
}) 
console.log(arr2) // [2, 3, 4, 5, 6]

 2、map：不会改变原数组，有返回值

var arr = [1,2,3,4,5]
// 三个参数：遍历值，索引值，数组本身
var arr2 = arr.map((item,index,arr) =>{
    return item+1
})
console.log(arr2) // [2, 3, 4, 5, 6]

3、filter：过滤数组，有返回值（返回包含符合条件的元素的数组）

var arr = [1,2,3,4,5]
var arr2 = arr.filter( item =>{
    return item>3
})
console.log(arr2) // [4, 5]

4、for...of:返回是数组的元素，对象的属性值。不能遍历普通的对象

• 例1: 遍历数组

var arr = [1,2,3]
for(let value of arr){
    console.log(value)
}
// 1
// 2
// 3

• 例2: 遍历类数组对象

var obj = {
    0: 10,
    1: 11,
    2: 12,
    length: 3
}
obj = Array.from(obj);
for(let value of obj){
    console.log(value)
}
// 10
// 11
// 12

• 例3: 遍历类数组对象

// var obj = {
//     name: '小明',
//     age: 18,
//     sex: '男'
// }
// for( let value of obj){
//     console.log(value) //报错: obj is not iterable
// }

function Person(name,age,sex){
    this.name = name
    this.age = age
    this.sex = sex
}
Person.prototype.height = 188
var p = new Person('小明',18,'男')
p[Symbol.iterator] = function(){
    var keys = Object.keys(this);
    var index = 0;
    return {
        next(){
            if(index < keys.length){
                return { value: p[keys[index++]], done: false }
            }else{
                return{ value: undefined, done: true }
            }
        }
    }

}

for( let value of p){
    console.log(value)
}
// 小明
// 18
// 男

5、reduce：接收一个函数，作为一个累加器

var arr = [1,2,3,4,5]
// 函数主要有两个参数，第一个计算之后返回的值或者初始值，第二个当前的元素
let arr2 = arr.reduce( (pre,item) =>{
    return pre + item

},10) // 10 为 pre 的初始值
console.log(arr2) // 返回值 25

6、for...in 遍历对象，获取对象的键名

for...in 主要是为了用来遍历对象而产生，不适用于遍历数组

var obj = {
    name: '小明',
    age: 18,
    sex: '男'
}
for( let value in obj){
    console.log(value) 
}
// name
// age
// sex

7、for...of 和 for...in 的区别

for...of	for...in
获取对象的键值	获取对象的键名
只遍历但前对象	会遍历对象整个原型链
返回数组的下标对应的属性值	返回数组中所有可枚举的属性
可以用来遍历数组，类数组对象，字符串...	主要是为了遍历对象而产生， 不适用于遍历数组。