• JS遍历对象的七种方法


    一、for...in

    1. let obj ={
    2. name:"cheng",
    3. sex:'man'
    4. }
    5. Object.defineProperty(obj,'age',{
    6. value:"18",
    7. enumerable:true
    8. })
    9. for(item in obj){
    10. console.log(item)
    11. }

    1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

    2.其实for...in的特性会导致一个问题,其继承的属性会被遍历到,所以当我们不想要遍历被继承的属性,那么我们就可以使用Object.keys()

    二、Object.keys()

    可以遍历到所有对象本身的可枚举属性,但是其返回值为数组

    1. let obj ={
    2. name:"cheng",
    3. sex:'man'
    4. }
    5. Object.keys(obj)//['name','sex']

    1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

    Object.keys()来代替for...in遍历操作

    三、Object.values()

    可以遍历到所有对象本身的可枚举属性值,但是其返回值为数组

    1. let obj ={
    2. name:"cheng",
    3. sex:'man'
    4. }
    5. Object.values(obj) // ['cheng', ‘man’]
    6. Object.defineProperty(obj, 'sex', {
    7. value: "666",
    8. enumerable: false
    9. });
    10. Object.values(obj) // ['cheng', ‘man’]

    1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

    四、Object.entries()

    返回值为Object.values()与Object.keys()的结合,返回一个二维数组,每个小数组都是[ [属性名,属性值],[属性名,属性值] ]

    1. let obj ={
    2. name:"cheng",
    3. sex:'man'
    4. }
    5. Object.entries(obj) // [['name', ‘cheng’],['sex','man']]

    其遍历特性与Object.values()Object.keys()相同

    1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

    五、Object.getOwnPropertyNames()

    其返回结果与Object.keys()对应,但是他得特性与其相反,会返回对象得所有属性,包括了不可枚举属性

    1. var arr = [];
    2. console.log(Object.getOwnPropertyNames(arr)); // ['length']
    3. Object.getOwnPropertyDescriptor(arr,"length").enumerable // false

    声明一个空数组,使用Object.getOwnPropertyNames()方法,返回了length,而length属性的enumerablefalse

    六、Object.getOwnPropertySymbols()

    返回对象内的所有Symbol属性,返回形式依旧是数组,值得注意的是,在对象初始化的时候,内部是不会包含任何Symbol属性

    1. let obj = {
    2. name:"obj"
    3. }
    4. Object.getOwnPropertySymbols(obj) // []

    初始化一个对象,通过这个方法返回的是一个空数组

    1. let sym = Symbol()
    2. console.log(sym)
    3. obj[sym] = "cheng"
    4. Object.getOwnPropertySymbols(obj) // Symbol()

     新建symbol,再为声明好的对象添加进去,通过遍历得到Symbol()

    1. var obj = {};
    2. var a = Symbol("a");
    3. var b = Symbol.for("b");
    4. obj[a] = "localSymbol";
    5. obj[b] = "globalSymbol";
    6. var objectSymbols = Object.getOwnPropertySymbols(obj);
    7. console.log(objectSymbols.length); // 2
    8. console.log(objectSymbols) // [Symbol(a), Symbol(b)]
    9. console.log(objectSymbols[0]) // Symbol(a)

    可以看出,可以得到对象中,可以获取包含Symol属性的所有的属性值

    七、Reflect.ownKeys()

    返回的是一个大杂烩数组,即包含了对象的所有属性,无论是否可枚举还是属性是symbol,还是继承,将所有的属性返回

    1. let arr = [0,66,222]
    2. Reflect.ownKeys(arr) // ['0', '1', '2', 'length']

    返回的是数组下标和length属性。

    根据遍历目标区分

    根据返回值区分

    根据遍历值区分

  • 相关阅读:
    深入浅出排序算法之计数排序
    vue element编辑功能
    Java 正则表达式
    Rxjs map, mergeMap 和 switchMap 的区别和联系
    zabbix监控Nginx
    la3_系统调用(上)
    redis集群模式详解
    线上AB实验的日志分析
    OpenCV(四十五):ORB特征点
    多线程的创建及状态描述
  • 原文地址:https://blog.csdn.net/weixin_43465508/article/details/132768971