ES6遍历方法，forEach、for…in，for..of

前言

js中遍历方法很多，在ES6新特性中出现了很多新的遍历方法，使遍历数组和对象更加方便，下面开始列举各种方法。

1.遍历对象

1.1.for…in…循环遍历对象自身和继承的可枚举的属性（不包括Symbol，因为symbol的实例是唯一的不可变的, 用于确保对象的属性不重复）

for…in是用于遍历对象和数组的方法

let obj = {
            a: 1,
            b: '猪八戒',
            c: [1, 2, 3, '孙悟空'],
            d: {
                name: '唐僧'
            }
        }
        //k代表对象的属性名，obj[k]就是属性值
        for (const k in obj) {
            console.log(k,obj[k]);
        }
        //这是懒得再写一个数组，直接调用对象中的数组结果为第二个图
        for (const k in obj.c) {
            console.log(k,obj.c[k]);
        }

1.2.Object.keys()遍历

返回值:返回一个数组
参数:需要遍历的元素
注意:返回值包括对象自身的(不包含所继承的)所有可枚举属性(不含Symbol属性)，一般和其他循环搭配使用

  let obj = {
            a: 1,
            b: '猪八戒',
            c: [1, 2, 3, '孙悟空'],
            d: {
                name: '唐僧'
            }
        }
        //返回值只有一个含有属性名的数组
        console.log(Object.keys(obj));
        //搭配foreach就可以拿到所有的属性值
        //这里用了es6的箭头函数的语法糖
        //()=>{}当只有一个参数的时候省略()当执行语句只有一句省略{}
        Object.keys(obj).forEach(key=>
             console.log(key,obj[key])
        );

1.3Object.getOwnPropertyNames(obj)

返回值:返回一个数组
参数:需要遍历的元素
注意:返回值包括对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

 let obj = {
            a: 1,
            b: '猪八戒',
            c: [1, 2, 3, '孙悟空'],
            d: {
                name: '唐僧'
            }
        }
        //返回一个只有属性名的数组
        console.log(Object.getOwnPropertyNames(obj));
        //这里用了es6的箭头函数的语法糖
        //()=>{}当只有一个参数的时候省略()当执行语句只有一句省略{}
        Object.getOwnPropertyNames(obj).forEach(key=>{
            console.log(key,obj[key]);
        })

1.4 Reflect.ownKeys()

返回值:返回一个数组
参数:需要遍历的元素
注意:返回值包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举

let obj = {
            a: 1,
            b: '猪八戒',
            c: [1, 2, 3, '孙悟空'],
            d: {
                name: '唐僧'
            }
        }
        console.log(Reflect.ownKeys(obj));
        //这里用了es6的箭头函数的语法糖
        //()=>{}当只有一个参数的时候省略()当执行语句只有一句省略{}
        Reflect.ownKeys(obj).forEach(key=>console.log(key,obj[key]))

2.遍历数组

2.1. forEach

 let arr=[1,3,4,'猪八戒',true]
       arr.forEach((value,index,array)=>{
        console.log('value是:',value);//value是属性值
        console.log('index是:',index);//index是元素小下标
        console.log('array是:',array);//遍历的哪一个元素
       })

2.2for…of

支持大多数数组，还支持大多数类数组对象，比如说获取很多的li元素也就是NodeList对象，也支持遍历字符串，原理是吧字符串视为Unicode字符来进行遍历

 let arr=[1,3,4,'猪八戒',true]
       for (const k of arr) {
        console.log(k);
       }

3.3 for…in

在遍历对象时第一个进行演示了这里不演示了

总结

ES6出现的这些新方法进行遍历对象、数组使我们获取元素属性更加的方便，简化代码量，更快速的获取到元素。